Hallo,
habe mal wieder ärger mit dem Internet Explorer.
Ich möchte eine Navigationsleiste Programmieren. Ich möchte auf die Listen-Typen verzichten, da ich eigene Listenpunkt-Bilder erstellt habe.
Schon bei unformatierter Ausrichtung sieht man, dass sich das eingefügte Bilt im IE ein Pixel höher angeordnet wird wie es eigentlich sollte. Aber so Eng wollt ich ja eh die Navigationsounkte nicht haben.
Also habe ich dem <li>-Attribut den Padding-Befehl nach oben und unten 10 Pixel anzuwenden, damit das ganze ein wenig luftiger wird.
Im Firefox klappt das einwandfrei, aber der IE setzt nun meine Grafik noch höher an.
Hier könnt ihr mal das ansehen:
Und hier ist der Code:
CSS:
#sidebar1 ul {
font-size: 12px;
list-style-type: none;
}
#sidebar1 li {
list-style-image: url(../pics/button-inactive.gif);
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
XHTML:
<div id="sidebar1"><ul>
<li><a href="index.html">Home</a></li>
<li><a href="zeichenkurse.html">Zeichenkurse</a></li>
<li><a href="bilder.html">Bilder und Zeichnungen</a></li>
<li><a href="illustrationen.html">Buchillustrationen</a></li>
<li><a href="ausstellungen.html">Ausstellungen</a></li>
<li><a href="werbegrafik.html">Werbegrafik</a></li>
<li><a href="vita.html">Vita</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<!-- end #sidebar1 --></div>
Ich habe auch schon probiert, die Grafiken bei dem <ul>-Attribut einzufügen, aber das ergebniss ist dasselbe. Ausserdem soll sich die Farbe je nach "activ" bzw. "hover" ändern. Also bin ich sozusagen an das <li>-Attribut gebunden. (Farbe einbinden kommt noch, es geht mir jetzt erstmal nur um die Ausrichtung)
Meine Frage ist nun, wie bekomm ich die Grafik so an das <li>-Attribut angehängt, dass es mit dem Text Bündig ist, so wie im Firefox?
Oder gibt es eine Möglichkeit die Größe des List-styles : "quadrat" zu verändern? Das wäre nämlich die einfachste Variante. Aber so klein sieht das optisch nicht so toll aus finde ich. Die Font-größe beträgt 12px, und da wirken die Quadrate sehr mickrig. Wenn man die vergrößern könnte, wäre mein Problem gelöst.
Hat jemand ne Idee wie man das hinbekommt?
Vielen Dank schon mal für eure Antworten.
Gruß
Ironbird
habe mal wieder ärger mit dem Internet Explorer.
Ich möchte eine Navigationsleiste Programmieren. Ich möchte auf die Listen-Typen verzichten, da ich eigene Listenpunkt-Bilder erstellt habe.
Schon bei unformatierter Ausrichtung sieht man, dass sich das eingefügte Bilt im IE ein Pixel höher angeordnet wird wie es eigentlich sollte. Aber so Eng wollt ich ja eh die Navigationsounkte nicht haben.
Also habe ich dem <li>-Attribut den Padding-Befehl nach oben und unten 10 Pixel anzuwenden, damit das ganze ein wenig luftiger wird.
Im Firefox klappt das einwandfrei, aber der IE setzt nun meine Grafik noch höher an.
Hier könnt ihr mal das ansehen:
Und hier ist der Code:
CSS:
#sidebar1 ul {
font-size: 12px;
list-style-type: none;
}
#sidebar1 li {
list-style-image: url(../pics/button-inactive.gif);
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
XHTML:
<div id="sidebar1"><ul>
<li><a href="index.html">Home</a></li>
<li><a href="zeichenkurse.html">Zeichenkurse</a></li>
<li><a href="bilder.html">Bilder und Zeichnungen</a></li>
<li><a href="illustrationen.html">Buchillustrationen</a></li>
<li><a href="ausstellungen.html">Ausstellungen</a></li>
<li><a href="werbegrafik.html">Werbegrafik</a></li>
<li><a href="vita.html">Vita</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<!-- end #sidebar1 --></div>
Ich habe auch schon probiert, die Grafiken bei dem <ul>-Attribut einzufügen, aber das ergebniss ist dasselbe. Ausserdem soll sich die Farbe je nach "activ" bzw. "hover" ändern. Also bin ich sozusagen an das <li>-Attribut gebunden. (Farbe einbinden kommt noch, es geht mir jetzt erstmal nur um die Ausrichtung)
Meine Frage ist nun, wie bekomm ich die Grafik so an das <li>-Attribut angehängt, dass es mit dem Text Bündig ist, so wie im Firefox?
Oder gibt es eine Möglichkeit die Größe des List-styles : "quadrat" zu verändern? Das wäre nämlich die einfachste Variante. Aber so klein sieht das optisch nicht so toll aus finde ich. Die Font-größe beträgt 12px, und da wirken die Quadrate sehr mickrig. Wenn man die vergrößern könnte, wäre mein Problem gelöst.
Hat jemand ne Idee wie man das hinbekommt?
Vielen Dank schon mal für eure Antworten.
Gruß
Ironbird
