HTML-Menü

[Elohim 0]

Wir müssen bei uns im Informatikkurs als Projekt eine Website erstellen, jetzt hätt ich gerne so ein Menü, leider hab ich nich viel Ahnung über CSS und unser Lehrer kann noch weniger als ich

Kann mir vielleicht jemand erklären, wie man sowas macht?

Bearbeitet 23. Juni 2005 von Elohim

[Thargor 0]

Hi!

Schau dir einfach den Quelltext der Page an =)

<link rel="stylesheet" href="/basic/layout.css" type="text/css" media="screen, projection" />

und hier is die CSS File

http://panzer-archiv.de/basic/layout.css

das Menü ist HTML, das Layout ist dann mit CSS angepasst.

Ein eintrag sieht so aus:

<li><a href="http://forum.panzer-archiv.de" title="Forum.Panzer-Archiv.de">Forum</a></li>

<li>

sit ein Tag für Aufzählungen (siehe hier ) Und das Menü steht zwischen

<div id="nav">

</div>

 id="nav"

ist eine CSS Zuweisung. In der CSS File steht

/* Navigation */

#nav { position: absolute; top: 130px; left: 15px; width: 18%; padding-bottom: 15px; }

#nav li { display: inline; }

#nav ul a { font-size: 120%; display: block; background: #f5f5f5; padding: 4px; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-top: 1px solid white; color: #5b5b5b; font-weight: bold; }

#nav ul a:hover { background: #ebebeb; }

#nav ul ul { background: #f8f8f8; padding: 10px 0; }

#nav ul ul a { background: #f8f8f8; border: 0px; font-size: 100%; font-weight: bold; padding: 0 0 0 8px; }

#nav ul ul a:hover { text-decoration: underline; background: none; }

#nav ul ul ul { padding: 0 0 8px 0 }

#nav ul ul ul a { font-weight: normal; padding: 3px 0 0 15px; }

#nav p { text-align: center; margin: 0; padding-top: 10px; }

#nav p span { padding: 2px 4px; background: #f5f5f5; border: 1px solid #e5e5e5; font-size: 80%; }

Alle <li> oder <p> Tags die zwischen dem

<div id="nav">

</div>

stehen bekommen die eigenschaften die oben für sie vorgesehen worden sind.

[Elohim 0]

Danke, hatte das mit dem CSS nicht gecheckt gehabt

[-=Punkbuster=- 166]

Das solltest Du aber nicht einfach kopieren, sondern auch erklären können ^^ Ein CSS Hover gehört nicht mal eben zum Standard-Repertoire. Ich empfehle die parallele Lektüre der Website http://www.css4you.de, denn gerade bei der Arbeit mit über CSS gestylten Layern (DIVs) sind Themen wie das Boxmodell:

http://www.css4you.de/wsboxmodell/index.html

ein wichtiger Punkt

[Thargor 0]

Jo klar gehört das dazu =)

Nur kenn ich keine Seiten über CSS, da ich damit leider noch net viel mit gemacht hab.

[Monoman 0]

Was auch noch ziemlich gut für CSS ist, ist das altbekannte selfHTML.

Die richtigen Freaks machen die Webseiten allerdings nur noch mit XML, DTDs, XSL, XSLT und was natürlich dazugehört CSS + XHTML.

MfG

Monoman