zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigationsleiste + kleines Bild im IE verschoben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.09.2007, 12:03
iVx iVx ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 5
iVx befindet sich auf einem aufstrebenden Ast
Standard Navigationsleiste + kleines Bild im IE verschoben

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2007, 17:44
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

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

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2007, 18:14
iVx iVx ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 5
iVx befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #4 (permalink)  
Alt 08.09.2007, 18:29
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

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.
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2007, 18:53
iVx iVx ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 5
iVx befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2007, 19:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das ist alles kein Problem - setze den Nachfahrenselektor ein und ggf. Klassen bzw. IDs.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.09.2007, 19:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.05.2004
Beiträge: 275
dexter befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von iVx Beitrag anzeigen
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.
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern.

Geändert von dexter (08.09.2007 um 19:49 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.09.2007, 23:52
iVx iVx ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 5
iVx befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:36 Uhr.