PenSpinner MX
Servus
Ich habe mal eine Frage und zwar folgende:
Wie fügt man auf seiner Seite eine Navigation ein? Gibt es Nav´s in HTML?
Wenn es einer weiss, bitte den Code verraten!
ENTE
Du musst uns ersteinmal sagen, wie die navigation aussehen soll. Für eine sehr einfache nimmst du den code:
| code: |
1:
|
<div class="nav"><a href="#">Home</a> - <a href="#">Home</a> - <a href="#">Home</a></div> |
|
in der css kannst du dann die div klasse nav weiter gestalten.
PenSpinner MX
Okay Danke!
Gibt es auf de.selfhtml.org ein Tut dazu? Finde die Seite nämlich ziemlich gut
.
codingnoob
Am besten solltest du die Navigation als Liste auszeichnen. Es gibt irgendeinen Standard, der das vorschreibt, aber frag mich nicht welchen. Vermutliche eine Barrierefreiheit oder so.
Deswegen ist eine Navigation im Endeffekt nichts anders als
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
<ul id="navi">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link x</a>
</li>
</ul> |
|
Dann kannst du die Tags im CSS ganz einfach per
#navi { }
#navi li { }
und
#navi a { }
ansprechen.
Du kannst die List-Items dann mit floats versetzen und die Anker zu Blöcken umwandeln und mit Hintergrundbildern versehen.
PenSpinner MX
Hm... Also die Navigation soll Links vom Geschriebenen sein!
Also:
Link1 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruh
Link2 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruhgvtru
Link3 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruhgvtru
Verstehst du?^^
codingnoob
Wenn du eine senkrechte Navigation willst, ist das mit der Liste noch einfacher.
Du kannst die Navigationsliste (<ul id="navi">) links von einem Container, in den du deinen ganzen Inhalt / Geschriebenes reinschmeißt floaten lassen.
Also quasi
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
|
<!-- header, doctype ... blabla -->
<body>
<ul id="navi">
<!-- Die Liste, wie vorher -->
</ul>
<div id="content">
<!-- Dein Inhalt / Geschriebenes -->
</div>
<!-- Eventuell Footer -->
</body> |
|
Und dann in einem externen Stylesheet (CSS)
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
|
#navi {
float: left;
width: 25%;
}
#content {
float: right;
width: 70%;
} |
|
Wie du ein Stylesheet einbindest, sie selfhtml:
http://de.selfhtml.org/css/formate/einbinden.htm (in meinem Beispiel der 2. Punkt: Externe CSS-Datei)