7x bewertet

Horizontale Navigation

von Sadako  |  14.03.2010 um 23:00 h
CSS Anwendungen
Typ: CSS Anwendungen
Stufe:Einfach Mittelmäßig
Hallo alle zusammenˆ.ˆ
Nun versuche ich mich mal an einem Tutorial für Giatu indem ich einen Wunsch erfülle.
Jemand wollte wissen, wie man eine Horizontale Navigation wie hier auf Giatu erstellt. Also fangen wir einfach mal an!

CSS und HTML Vorkenntnisse sind wichtig!


Ich werde hier erklären wie man eine Tabelle mit CSS verbindet um so eine Navigation zu bekommen, ich weis nicht ob es auchnoch andere Varianten gibt.

Also los gehts, erstmal erstelle ich eine Tabelle, dorthin wo die Navigation später hin soll. Meine Tabelle sieht so aus:

<table width="70%" cellspacing="2">
<tr>
<td align="center"><a href="" class="menu">Main</a></td>
<td align="center"><a href="" class="menu">Der Admin XD</a></td>
<td align="center"><a href="" class="menu">Über meine Website</a></td>
<td align="center"><a href="" class="menu">Link Back</a></td>
<td align="center"><a href="" class="menu">Pfeffer-</a></td>
<td align="center"><a href="" class="menu">Kuchen</a></td>
</tr>
</table>

Ohne CSS (ich hab hier mal einen Rahmen reingemacht) sieht das ganze nun so aus:

Bild


Nun kommt noch das CSS dazu, hier im Code ist alles erklärt:

a.menu {
display:block; /* Sorgt hier dafür, dass der Link die gesamte Tabellenspalte ausfüllt */
padding:8px; /* Abstand um den Text */
margin:3px; /* Abstand um den gesamten Link */
background:#333333; /* Hintergrund */
color:#FFFFFF; /* Schriftfarbe */
font-size:13px; /* Schriftgröße */
font-family:arial; /* Schriftart */
text-transform:uppercase; /* Alle Buchstaben des Textes sind immer groß */
text-decoration:none; /* Keine vom Browser vorgegebene Schrift-Deko (Unterstrichen etc.) */
}
a.menu:hover {
display:block;
padding:7px;
margin:3px;
background:#808080;
color:#FFFFFF;
font-size:13px;
font-family:arial;
text-transform:uppercase;
text-decoration:none;
border:1px solid #000000;
}



Erklärt dürfte wohl alles sein, wenn man Vorkenntnisse hat, dürfte man den Rest wohl auch verstehen, wenn nicht fragt einfach nach :)

Mein Ergebnis sieht nun so aus:

Bild



7 Kommentare




robi

Gelungenes Tutorial!
am 14.03.2010 um 23:18 Uhr


silverSeb

Tabellen für diese Darstellung zu verwenden ist leider stark veraltet und nicht zu empfehlen, da es die Trennung von Inhalt (HTML) und Darstellung (CSS) aufhebt und semantisch außerdem einfach nur falsch ist.
Der HTML-Code ist leider stark fehlerhaft und nicht HTML-konform. Es sollten wenigstens die Anführungszeichen bei width, callspacing und align verwendet werden. Diese drei Eigenschaften lassen sich ganz nebenbei übrigens auch mit CSS erreichen.
Desweiteren kann der CSS-Code stark gekürzt werden, da alle Eigenschaften, die nicht beim hover geändert werden, nicht noch einmal aufgeführt werden müssen (in diesem Fall z.B. display, margin, color usw...). Der Link behält diese beim hover bei.

Ich rate sehr stark von der Verwendung dieses Codes hier ab und empfehle folgenden Link:
[URL]http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Hier wird in jedem Fall korrektes und sinnvolles HTML und CSS verwendet.

Liebe Sadako, ich will dich mit diesem Kommentar keinesfalls irgendwie "runtermachen". Ich freue mich, dass du dich für die Community engagierst und dir die Mühe machst, hier ein Tutorial zu verfassen. Wenn man vom Inhaltlichen absieht, ist es auch gut geworden (mit den Erklärungen und den Screenshots, etc.).
am 15.03.2010 um 00:08 Uhr


SmaX

@silverseb: ich bin genau deiner Meinung!! xD.

Außerdem macht man Navigationen mit <li> -tags und nicht mit Tabellen.. Aber ansonsten gut erklärt.
am 15.03.2010 um 19:27 Uhr


SheGoesPanic

Danke, sehr hilfreiches Tut. (:
am 16.03.2010 um 09:00 Uhr


llarca

@smax: uhm nur weil ihr navigationen mit <li>-tags macht, müssen das ja nicht alle machen oder?
Ausserdem sind Listen als Navigationen für Anfänger oft kompliziert und unverständlich..

Also ich finde das Tut nicht schlecht, obwohl man, wie silverseb gesagt hat, vielleicht die Anführungszeichen ergänzen sollte und die css bereinigen.
am 25.03.2010 um 11:18 Uhr


SmaX

Hey,

@llarca: ich schreibe niemanden vor <li>-tags zu benutzen nur sollte man nach den neuen Standards keine Tabellen mehr für das Design verwenden. Darum ratet man von Tabellen ab. Außerdem sind <li>-tags fast noch einfacher als Tabellen.. aber jeder wie er es mag.

MfG SmaX
am 25.03.2010 um 14:10 Uhr


Sadako

@Smax: naja ich finde es eben mit <li>-Tags total kompliziert, diese methode ist für mich eben einfacherˆˆ′
Ich ergänze die Anführungszeichen gleich noch, bin meistens zu faul dafür XD′
am 03.04.2010 um 10:59 Uhr