zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei CSS Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.01.2011, 15:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2011
Beiträge: 5
trimalchio befindet sich auf einem aufstrebenden Ast
Standard Hilfe bei CSS Navigation

Hallo,

ich habe mich gestern mal mit css beschäftigt und eine Navigation für eine neue Homepage erstellt.

Leider sind im Quellcode noch 2 Fehler, die ich im Moment nicht beheben kann.

Könnt Ihr mir bitte weiterhelfen?

Problem 1:
Firefox zeigt die Navi vollständig an. Der Internet Explorer zeigt den Hintergrund der Navigation nicht an! Woran liegt das?

Problem 2:
Ich hätte gerne, dass der Rollover-Effekt, den ich bei den Unterpunkten des Menüs implementiert habe, dauerhaft bei dem entsprechend übergeordneten Menüpunkt angezeigt bekomme! Wie mache ich das?

hier der bisherige HTML und CSS Code!

Ich freue mich auf eure Antworten.

Danke und Grüße

trimi

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>

<body>
<div class="menu">

<ul>
<li><a href="#">Test<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="#">Test 1</a></li>
	<li><a href="#" title="#">Test 2</a></li>
	<li><a href="#" title="#">Test 3</a></li>

	<li><a href="#" title="#">Test 4</a></li>
	<li><a class="drop" href="#" title="#">Test 5 ►<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#" title="#">Test 6</a></li>
			<li><a href="#" title="#">Test 7</a></li>
			<li><a href="#">Test 8 »<!--[if IE 7]><!--></a><!--<![endif]-->

			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="#">Test 8</a></li>
					<li><a href="#">Test 9</a></li>
					<li><a href="#">Test 10</a></li>
					<li><a href="#">Test 11</a></li>
				</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#" title="#">Test 12</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="upone"><a href="#" title="#">Test 13</a></li>
	<li><a href="#" title="#">Test 14</a></li>

	<li><a href="#" title="#">Test 15</a></li>
	<li><a href="#" title="#">Test 16</a></li>
	<li><a href="#" title="#">Test 17</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Test 18<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul>
	<li><a href="#" title="#">Test 19</a></li>
	<li><a href="#" title="#">Test 20</a></li>
	<li><a href="#" title="#">Test 21</a></li>
	<li><a href="#" title="#">Test 22</a></li>
	<li><a href="#" title="#">Test 23</a></li>

	<li><a href="#" title="#">Test 24</a></li>
	<li><a href="#" title="#">Test 25</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Test 26<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="#">Test 27</a></li>

	<li><a href="#" title="#">Test 28</a></li>
	<li><a href="#" title="#">Test 29</a></li>
	<li><a href="#" title="#">Test 30</a></li>
	<li><a href="#" title="#">Test 31</a></li>
	<li><a href="#" title="#">Test 32</a></li>
	<li><a href="#" title="#">Test 33</a></li>

	<li><a href="#" title="#">Test 34</a></li>
	<li><a href="#" title="#">Test 35</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Test 36<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="#">Test 37</a></li>

	<li><a href="#" title="#">Test 38</a></li>
	<li><a href="#" title="#">Test 39</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Test 40<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="#">Test 41</a></li>

	<li><a href="#" title="#">Test 42</a></li>
	<li><a href="#" title="#">Test 43</a></li> 
	<li><a href="#" title="#">Test 44</a></li>
	<li><a class="drop" href="#" title="#">Test 45<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="left">
			<li><a href="#" title="#">Test 46</a></li>

			<li><a href="#" title="#">Test 47</a></li>
			<li><a href="#" title="#">Test 48</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

</body>
</html>

Code:
@charset "utf-8";
/* CSS Document */

/* style the outer div to give it width */
.menu {
width:750px;
font-family: Arial, Helvetica, sans-serif;  
font-size:0.85em;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
background: url(test5.jpg) repeat-x;
color: #6E6E6E; 
width:139px; 
height:25px; 
border-right:1px solid #fff; 
border-width:1px 1px 0 0; 
padding-left:10px; 
line-height:29px;
font-weight: bold;
border-bottom: 2px solid #104279;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#ec7404;
border-bottom: 1px solid #fff;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background: url(weiss_hover.gif) repeat-x;
}
.menu ul ul :hover > a.drop {
color:#fff;
background: url(weiss_hover.gif) repeat-x;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#ec7404;
}
/* style the third level hover */
.menu ul ul ul a:hover {
color:#fff;
background: url(weiss_hover.gif) repeat-x;
}
.menu ul ul ul :hover > a {
color:#fff;
background: url(weiss_hover.gif) repeat-x;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:26px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#ec7404;
color:#fff; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px;
border-bottom: 1px solid #fff;
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background: url(weiss_hover2.gif) repeat-x;
border-bottom: 1px solid #fff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background: url(weiss_hover.gif) repeat-x;
border-bottom: 1px solid #fff;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

Geändert von trimalchio (09.01.2011 um 17:11 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.01.2011, 19:16
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Stell ein Testbeispiel online. Da niemand deine Grafiken hat, ist es dann einfacher.
Zitat:
.menu
{
font-family: Arial, Helvetica, sans-serif;
width:9800px;
...
Das ist ein Schreibfehler, oder?

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2011, 17:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2011
Beiträge: 5
trimalchio befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich habe jetzt meine aktuelle Navigation mal hochgeladen.

Ihr findet sie unter Entwurf.

Mein Problem ist nun, dass es nur unter Firefox funktioniert, bei IE fehlt mir der Hintergund! Woran könnte das liegen?

Meine zweite Frage ist, ob man die das kleine Dreieck, welches ich im linken dropdpown Menu anzeigen lasse, per css rechtsbündig machen kann?

Besten Dank schon mal im Voraus!
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2011, 00:48
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Vielleicht ist das Bild kaputt. Ich kann das Bild http://trimalchio.tr.funpic.de/test5.jpg im aktuellen IE nicht sehen.
__________________
MfG
Jens

Geändert von plastiko (10.01.2011 um 00:52 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 10.01.2011, 12:17
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
Vielleicht ist das Bild kaputt. Ich kann das Bild http://trimalchio.tr.funpic.de/test5.jpg im aktuellen IE nicht sehen.
IE ist auch scheiße

Sry, aber egal was die im 9er fixen, die kriegen ihr Image trotzdem erstmal nicht weg....

Im aktuellen FF wird es angezeigt, also nicht zu unrecht dieses Image ...

Zu dem Problem des TE.
Warum benutzt du diese tausende (if IE) etc. ? Das macht alles nicht einfacher. Der IE sollte Dinge wie li und ul auch in der 6er Version drauf haben.

Dieser Versuch auf Tabellen im IE6 umzusteigen halte ich für quark....


Gruß
Mit Zitat antworten
  #6 (permalink)  
Alt 10.01.2011, 12:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

zeji, die CCs mit Tabellen sind eine Methode, ein Klappmenü auch im IE6 scriptfrei zum Laufen zu bekommen; viele Beispiele dafür kannst du bei Stu Nicholls studieren.
"Quark" ist das sicher nicht -- nur alles andere als einfach.

trimalchio, du verwendest eine Variante von Stus Menü, die vor Erscheinen des IE8 entwickelt wurde. Schau dir bitte die CCs in aktuelleren Versionen des Menüs an.
Das Bild, das nicht angezeigt wird, ist in CMYK-Farben; fürs Web denkbar ungeeignet. Verwende "Fürs Web speichern" in deinem Photoshop, dann passiert sowas nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.01.2011, 13:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2011
Beiträge: 5
trimalchio befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

vielen Dank für eure Antworten!

Ich hab das Bild Background Image nun als .gif abgespeichert und siehe da, nun funktioniert es auch im IE.

Könnt ihr evtl. noch helfen, wie ich den verwendeten Pfeil (Dreieck in linker Menüspalte) rechtsbündig mache?

Danke

Mfg trimi
Mit Zitat antworten
  #8 (permalink)  
Alt 10.01.2011, 14:13
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Ich würde den Pfeil als Hintergrundbild laufen lassen.
Falls das mit dem bisherigen Konstrukt nicht vereinbar ist, könnte man einen zusätzlichen Container in <a> erzeugen und dort das Hintergrundbild, sowie Textinhalt platzieren.
Einfacher wäre es, dem jeweiligen Menüpunkt eben eine Grafik mit Pfeil zu geben.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
Antwort

Stichwörter
navigation

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
Navigation per CSS dedi02 CSS 1 09.05.2009 05:37
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
Hilfe bei CSS Design jochen35 CSS 3 30.10.2006 17:54
Aufklappbare Navigation mit CSS webnet CSS 7 20.09.2006 22:45
Css Navigation Adenauer CSS 2 09.02.2006 00:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:38 Uhr.