HTML/CSS Navibalken bzw. Klapptext, wie?

[Project-X]

Guten Tag allerseits

Seit fast 3 Monaten habe ich mein Studium als Software Entwickler begonnen, und im HTML Unterricht haben wir jetzt eine Gruppenarbeit gekriegt.
Und zwar betrifft es die Gestaltung eine eigerne Homepage über die vorgegebene Themen, und es muss mind. 15 Seite sein.
Wir haben das Thema "Windows 7" ausgewählt, und jetzt hab ich ein folgendes Problem.
Ich möchte eine Navi machen mit eine Art Klapptext, oder was auch immer das ist, sowie auf der Seite >>> Aquatuning <<< unter "Kategorien" zu finden ist.
Also wenn ich dort z.B. auf "CPU-Kühler" klicke kommen jede Menge unterkategorien, und je nachdem geht dies nochmals tiefer.

Meine Fragen;
1. Wie wird so etwas realisiert?
2. Wie geht die Code bzw. muss man dies im HTML oder CSS machen?

Wäre froh um euer Hilfe, denn die Seite Self HTML konnte mir nicht viel weiter helfen.

 

[claW.]

hast du dir den quelltext überhaupt schonmal angesehen?

<div id='site_body_menu'>
<a href='http://www.aquatuning.ch/index.php/cPath/29' class='lvl_1'>Sets & Systeme</a>
<a href='http://www.aquatuning.ch/index.php/cPath/22' class='lvl_1'>CPU - Kühler</a>
<a href='http://www.aquatuning.ch/index.php/cPath/22_79' class='lvl_2'>AMD Sockel 462</a>
<a href='http://www.aquatuning.ch/index.php/cPath/22_239' class='lvl_2'>AMD Sockel 939/AM2/AM3</a>
<a href='http://www.aquatuning.ch/index.php/cPath/22_81' class='lvl_2'>Intel Sockel 478</a>
<a href='http://www.aquatuning.ch/index.php/cPath/22_82' class='lvl_2'>Intel Sockel 604</a>
<!-- ... -->
<a href='http://www.aquatuning.ch/index.php/cPath/21' class='lvl_1'>GPU - Kühler</a>
<a href='http://www.aquatuning.ch/index.php/cPath/24' class='lvl_1'>HDD/RAM - Kühler</a>
<a href='http://www.aquatuning.ch/index.php/cPath/164' class='lvl_1'>MB - Kühler</a>
<a href='http://www.aquatuning.ch/index.php/cPath/50' class='lvl_1_active'>Anschlüsse</a>
<a href='http://www.aquatuning.ch/index.php/cPath/50_190' class='lvl_2'>5/3mm</a>
<!-- ... -->
</div>

 

[Project-X]

Doch doch, mir war es klar das es mit einen Link eingebunden ist, aber ich verstehe das ganze Konzept "noch" nicht.
Wenn man also auf so ein Button klickt zB. wie "CPU-Kühlung", wird dann eine neue Seite geöffnet die Identisch aussieht, ausser das es jetzt zusätzlichen Buttons (Unterkategorien) entstehen die in eine untergeordnete "div" Definiert wurde?

Es sieht nämlich auf Aquatuning nicht so aus als wurde denn Header usw. neu geladen wenn man auf so ein Button klickt. Und ich kann mir gut vorstellen dass die Homepage nachher zu lastig wird, oder?

 

[methical]

neinnein der ansatz ist veraltet
du packst die hauptkategorie in einen link
die unterlinks packst du in einen div container und setzt per css folgenden style -> display: hidden
dann machst du in dem onclick event des links der hauptkategorie eine javascript prozedure welche dir beim klick auf den link den style des containers von hidden auf block setzt.

du kannst dir auch hier mal einen überblick darüber verschaffen wie man ansehnliche menüs in html hinkriegt.
http://www.dynamicdrive.com/dynamicindex1/

edit: sowas suchst du wohl, kannst dir ja mal den code dazu ansehen
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

 

[TheCadillacMan]

Es sieht nämlich auf Aquatuning nicht so aus als wurde denn Header usw. neu geladen wenn man auf so ein Button klickt. Und ich kann mir gut vorstellen dass die Homepage nachher zu lastig wird, oder?

Doch, das sind zwei völlig unabhängige Seiten. Der Header sieht nur statisch aus, weil der Browser die Bilder bereits im Cache hat und diese nicht vom Server laden muss. Deshalb wir hält sich auch die Serverlast in Grenzen.

Der Vorteil an dieser Methode ist, dass du ohne JavaScript auskommst. D. h. jemand der JavaScript ausgeschaltet hat kann die Seite trotzdem benutzen. Bei dem Vorschlag von "methical" ist das nicht der Fall. Ob das für dich ein Hindernis ist, musst du entscheiden.

 

[claW.]

neinnein der ansatz ist veraltet
du packst die hauptkategorie in einen link
die unterlinks packst du in einen div container und setzt per css folgenden style -> display: hidden
dann machst du in dem onclick event des links der hauptkategorie eine javascript prozedure welche dir beim klick auf den link den style des containers von hidden auf block setzt.

wozu unnötigen, nicht sichtbaren ballast mitladen, welcher evtl. nie gebraucht wird und noch javascript mit ins spiel bringen? er fängt ja anscheinend auch gerade erst mit html an, wofür die methode javascript völlig fehl am platze ist. lass ihn von grund auf neu anfangen und selbst erfahrungen machen.

 

[methical]

was heißt hier balast? der eine kilobyte wird niemandem weh tun
klar kann er seine erfahrung selbst machen und wie 1996 anfangen seine webseiten zu schreiben, oder direkt lernen state of the art webseiten nach heutigen standards zu erstellen.

 

[Project-X]

Danke für euern Tipps.

@ methical
Dein Link auf der seite "Dynamic Drive" ist genau das was ich gesucht habe, und die Einbindung war gar nicht mal so schwer mit denn Anleitung
Allerdings muss ich zugeben das ich hier in denn JavaScript kaum etwas verstehe ^^
claW. hat recht, ich bin tatsächlich noch ziemlich am anfang, und HTML wird bei uns nicht stark bewertet, weil es nur ein nebenfach ist. Aber meine Interesse selbst sind sehr gross dabei

@ TheCadillacMan
Wenn ich also richtig verstehe muss ich bei meine Projekt Arbeit für denn Navileiste oben (News, Artikel, Downloads, Forum usw.) für jeder Link eine neue html/css Datei machen?
Dann würde es ja heissen das es haufenweise Seiten überlagert sind, und mehr oder wenniger nur durch Hyperlinks durch die Seiten hin und her geswitcht werden?

@ Thema
Hab mal meine gesammte Arbeit Upgeloaded, es war rechtlich viel Aufwand dahinter, vorallem im Photoshop
Ich bin mir bewusst dass die Resultat über das Ziel hinausgeschossen wurde, aber ich habe so freude daran dass es mir egal ist, was den Aufwand betrifft.
Und dabei lerne ich auch viel neues was meine Konkurenten ääähhh... Klassenkameraden (noch) nicht können

Ich hab nämlich jetzt ein neues Problem über dem ich leider noch nicht mächtig wurde, und zwar betrifft es denn "a:hover" (Glaube ich jedenfalls).

Wenn ich bei der Navileiste oben mit der Maus rüberfahre, sollte eigentlich die verlinkten "button1.png" bis "button4.png" kommen, aber dies geht nicht wirklich.

Problem 1. Es kommt bei allen vier Kategorien nur die Button 4 für die Startseite.
Problem 2. Die Buttons sind in png abgespeichert und Transparenz, aber es kommt immer eine Hintergrundfarbe die ich für denn linken Kategorie verwendet habe (das mit diesen Klapptext).

Wisst Ihr vielleicht was falsch ist? Die Quelltext und denn dazu benötigte css Datei sowie die kleine grafiken habe ich in eine RAR gepackt und hier hochgeladen.

Und noch nebenbei, ich weis nicht warum es im Internet Explorer richtig darstellt und im Firefox nicht, und zwar betrifft es denn Klapptext

Screenshot von mein Projekt >>> Klick mich! <<<

 

[claW.]

vllt ein paar tipps:

<span class="submenu" id="sub2">
  - <a href="#">Aufbau & Geschichte</a></br>
  - <a href="#">Versionen</a></br>
</span>

so etwas solltest du in einen div-container packen. span solltest du nur für text verwenden, welchen du hervorheben, einfärben o.ä. willst. weiterhin kannst du für die navigation aufzählungen verwenden (welche deinen gedankenstrich am anfang automatisch einfügen können):

.submenu {
  margin-bottom: 0.5em;
  color: #000;
  list-style-type: none;
}

<ul id="sub2" class="submenu">
  <li><a href="#">Aufbau &amp; Geschichte</a></li>
  <li><a href="#">Versionen</a></li>
</ul>

auf deinem weg alternativ:

.submenu > a {
  display: block;
}

<div id="sub2" class="submenu">
  <a href="#">Aufbau &amp; Geschichte</a>
  <a href="#">Versionen</a>
</div>

dann sind die unterpunkte auch schön untereinander eingereiht in gleicher größe.

weiterhin, wenn du gerade am anfang mit dem lernen steht, dann würde ich so etwas wie javascript gänzlich sein lassen. nicht, weil ihr damit extra-punkte bekommen könntet, sondern einfach, weil ihr dadurch auch abzug bekommen könnt (zumal wenn ihr dies nicht selbst programmiert habt). außerdem das wichtigste: verstehst du was dort passiert? oder verlässt du dich nur darauf, dass etwas passiert, ganz egal was dort eigentlich passiert? wenn du es im nachhinein erklären sollst, dann stehst du nämlich dumm da. zumal in dem script in fast jeder zeile das semikolon fehlt.

zu dem button problem:
du hast einen header für die gesamte navi gemacht, was imo sehr sehr schlecht ist und du dir schnell abgewöhnen solltest. sonst bekommst du bei großen projekten (wenn du mal welche machen willst) sehr schnell probleme und zwar nicht nur aus styling-gründen (falls du mit javascript arbeiten willst, kannst du hier schonmal getrost viele sachen vergessen).

aber trotzdem: du hast zwar eine klasse für die buttons, aber was passiert beim drüberfahren? dazu brauchst du pseudoklassen - im aktuellen fall :hover. hier musst du nun das bild einfügen, welches erscheinen soll, wenn du mit der maus drüber fährst. weiterhin hast du keine hintergrundfarbe angegeben, also nimmt der browser eine x-beliebige (bzw. die standardfarbe, wenn keine eingestellt wurde):

.button1:hover {
  background: transparent;
  background-image: url(alpha_design/button1.png);
}

zu dem a:hover problem:
hier beziehst du alle links ein. nicht nur die in der navigation, nicht nur die im header, sondern wirklich alle, komplett über die ganze seite verteilt. willst du dann hierbei wirklich bei jedem link ein hintergrundbild mit einbetten?

was eigentlich mit der navigation und den links passiert:
jedes mal, wenn du über einen link fährst, fügt der browser laut deiner definition das hintergrundbild "button4.png" ein. da du ebenso die hintergrundfarbe vergessen hast zu deklarieren, wird auf irgend eine farbe ausgewichen. deswegen entsteht u.a. diese farbe beim darüberfahren. weiterhin besitzen die buttons in der navigation keine aktion beim drüberfahren. da diese nun aus links bestehen (a-element), wird auf dein a:hover zurückgegriffen, wodurch hier nun überall "button4.png" angezeigt wird, obwohl du ja ein anderes sehen willst.

für eine projektarbeit, solltest du vllt auch die links zum w3c validator entfernen.

guter rat: fang wirklich ganz bei null an. ohne große layouts, grafiken oder sonstwas. sonst fällst du später irgendwann mal auf die schnauze, denn im prinzip kannst du es zwar, aber wenn du grobe fehler übersiehst bzw. diese so gelernt hast, ist es schwer sich dieser wieder abzugewöhnen oder gänzlich umzudenken.

und zu guter letzt: wenn du wirklich kaum etwas kannst, mal dir das layout erstmal mit bleistift auf ein blatt papier und versuche dieses nachzubauen und zwar so, dass wenn du inhalt einfügst, dieses auch bestehen bleibt und nicht verrutscht oder verzieht.

weniger ist manchmal mehr.

 

[Project-X]

Danke dir für die gute Erklärungen claW.
Hab meine Wissenslücke was denn Pseudeklasse :hover anbelangt gedeckt, sowie ein paar neue Sachen gelernt

Wie du sicher denken kannst ist die Java Script tatsächlich nicht von mir, sonder von der Seite "dynamicdrive" die mir methical gegeben hat.
Dies ist eigentlich genau das was ich wollte, und du hast recht mit deiner Behauptung! Ich verstehe tatsächlich sehr wenige dinge davon Unseres Hauptgebiet in der Studium ist "Java" (ohne Script), und dort bin ich leider sehr sehr schlecht, und mache mir schon ernsthaft Sorgen ob ich die Promotionen schaffe, da Java eine Fall fach ist

JavaScript selbst werden wir im HTML Unterricht noch befassen, aber dies wird es erst in nächste (oder sogar übernächste?!) Semester so sein.
Bis dahin versuche ich das Maximum aus mein Wissen heraus zu holen was ich kann Nur leider ist es schlichte Dinge wie du siehst, denn die Grafik war grösstenteils mit Photoshop gemacht und wurde nur einfach eingebunden.

Mittlerweile habe ich mein Projekt nach deine Tipps gefixt, und es läuft vorerst wie es sein sollte, ausser dass der JS noch drin ist (bis ich eine Alternative erlernt habe).

Das mit der Skizze hatte ich anfangs auch gemacht, hatte eine Kugelschreiber genommen und meine ungefähre Vorstellungen auf ein Blatt Papier gebannt.
In der nächsten Phase dies auf Photoshop, und anschliessend dies als HTML/CSS erstellt (ohne Bilder & Sonstiges).
Durch dieser Vorgang konnte ich die Devisions oder kurz "div" kennenlernen und anwenden, denn anfangs hatten wir dies alle noch mit den "table" tag gemacht, und dies war laut mein Lehrer kein guter Idee, sondern dient lediglich als die ersten geh versuche.

Mein jetziger Wissensstand kann also Problemlos eine Tabelle mit schlichte Formatierungen und Grafikeinbindungen Bewerkstelligen.
Die Probleme hast du ja gesehen bei mir, es sind eben die Effekte bzw. Aufbau / Vorgehensweise einer Webseite, da ich noch nie eins gemacht habe