D.R.: Navigation zentrieren

Beitrag lesen

Hallo,

Nur ich kann die Breite der einzelnen Buttons nicht ändern. Was mache ich falsch?

s.u.

Würde mich freuen wenn du nochmal drüberschaust.

Aber sicher doch.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<style type="text/css">

body, a {text-align: center;}
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

Hier ist eine Klammer zu viel. Unbedingt ändern!

Kleiner Tipp: Die JavaScript-Konsole (von FF 1.5) bzw. die Fehlerkonsole (von FF 2) zeigt dir auch solche CSS-Fehler an.

ul#Navigation {
    margin: 0; padding: 0;
  }
  ul#Navigation li {
    width: 300px; height: 30px;
    list-style: none;
    display: inline;
    text-align:center;
    background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");

margin: 0; padding: 0;
  }

Du kannst hier keine Breite festlegen, weil du „display:inline“ angegeben hast. Wenn du eine Breite vorgeben willst, musst du jedoch mit display:block, sowie float arbeiten.

So hat es bei mir funktioniert (Formatierungen für den Body sind nicht enthalten):

###Mein Code########

  
  ul#Navigation {  
    margin: 0 auto; /*Navigation in der Mitte ausrichten*/  
    padding: 0;  
    width:400px; /*Gesamtbreite aller <li>'s - ohne die, kannst du die Navigation nicht zentrieren*/  
  }  
  ul#Navigation li {  
    width: 100px; /*Ich habe den Wert ein wenig verändert - kannst du je nach Bedarf anpassen*/  
    height: 30px;  
    list-style: none;  
    float:left; /*<li>'s nebeneinander setzen*/  
    text-align:center;  
    background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");  
    margin: 0; padding: 0;  
  }  

###Mein Code#########

Ansonsten sieht der Code aber schon mal sehr gut aus. Weiter so!

mfg. Daniel