YourWBB


yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Navigation in HTML? » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 3.065 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Navigation in HTML?
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
PenSpinner MX
Mitglied


Dabei seit: 09.03.08
Beiträge: 219
Fähigkeiten: WBB2 Profi
Forenversion: 2.3
 Navigation in HTML? Antworten Zitieren Editieren Melden       UP
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!

__________________
WICHTIG: Stylesheet wird im Internet Explorer nicht geladen- was tun?
08.04.08 17:27 PenSpinner MX ist offline E-Mail Finden Als Freund hinzufügen Füge PenSpinner MX in deine Kontaktliste ein MSN Passport-Profil von PenSpinner MX anzeigen
ENTE ENTE ist männlich
So quasi!


images/avatars/avatar-5627.gif

Dabei seit: 21.04.07
Beiträge: 741
Fähigkeiten: WBB3 Profi; WBB2 Profi; WBB Lite 2 Profi
Herkunft: Bernrieder Winkel
Forenversion: 3.0; 2.3
Antworten Zitieren Editieren Melden       UP
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.

__________________
App-Store-Apps.de
Real programmers don't comment their code - it was hard to write, it should be hard to understand
08.04.08 17:35 ENTE ist offline E-Mail Finden Als Freund hinzufügen Füge ENTE in deine Kontaktliste ein
PenSpinner MX
Mitglied


Dabei seit: 09.03.08
Beiträge: 219
Fähigkeiten: WBB2 Profi
Forenversion: 2.3

Themenstarter Thema begonnen von PenSpinner MX
Antworten Zitieren Editieren Melden       UP
Okay Danke!
Gibt es auf de.selfhtml.org ein Tut dazu? Finde die Seite nämlich ziemlich gut smile .

__________________
WICHTIG: Stylesheet wird im Internet Explorer nicht geladen- was tun?
08.04.08 17:37 PenSpinner MX ist offline E-Mail Finden Als Freund hinzufügen Füge PenSpinner MX in deine Kontaktliste ein MSN Passport-Profil von PenSpinner MX anzeigen
codingnoob
Don't hit 'em boon.


images/avatars/avatar-4466.gif

Dabei seit: 16.01.04
Beiträge: 2.756
Antworten Zitieren Editieren Melden       UP
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.

__________________
… mfG, cn …
– Siehe auch: last.fm wBB-User-Group
Vorsicht! User bringt gefährliches Halbwissen in Umlauf!

Kein Support per PN! Dafür ist das Forum da. Auch keine Hinweise auf Threads per PN!

Meine Kritik an deinem Forum, Style, … ist hart? Oh. … das Positive siehst du als Erschaffer ja selbst.
08.04.08 17:43 codingnoob ist offline E-Mail Finden Als Freund hinzufügen Füge codingnoob in deine Kontaktliste ein
PenSpinner MX
Mitglied


Dabei seit: 09.03.08
Beiträge: 219
Fähigkeiten: WBB2 Profi
Forenversion: 2.3

Themenstarter Thema begonnen von PenSpinner MX
Antworten Zitieren Editieren Melden       UP
Hm... Also die Navigation soll Links vom Geschriebenen sein!

Also:

Link1 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruh
Link2 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruhgvtru
Link3 heufijpergfuhjerigjftrighrhgfuierhgfherughfuirehgiuvhrepghvitruhgvtru

Verstehst du?^^

__________________
WICHTIG: Stylesheet wird im Internet Explorer nicht geladen- was tun?

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von PenSpinner MX: 08.04.08 17:49.
08.04.08 17:48 PenSpinner MX ist offline E-Mail Finden Als Freund hinzufügen Füge PenSpinner MX in deine Kontaktliste ein MSN Passport-Profil von PenSpinner MX anzeigen
codingnoob
Don't hit 'em boon.


images/avatars/avatar-4466.gif

Dabei seit: 16.01.04
Beiträge: 2.756
Antworten Zitieren Editieren Melden       UP
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)

__________________
… mfG, cn …
– Siehe auch: last.fm wBB-User-Group
Vorsicht! User bringt gefährliches Halbwissen in Umlauf!

Kein Support per PN! Dafür ist das Forum da. Auch keine Hinweise auf Threads per PN!

Meine Kritik an deinem Forum, Style, … ist hart? Oh. … das Positive siehst du als Erschaffer ja selbst.

Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von codingnoob: 08.04.08 18:16.
08.04.08 17:59 codingnoob ist offline E-Mail Finden Als Freund hinzufügen Füge codingnoob in deine Kontaktliste ein
Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen
yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Navigation in HTML?