Navigationsleiste Design

[Niclas D.]

Hallo liebe Leute,

ich habe folgendes Problem und zwar habe ich auf meiner website eine Tabelle erstellt die die Navigationsleiste ist. Sie sieht so aus :

<table width="800"  height="40"border="0" align="center" name="navi" class="navi">  
   <tr>    
      <td width="70">Startseite</td>    
      <td width="70">Bilder</td>    
      <td width="70">Videos</td>    
      <td width="70">Tutorials</td>    
      <td width="70">Kontakt</td>  
   </tr>
</table>

Nun wollte ich es so machen, das die Navigations leiste komplett aus einem Bild besteht und dann wenn ich mit dem hover effekt arbeite, dass sich nur eine Zeile verändert.


Ich habe keinen Plan wie ich auch nur ansatzweise anfangen soll.




mfG Niclas

 

[bdt600]

Frage: warum eine Tabelle? Du hast keine tabellarischen Daten, also brauchst du auch keine Tabelle. Füttere google mal mit: css navigation

 

[Dominic28]

Ansatzweise würde ich dir erstmal empfehlen von Tabellen auf Divs umzusteigen, damit die richtigen Grundlagen für sowas gegeben sind.

 

[XraYSoLo]

Der erste Ansatz wäre, die (veraltete) Tabelle durch ein allumschließendes DIV - das das Hintergrundbild enthält - zu ersetzen. Danach die einzelnen Linkbereiche per Block-Element auszuzeichnen.

Nils aka XraYSoLo

Edit: Da war wer wieder schneller als ich...

 

[Niclas D.]

Ok danke erstmal für eure super schnelle hilfe. Ich habe eine Tabelle genommen weil mir gesagt wurde das div´s zu umständlich und unübersichtilich sind.

nja ich werde jtzt erstmal alles in div umschreiben

 

[bdt600]

Guck einfach mal hier: CSS Tipps und Anleitungen

 

[threadi]

Ansatzweise würde ich dir erstmal empfehlen von Tabellen auf Divs umzusteigen, damit die richtigen Grundlagen für sowas gegeben sind.

Der erste Ansatz wäre, die (veraltete) Tabelle durch ein allumschließendes DIV

Das soll eine Navigationsleiste sein, also wäre eine <ul>-Liste korrekt. Wenn HTML5 verwendet wird, würde ich das noch mit <nav> umgeben - aber niemals dafür ein <div> verwenden.

 

[Niclas D.]

ich habe mich jetzt für diese variante entschieden

<ul id="navi" class="navi" name="navi">    <li><a href="#">Seite&nbsp;1</a></li>    <li><a href="#">Seite&nbsp;2</a></li>    <li><a href="#">Seite&nbsp;3</a></li>    <li><a href="#">Seite&nbsp;5</a></li>    <li><a href="#">Seite&nbsp;6</a></li>  </ul>

jetzt muss ich noch das css dokument machen aber ich weiß halt nicht wie ich ein ild als hintergrund nehme und jeden kink mit nem hover efekt mache

 

[threadi]

Das Hintergrund von was? Von der Navigation? Dann so:

ul#navi { background-image: url(bild.png); }

Den hover-Effekt bei Links kann man so erreichen wie z.B. hier beschrieben:
SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

 

[Dominic28]

Hast natürlich recht. Lieber ne Ul anstatt Divs für eine Navi. War nur dieses Reflexartige: oh Tabellen nimm lieber Divs.
Man weiß ja nicht wie der Rest vom Code aussieht wenn man ihm gesagt hat, dass Divs umständlich und unübersichtlich sind.

 

[Niclas D.]

Ok danke nochmal.

habe jetzt nur noch ein problem und zwar will ich das die nav leiste horizontal verläuft. weiß nicht ob ich das in der css oder in der html einstellen muss

 

[bdt600]

Etwas mehr Eigeninitiative bitte. Eine Antwort findest du nämlich, wenn du mein Posting beachtest.

Guck einfach mal hier: CSS Tipps und Anleitungen

 

[Niclas D.]

Ok da musst ich dir recht geben. Eigentlich mache ich auch das meiste alleine aber heute früh hatte ich irgentwie keine lust...

nja jeden falls ist meine leiste jetzt horizontal aber wenn ich ihr ein bild zu weise wird das in jeder teil der leiste neu gemacht und ich möchte das die liste komplett aus einem bild besteht

mein css code :

#navi {float: left;position: relative; left: 50%;margin: 0 auto;padding: 0; list-style-type: none;}
#navi li {float: left;position: relative;right: 50%;}
#navi a {width: auto;display: block;padding:0 10px;line-height: 1.5em;color: #fff; background:#960;border:1px solid #024c68;text-decoration:none;}
#navi a:hover {background: #ffa340;color: #000;}

 

[threadi]

Wo ist in deinem CSS-Code das Bild? Ich denke, wenn Du es als background-image zuweist suchst Du nur noch nach
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

 

[Niclas D.]

In der zweiten zeile bei background:#960 ist normaler weise das bild aber wenn ich dort ein bild einfüge wird das in jeder zeile neu wiederholt

 

[Niclas D.]

So wie das hier http://www.psdgraphics.com/wp-content/uploads/2009/08/css-navigation.jpg