Navigationsleiste + kleines Bild im IE verschoben

iVx · #1 (**permalink**) 08.09.2007, 12:03

Hallo an alle,

ich bin neu hier und auch noch relativ neu in CSS und HTML. Habe mir aber schon einige Bücher durchgelesen und soweit klappt auch alles, bis auf eine kleine Sache:

Habe eine kleine Navigation gemacht. Die soweit auch funktioniert. Wenn ich
jetzt allerdings einen kleinen Pfeil einbauen will, verschiebt sich das alles
nach oben. Im Firefox bleibt es normal:

Habt ihr eine Idee, woran das liegt?

kadees · #2 (**permalink**) 08.09.2007, 17:44

Hi,
lies mal die FaQ!
Ohne Code wird dir hier niemand helfen (können).

iVx · #3 (**permalink**) 08.09.2007, 18:14

Sorry, habe ich nicht gelesen, obwohl Neulinge das eigentlich tun sollten, sorry!

Also hier CSS:

Code:

.menu {
width : 750px;
font-size : 0.85em;
padding-bottom : 200px;
}
.menu ul {
padding : 0;
margin : 0;
list-style-type : none;
}
.menu ul ul {
width : 150px;
}
.menu li {
float : left;
width : 150px;
position : relative;
}
.menu a, .menu a:visited {
display : block;
font-size : 11px;
text-decoration : none;
color : #fff;
width : 139px;
height : 30px;
border : 1px solid #fff;
border-width : 1px 1px 0 0;
background : #758279;
padding-left : 10px;
line-height : 29px;
}
* html .menu a, * html .menu a:visited {
width : 150px;
width : 139px;
}
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background : #949e7c;
}
.menu ul ul a.drop:hover {
background : #c9ba65;
}
.menu ul ul :hover > a.drop {
background : #c9ba65;
}
.menu ul ul ul a, .menu ul ul ul a:visited {
background : #e2dfa8;
}
.menu ul ul ul a:hover {
background : #b2ab9b;
}
.menu ul ul ul :hover > a {
background : #b2ab9b;
}
.menu ul ul {
visibility : hidden;
position : absolute;
height : 0;
top : 31px;
left : 0;
width : 150px;
}
* html .menu ul ul {
top : 30px;
top : 31px;
}
.menu ul ul ul {
left : 150px;
top : 0;
width : 150px;
}
.menu ul ul ul.left {
left : -150px;
}
.menu table {
position : absolute;
top : 0;
left : 0;
}
.menu ul ul a, .menu ul ul a:visited {
background : #d4d8bd;
color : #000;
height : auto;
line-height : 1em;
padding : 5px 10px;
width : 129px;
}
* html .menu ul ul a {
width : 150px;
width : 129px;
}
.menu a:hover, .menu ul ul a:hover {
color : #fff;
background : #949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color : #fff;
background : #949e7c;
}
.menu ul li:hover ul, .menu ul a:hover ul {
visibility : visible;
}
.menu ul :hover ul ul {
visibility : hidden;
}
.menu ul :hover ul :hover ul ul {
visibility : hidden;
}
.menu ul :hover ul :hover ul {
visibility : visible;
}
.menu ul :hover ul :hover ul :hover ul {
visibility : visible;
}

Und hier der HTML Teil:

Code:

<ul>
<li><a href="/">startseite<img src="img/arrowright.png" alt="" /><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->	
</li>
</ul>

Der Fehler wiederholt sich ja bei allen li's.

Hoffe, mir kann jetzt jemand helfen...

Dankeschön!

kadees · #4 (**permalink**) 08.09.2007, 18:29

Grundsätzlich:
das Bild gehört nicht ins Markup!
Nimm es als Hintergrund für den Link und setze - entsprechend der Bildgröße - ein 'padding-right', damit der Linktext nicht über die Hintergrundgrafik läuft.

iVx · #5 (**permalink**) 08.09.2007, 18:53

Naja, das geht aber nicht so einfach, weil bei jedem li ein andere Pfeil angezeigt werden soll, wenn es noch ein Untermenü gibt.
Ich kann ja nur einmal eine Hintergrundgrafik einbinden oben im CSS Menü, die dann für alle li's eingebunden wird - was ich aber gar nicht will, da es 2 verschiedene Pfeile gibt.

heiko_rs · #6 (**permalink**) 08.09.2007, 19:40

Das ist alles kein Problem - setze den Nachfahrenselektor ein und ggf. Klassen bzw. IDs.

dexter · #7 (**permalink**) 08.09.2007, 19:46

Zitat:

Zitat von iVx

Naja, das geht aber nicht so einfach, weil bei jedem li ein andere Pfeil angezeigt werden soll, wenn es noch ein Untermenü gibt.

Das ist unproblematisch, da Du ja via CSS die Untermenüs selektieren kannst (vorausgesetzt, es ist vernünftig gemacht)
Etwa:
li {background:grafik1.png}
li ul li {background:grafik2.png}
Um Genaueres sagen zu können, wäre es hilfreich, etwas mehr von Deinem gewünschten Menü zu sehen, aus Deiner Erklärung werde ich nicht ganz schlau.

Hier (links mal im Menü rumklickern) kannst Du Dir anschauen, wie so etwas ungefähr funktionieren kann: CMS Made Simple Site - CMSMS tags in the templates

Dieses "crossbrowser"-wackelmenü, was Du da hast, finde ich übrigens nicht nur für Anfänger zum Kotzen.

iVx · #8 (**permalink**) 08.09.2007, 23:52

Naja, dieses "Wackelmenü" stammt immerhin von einer hier in der faq empfohlenen Seite.

Also ich kriege das nicht so richtig hin mit den Klassen.

Das ist der Menü Code - CSS wie oben.

Code:

<ul><li><a href="/">startseite<img src="img/arrowright.png" alt="" /><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->	
</li>

<li><a href="/lang/">sprachen<img src="img/arrowdown.png" alt="" /><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="/fr/"><img src="img/arrowright.png" alt="" />francais</a></li>
	<li><a href="/es/"><img src="img/arrowright.png" alt=""  />espanol</a></li>
	<li><a href="/it/"><img src="img/arrowright.png" alt=""  />italiano</a></li>
	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Also, es gibt Links, die ein Untermenü haben (hier "sprachen"), deshalb soll da rechts neben dem Text ein Pfeil nach unten. Dann gibt es Links, die kein Untermenü haben (hier z.B. "startseite") hier soll rechts neben den Text ein Pfeil nach rechts.
Im Untermenü sollen die Punkte immer ein Pfeil links neben dem Text haben, der nach rechts zeigt. Deshalb hatte ich den Pfeil vorher eingefügt.

Wie kann ich das jetzt machen?
Habe versucht mit .menu ul li .arrowright auf "startseite" zugreifen zu können, hatte natürlich <li class="arrowright"> eingefügt, aber das hatte nicht funktioniert.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild über Bild	rafa	CSS	2	24.01.2010 18:46
Bild in der Navigationsleiste zentrieren	sumica	CSS	8	19.06.2009 11:53
Bild unter dynamischer Navigationsleiste floatet nicht nach? - Lücke	Schnatterinchen	CSS	7	08.07.2008 15:52
Ganz wichtige Frage!!! Kleines Bild links neber der URL?	Noir	(X)HTML	7	27.06.2008 12:29
Bild nach oben verschoben - oberer Teil fehlt aber	TBaDDadE	CSS	1	11.04.2005 10:53