Css navi problem IE 6 HILFE....

slave · #1 (**permalink**) 27.10.2007, 12:36

Hallo erst mal liebe gemeinde

bin noch nicht so fit was css angeht

also ich habe mir eine kleine navi gebaut in css, in allen aktuellen brauser funkt. diese nur in dem IE6 nicht WARUM ! ich krieg die kriese bitte helft mir !
hier der code !

wißt ihr ich will einfach nur das man mit der maus über einen link fährt
und das dann darunter ein erklärender text steht mehr nicht !
wie gesagt IE7 Firefox etc da funkt es nur IE6 nicht bitte helft mir

vielen dank

der doctype:

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">

die css:

Code:

#znavi { 
white-space:nowrap; 
    width:1px; 
    height:45px; 
} 

#znavi #hide1, #hide2, #hide3, #hide4, #hide5, #hide6 { 
display:none; 
/*visibility:hidden;*/ 

} 

#znavi:hover #hide1, #znavi:hover #hide2, #znavi:hover #hide3, #znavi:hover #hide4, #znavi:hover #hide5, #znavi:hover #hide6    { 
    display:block; 
    /*visibility:visible;*/ 
    width:400px; 
    font-family: Geneva, Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    color: #8A8A8A; 
    font-weight: bold; 
    font-style: italic; 
    height:45px; 
}

die boxen:

Code:

<div id="znavi" > 
<a href="grosse-zaubershow.php" class="navi">Große Zaubershow</a><br> 
<div id="hide1">Für Kinder von 8 bis 99 jahren</div> 
</div> 
<div id="znavi" style=" margin-left:45px;"> 
<a href="kinder-zaubershow.php" class="navi">Kinder Zaubershow</a> 
<div id="hide2">Für Kinder von 3 bis 10 jahren</div> 
</div> 
<div id="znavi" style=" margin-left:75px;"> 
<a href="weihnachtszauber.php" class="navi">Weihnachtszauber</a> 
<div id="hide3">Zauberhaftes zur Vorweihnachtszeit</div> 
</div> 
<div id="znavi" style=" margin-left:80px"> 
<a href="kinder-zaubershow-tagesaktion.php" class="navi">Kinder- Zaubershow als Tagesaktion</a> 
<div id="hide4">6 Stunden Non - Stop - Animation</div> 
</div> 
<div id="znavi" style=" margin-left:45px;"> 
<a href="luftballon-figuren.php" class="navi">Luftballon - Figuren</a> 
<div id="hide5">Zum Staunen und Mitmachen</div> 
</div> 
<div id="znavi"> 
<a href="gebaerdendolmetscher.php" class="navi">Geb&auml;rdendolmetscher</a> 
<div id="hide6">Für hörgeschädigte Kinder</div>

Crizzo · #2 (**permalink**) 27.10.2007, 13:00

SO (!) macht man das nicht.
Erst einmal muss die Navigation in eine Liste, da es eine Aufzählung ist.

Ungefähr so:

Code:

<ul id="navi">
<li><a href="grosse-zaubershow.php" class="navi">Große Zaubershow</a></li>
<li><a href="kinder-zaubershow.php" class="navi">Kinder Zaubershow</a> </li>
</ul>

Jetzt fügst du den Text ein, der beim "Über-den-Link-fahren" kurz "a:hover" angezeigt wird.

Code:

<ul>
<li>
<a href="grosse-zaubershow.php" class="navi">
<span>Für Kinder von 8 bis 99 Jahren.</span>
Große Zaubershow</a></li>
<li>
<a href="kinder-zaubershow.php" class="navi">
<span>Für Kinder von 3 bis 10 jahren</span>
Kinder Zaubershow</a> </li>
</ul>

Nun musst noch das Aussehen in CSS bestimmen und ganz wichtig den "span" verstecken, wenn man nicht über den Link fährt.
Sieht dann so in der CSS Datei aus:

Code:

ul#navi li a span {display:none;} /* Ohne "hover" ist "span" ausgeblendet */

ul#navi li a:hover span {display:block;
width: 400px;
} /* Bei "a:hover" wird es eingeblendet. */

Am einfachsten kannst du den "span" dann per position:absolute relativ zum Elternelement positionieren, dieses muss dann "position:relative" besitzen. Dazu mehr: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : POSITION }

slave · #3 (**permalink**) 27.10.2007, 16:57

hallo blackhawk
vielen dank erst mal für deine antwort
habe ich gleich ausprobiert aber leider habe ich das gleiche problem wie vorher
im IE6 funktioniert das nicht :O( in allen anderen ja
was ist falsch ich weiß nicht mehr weiter !!!

Crizzo · #4 (**permalink**) 27.10.2007, 20:05

Poste bitte genau DEINEN Code! Bei mir geht diese Version im IE5-7 einwandfrei.

slave · #5 (**permalink**) 27.10.2007, 21:44

super vielen dank das du mir helfen willst

, den ich weiß nicht weiter
könnte es vieleicht auch am doctype liegen ?
naja das überlaß ich wohl lieber einen profie
hier der code..

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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
ul#navi li a span {
display:none;
} /* Ohne "hover" ist "span" ausgeblendet */

ul#navi li a:hover span {
display:block;
	width: 400px;
} /* Bei "a:hover" wird es eingeblendet. */
-->
</style>
</head>

<body>

<ul id="navi">
<li>
<a href="grosse-zaubershow.php" class="navi">
<span>Für Kinder von 8 bis 99 Jahren.</span>
Große Zaubershow</a></li>
<li>
<a href="kinder-zaubershow.php" class="navi">
<span>Für Kinder von 3 bis 10 jahren</span>
Kinder Zaubershow</a> </li>
</ul>

</body>
</html>

Crizzo · #6 (**permalink**) 27.10.2007, 23:16

So geht es:

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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
ul#navi li a span {
display:none;
} /* Ohne "hover" ist "span" ausgeblendet */

ul#navi li a:hover span {
display:block;
width: 400px;
background:blue;
color:#FFF;
position:absolute;
left:300px;
z-index:99;} /* Bei "a:hover" wird es eingeblendet. */
-->
</style>
</head>

<body>

<ul id="navi">
<li>
<a href="grosse-zaubershow.php" >
<span>Für Kinder von 8 bis 99 Jahren.</span>
Große Zaubershow</a></li>
<li>
<a href="kinder-zaubershow.php">
<span>Für Kinder von 3 bis 10 jahren</span>
Kinder Zaubershow</a> </li>
</ul>

</body>
</html>

Du hast nur "class" mit "id" verwechselt.

"id" ist die "#" in der CSS-Datei, "class" der "." Und hier war es sogar überflüssig im Element "a".

Ansonsten hab ich noch eine Schriftfarbe und Hintergrundfarbe für den "span" bestimmt und ihn per "position:absolute" weiter rechts positioniert.
"z-index" bestimmt noch, dass der "span" immer über alle anderen Elementen liegt und so immer sichtbar bleibt. Solange du kein Element mit einem höheren "z-index" Wert bestimmst.

Edit: Eigentlich sollte es jetzt funktionieren, klappt bei mir doch auch.

Zum Beispiel hier: BlackHawk Zone >> Spiele >> Testberichte >> Company of Heroes bei den Bildern...

Edit2: Das gibts doch nicht, dass span-hovern funktioniert nicht. Aber bei meiner Seite gehts doch auch.

slave · #7 (**permalink**) 27.10.2007, 23:51

also entweder bin ich zu blöd

oder mein browser hat ne macke
im IE7 und firefox alles super nur im IE6 geht es nicht !

hattest es doch im IE6 getestet und es lief , nur bei mir nicht, komisch

ich habe mir multipleIEs runtergeladen damit kann mann sich die seiten in verschiedenen IE versionen ansehen ,
das merkwürdige ist, wenn ich deine seite mit dem IE6 aufrufe funkt es auch
oh mann ich weiß nicht mehr weiter !

vielen dank aber trotzdem

Crizzo · #8 (**permalink**) 27.10.2007, 23:54

Meine Seite geht im IE6 ohne Probleme, deine Testseite allerdings nicht. Momentan find ich den Fehler nicht, sry.

fricca · #9 (**permalink**) 28.10.2007, 11:41

Der IE braucht bestimmte Angaben für a:hover.
Pure CSS Popups Bug - IE Bug

slave · #10 (**permalink**) 28.10.2007, 13:07

hallo und vielen dank an euch
für die hilfe habe es jetzt auch rausgefunden !

hier der code und dieser funkt im IE6 - IE7

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--


ul#navi	{
	list-style-type: none;
}

ul#navi li a span {
display:none;
}

ul#navi li {
height:40px;
}


ul#navi a:hover {
	margin:0px;
	padding:0px;
	
}


ul#navi li a:hover span {
	margin-top:20px;
	display:block;
	width: 200px;
	position:absolute;
	text-decoration: none;
} 
-->
</style>
</head>

<body>

<ul id="navi">
<li><a href="grosse-zaubershow.php"><span>Für Kinder von 8 bis 99 Jahren.</span>Große Zaubershow</a></li>
<li><a href="kinder-zaubershow.php"><span>Für Kinder von 3 bis 10 jahren</span>Kinder Zaubershow</a></li>
</ul>

</body>
</html>

vielen dank nochmal ohne euch währe ich nicht darauf gekommen

DANKE DANKE DANKE

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
grafische Navigation horizontal zentrieren, klappt nicht	lila_3	CSS	4	30.11.2010 10:25
Problem Browserweiche IE CSS	00001	CSS	5	24.09.2010 10:23
CSS Greybox Problem - HILFE!	vsa	CSS	9	12.01.2010 20:33
Boxen von Navigation und Logo sind zu weit auseinander	lila_3	CSS	2	03.09.2009 23:28
Problem mit Layout- Totaler CSS Noob	meici	CSS	3	01.03.2008 16:33