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