Mit HTML Menü erstellen?

[Ettiene]

Naja, ich hab mich schon oft mit HTML beschäftigt, jetzt mal ein Tutorial benutzt um ein wenig mehr zu lernen. ^^

Leider stand in dem Tutorial nicht wie ich zumbeispiel bei einer Homepage ein Menü erstellen soll.
Also was ich unter Menü versteh :
Mehrere Links in einer art tabelle, dieses menü sollte sich links neben dem textfeld befinden. Naja oder einfach irgendwo links oben aber alles andere soll sich daneben befinden nicht überall drumherum. (bei meinem versuch war der rest überall ^^).

Ich möchte es möglichst nur mit html machen, css kann aber auch dazukommen. Aber bitte nicht mit php oder javascript oder so das versteh ich garnicht.

 

[hokage555]

definiere menue xD

ein menue oder eine navigation ist eine liste. d.h. eine aufzählung von mehreren links.

als solche liste zeichnest du dein menu auch in html aus.

du schreibst so:

<ul id="menu">
   <li> <a class="link" href="deineseite1.html"> deine seite 1</a> </li>
   <li> <a class="link" href="deineseite2.html"> deine seite 2</a> </li>
   <li> <a class="link" href="deineseite3.html"> deine seite 3</a> </li>
   <li> <a class="link" href="deineseite4.html"> deine seite 4</a> </li>
</ul>

so das ist der teil deines menus, den du in html schreibst. du siehst, dort ist keinerlei design, sondern nur der content. d.h. dort sind nur die einzelnen links als liste ausgezeichnet.

die attribute id und class sind wichtig für css.
wenn du das nicht kennst, dann google (das hilft ;-) )

kommen wir nun zu css:
in dein stylesheet schreibst du:

#menu{
float:left;
display:block;
list-style-type:none;
width: ***px;
...
}

.link{
background-image:url(deinhintergrundbild.jpg);
text-decoration:underline;
...
}

so das war es auch schon.
du siehst also, dass den hauptteil css übernimmt. mit css gestalltest und positionierst du.
mit html zeichnest du den inhalt aus.
alles klar???

mit css steheh dir tür und tor offen.
um dein menu links am bildrand gelistet stehen zu haben, reichen nur die beiden eigenschaften float:left und display:block;

aber css kann ja noch viel mehr ;-)

also informieren und ein ausgefeiltes extraagandes menu bauen ;-)

kleine anregungen xD

man kann mit css auch dropdownmenus etc. kreieren, aber dafür bräuchte man dann schon eine gewisse grundlage, die du dir erseinmal aneignen solltest

grüße hokage

 

[Lenchen]

Damit fließt aber wieder der text "um" die Navi. Um das zu verhindern muss der "Inhaltsbereich" in ein <div id="content"></div> gepackt werden.
Dann im css

div#content {
                    margin-left=x;
                  }

Das x ist die Breite von deiner Navi plus etwas "Zuschlag" damit der Text nixht direkt an der Navi klebt.
Diesen Wert kannst du in verschiedenen Maßeinheiten angeben. Ich würde dir "em" empfehlen, da sich die Breite deiner Navi somit nach der Schriftgröße richtet (du kannst das ausprobieren, indem du auf deiner Tastatur str und + drückst, damit vergrößerst du die scriftgröße. Alle Elemente, denen du Größen in em gegeben hast wachsen dabei mit.
Bei Elementen, denen du immer einen Prozentualen Anteil des Browserfensters geben willst kannst du % als maßeinheit verwenden und bei Objekten, die eine feste Größe haben sollen (z.B. Bilder) gibst du die Einheit px.

 

[prm]

Hier findest du viele Menuebeispiele.
Hinsichtlich der Positionierung musst du dich dann noch etwas mit CSS befassen.