7x bewertet

Geteilte Navigation

von Amy Mizuno  |  21.01.2008 um 22:06 h
CSS Anwendungen
Typ: CSS Anwendungen
Stufe:Einfach
soo, mein 3. Tut für euch - hier zeige ich euch, wie ihr eine Geteilte Navi hinbekommt.
Dazu müsst ihr eine Tabelle erstellen, ihr hab mal eine mit der Breite 200px genommen:

<table width="200" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td colspan="2">Main</td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
</table>

So siehts dann aus:

Main
-Link -Link
-Link -Link
-Link -Link

(die Links sind natürlich sauber aufgeteilt)


Ihr könnt das Ganze natürlich mit Bildern versehen. Anstatt des Textes "Main" ein Bild und unterhalb der Navi einen Footer. Dafür müsst ihr aber die 2 Spalten mit colspan="2" zusammenfügen. Das funktioniert dann so:

Bild
-Link -Link
-Link -Link
-Link -Link
Bild


(auch hier sind die Links dann sauber aufgeteilt)

Hierzu der Quelltext:

<table width="200" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td colspan="2"><img src="PFAD/ZUM/HEADER.jpg" border="0" alt=""></td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
<tr>
<td width="50%">-<a href="#"> Link</a></td>
<td width="50%">-<a href="#"> Link</a></td>
</tr>
<tr>
<td colspan="2"><img src="PFAD/ZUM/FOOTER.jpg" border="0" alt=""></td>
</tr>
</table>


Cya,
Amy



9 Kommentare




DiabolicHerz

Macht unnötig viel Code, wäre mit Float geschickter.
am 21.01.2008 um 22:35 Uhr


Ela

Da geb ich dir Recht, ExDiabolicHerz. Smilie
am 22.01.2008 um 09:44 Uhr


Pinoy

Schöööön <3
am 23.01.2008 um 20:24 Uhr


Smilie Hallo?, Das ist ja auch kein Proficode Smilie Das Tutorials soll dienen damit auch diejenigen sowas erstellen können die sich nicht so ganz mit HTML,CSS oder sonst was auskennen !
am 23.01.2008 um 20:51 Uhr


DiabolicHerz

Aber dann sollte es schon der geschickteste Weg sein. Du erklärst jemandem eine Matheaufgabe ja auch nicht über 1000 unnötige, schwierige Umwege, wenn man sie kurz & einfach lösen könnte...
am 23.01.2008 um 23:27 Uhr


Dafür braucht man doch keine 3 verschiedenen Zeilen.
<table>
<tr><td>
Link<br>
Link<br>
Link<br>
</td>

<td>
Link<br>
Link<br>
Link<br>
</td>
</tr></table

würds auch tun. Außer man hat zu lange Links...aber dann schauts eh blöd aus.
am 01.02.2008 um 20:42 Uhr


neontrauma

Mit display:block und Floating kommt man auch vollkommen ohne Tabelle aus.

@ Samantha:
Wenn man jemanden etwas falsch bzw. viel zu umständlich beibringt, hat derjenige aber auch nicht viel davon. Im Gegenteil ;)
am 08.02.2008 um 14:50 Uhr


etwas umständlich...
am 16.02.2008 um 16:20 Uhr


Vegeto

Jaa ich find das Tutorial gut, aber wie
schon gesagt gibts auch bessere Wege.
Ich will mal wissen wie das mit "display:block" und float ,
das hinbekommt.
am 18.11.2009 um 00:25 Uhr