nicht angemeldet
Positionierung passend zum background
0 0 0 
Gernot Back
0 0 0 0 Gernot Back
Positionierung passend zum background
Hallo,
ich habe eine vertikale Navigationsleiste, zwischen den einzelnen Links soll mit einer Grafik eine kleine Trennlinie eingeblendet werden. Die einzelnen Links sollen 17px hoch sein, die Grafik zwischen drin 5px.
Ich habe dies nun so gelöst, dass ich für das <ul>-Tag ein background-image habe, dies habe ich 22px hoch gemacht, auf den ersten 5px die Trennlinie, auf den restlichen 17px ist nichts.
Jetzt mein Problem, warum bekomme ich die Trennlinie im IE nicht zwischen den Menüpunkten angezeigt, hab schon stundenlang getüftelt, leider ergebnislos....
Ich wäre dankbar wenn mir jemand mal einen Tip geben könnte. Vielen Dank.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
body, p a {
font: normal 100.01% Verdana, Helvetica, Arial, sans-serif;
color: black; background-color: white;
}
ul#Navigation {
border-style:none;
border-width: 0px;
padding:5px 0 5px 0;
margin:0 0 0 0;
width: 201px;
background-color: #E1F1FB;
background-image:url(gfx/navigationlinks/spacer_menuitems.gif);
background-repeat:repeat-y;
}
ul#Navigation li {
border-style:none;
border-width: 0px;
list-style: none;
margin:0 0 5px 0;
padding: 0 0 0 0;
}
ul#Navigation a {
display:block;
height:17px;
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding:0 0 0 20px;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="seite1.htm">Seite1</a></li>
<li><a href="seite2.htm">Seite2</a></li>
<li><a href="seite3.htm">Seite3</a></li>
<li><a href="seite4.htm">Seite4</a></li>
<li><a href="seite5.htm">Seite5</a></li>
<li><a href="seite6.htm">Seite6</a></li>
<li><a href="seite1.htm">Seite1</a></li>
<li><a href="seite2.htm">Seite2</a></li>
<li><a href="seite3.htm">Seite3</a></li>
<li><a href="seite4.htm">Seite4</a></li>
<li><a href="seite5.htm">Seite5</a></li>
<li><a href="seite6.htm">Seite6</a></li>
</ul>
</body>
</html>
-
Hi octewu!
Ich verstehe dein Problem nicht ganz. Trennlinien hast du keine angegeben und dein Beispiel sieht im IE wie im FF nahezu identisch aus.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Ich verstehe dein Problem nicht ganz. Trennlinien hast du keine angegeben und dein Beispiel sieht im IE wie im FF nahezu identisch aus.
Die Trennlinie steckt in der Hintergrund-Grafik 'gfx/navigationlinks/spacer_menuitems.gif', dort in den ersten 5 Pixeln (vertikal).
Im IE rutscht diese Linie immer von mal zu mal ein kleines Stückchen höher, nach dem 4. Link verschwindet die dann hinter den Links. Im Firefox ist die Linie immer schön zwischen den Links zu sehen.
Anders gesagt, ich möchte einfach zwischen meinen Links immer eine Grafik von 5 Pixeln einblenden, falls ich zu kompliziert denke und es eine elegantere Lösung gibt, bin ich gerne offen dafür.
-
Hallo octewu,
Im IE rutscht diese Linie immer von mal zu mal ein kleines Stückchen höher, nach dem 4. Link verschwindet die dann hinter den Links. Im Firefox ist die Linie immer schön zwischen den Links zu sehen.
Gib deinen Links doch mal
float:leftggf. mit einer passenden Weite, damit nie mehr als ein Link nebeneinander passt und nach jedem einzelnen umgebrochen wird.Gruß Gernot
-
Gib deinen Links doch mal
float:leftggf. mit einer passenden Weite, damit nie mehr als ein Link nebeneinander passt und nach jedem einzelnen umgebrochen wird.Super! Vielen Dank Gernot, genau das hatte noch gefehlt, jetzt wird richtig angezeigt. :-)
Ich verstehe nur noch nicht ganz warum ich float mit angeben muss, was wurde denn dann flasch dargestellt?? In einer neuen Zeile war ich doch zuvor auch schon!?
Diese kleinen Worte haben mich jetzt meinen halben Tag gekostet... -
Hab mich leider in bißchen früh gefreut:
Im IE ist mit
float:leftundwidth:200pxfür das li-Tag nun wunderbar, aber im FF sieht es so aus, als würde der background nach der ersten Zeile aufhören... Muss ich vielleicht noch ne Kleinigkeit beachten??-
Hi octewu!
Muss ich vielleicht noch ne Kleinigkeit beachten??
Ganz im Ernst: Du solltest dich erst einmal mit CSS auseinandersetzen.
Oder ließ dir wenigstens durch, was die jeweiligen Eigenschaften bewirken. Dann wüsstest du auch, warum der Firefox deine Angaben richtig interpretiert.
Gehe beim IE davon aus, dass er vieles falsch darstellt.MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Gehe beim IE davon aus, dass er vieles falsch darstellt.
War damit gemeint, dass es im Grunde genommen schon richtig war, aber der IE das float benötigt?
Ich hab jetzt einen Star-HTML-Hack eingebaut und somit kann ich es auf jeden Fall im IE und im Firefox betrachten.
* html ul#Navigation li { float:left; }Du solltest dich erst einmal mit CSS auseinandersetzen
Sorry, es ist nicht so, dass ich mich nicht damit auseingander gesetzt habe, aber wie heißt es so schön, aus Fehlern lernt man... Und dazu muss man eben erst mal Fehler machen...
Trotzdem Danke,
octewu
-
-
Hallo octewu,
Im IE ist mit
float:leftundwidth:200pxfür das li-Tag nun wunderbar, aber im FF sieht es so aus, als würde der background nach der ersten Zeile aufhören... Muss ich vielleicht noch ne Kleinigkeit beachten??Zur Not kannst du ja für den IE andere Angaben machen als für die ordentlichen Browser. CSS-Hacks sind jetzt wohl nicht mehr so in, da die im IE 7 vielleicht bald nicht mehr wirken, aber mit Conditional Comments kannst du immer arbeiten, wenn du nicht gerade auch noch den IE 5 am Mac bedienen willst.
Aber überprüf doch vorher mal, ob alle aufaddierten Menü-Item Höhenwerte (LI-Element + enthaltenes A-Element)
also:
height:17px; (des A-Elements)
+margin:0 0 5px 0; (des LI-Elements)
------------------------------------
gesamt: 22pxder Höhe deines Hintergrundbildes entsprechen.
Ich könnte mir auch denken, dass es vielleicht günstiger wäre, anstatt das Hintergrundbild vertikal-wiederholt dem UL-Element zuzuweisen, dies ohne Wiederholung in Bezug auf das LI- oder A-Element zu tun.
Gruß Gernot
-
Aber überprüf doch vorher mal, ob alle aufaddierten Menü-Item Höhenwerte (LI-Element + enthaltenes A-Element)
der Höhe deines Hintergrundbildes entsprechen.Hab ich immer wieder durchgerechnet, das passt.
Ich könnte mir auch denken, dass es vielleicht günstiger wäre, anstatt das Hintergrundbild vertikal-wiederholt dem UL-Element zuzuweisen, dies ohne Wiederholung in Bezug auf das LI- oder A-Element zu tun.
Das ist nun meine Lösung, die für die Ewigkeit gemacht ist, ich habe das background-image dem li-Tag zugewiesen und einmal mit no-repeat dem ul-Tag, damit ich an der ersten Stelle auch einen Strich habe.
ul#Navigation { border-style:none; border-width: 0px; padding:5px 0 5px 0; margin:0 0 0 0; width: 201px; background-color: #E1F1FB; background-image:url(gfx/navigationlinks/spacer_menuitems.gif); background-repeat:no-repeat; } ul#Navigation li { background-image:url(gfx/navigationlinks/spacer_menuitems5.gif); border-style:none; border-width: 0px; list-style: none; margin:0 0 0 0; padding: 0 0 5px 0; width:201px; }Vielen Dank für die Hilfe,
jetzt habe ich eine saubere Lösung, die überall funktioniert und kann ich mich beruhigt ins Bett legen. ;-) Gute Nacht
-
-
-
-
-