nicht angemeldet
CSS-Ausklappnavigation
Hallo,
ich habe Mal wieder ein Problem mit der Anzeige eines Designs.
Laut W3 XHTML1.0 Strict und CSS valid :(
Und zwar klappt sich die Navigation beim IE nicht aus, die Versionsnummer kenne ich leider nicht, jedoch ist es auf jeden Fall 4 < ? < 7.
Das Layout:
<!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">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page">
<div id="uppernav">
<div class="subnav">
<span>Menü1</span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
<div class="subnav">
<span>Menü2</span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
<div class="subnav">
<span>Menü3</span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
<div class="subnav">
<span>Menü4</span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
<div class="subnav">
<span>Menü5</span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
</div>
<div id="header"></div>
<div id="content">blubb.</div>
<div id="lowernav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a></div>
<br />
<div id="copyright">copyright © 2007 by blubb</div>
</div>
</body>
</html>
Die CSS-Datei:
body
{
margin: 100px;
font-size: 12px;
font-family: Arial, sans-serif;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
div#page
{
width: 775px;
margin: auto;
padding: 0px;
}
div#header
{
clear: both;
height: 125px;
margin: 0px;
padding: 25px 0px 0px 0px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #393232;
background-color: #ffffff;
}
div#uppernav
{
margin: 0px;
padding: 0px;
position: absolute;
z-index: 2;
}
div.subnav
{
float: left;
width: 155px;
margin: 0px;
padding: 0px;
color: #ffffff;
background-color: #393232;
}
div.subnav span
{
cursor: pointer;
display: block;
margin: 0px;
padding: 5px;
}
div.subnav a
{
display: none;
margin: 0px;
padding: 5px;
color: #ffffff;
text-decoration: underline;
border-top: 1px solid #ffffff;
}
div.subnav a:hover
{
text-decoration: none;
}
div.subnav:hover a
{
display: block;
}
div#content
{
margin: 0px;
padding: 5px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #393232;
background: #ffffff;
color: #000000;
}
div#lowernav
{
margin: 0px;
padding: 5px;
color: #ffffff;
text-align: center;
background: #393232;
}
div#lowernav a
{
color: #ffffff;
text-decoration: underline;
}
div#lowernav a:hover
{
text-decoration: none;
}
div#copyright
{
text-align: center;
font-size: 10px;
color: #c0c0c0;
}
img
{
border: none;
}
Sorry, dass ich die Dateien zurzeit nirgends zum Anschauen bereitstellen kann.
Soweit ich weiß sind alle Attribute, auch "z-index" schon ab IE4 verfügbar.
Habt ihr eine Ahnung, woran das liegen mag?
Viele Grüße,
Philip
-
Hi Philip!
Und zwar klappt sich die Navigation beim IE nicht aus, die Versionsnummer kenne ich leider nicht, jedoch ist es auf jeden Fall 4 < ? < 7.
Das ist aber schon seit Jahren bekannt.
Der IE < 7 kann hover nur auf Links anwenden.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:)-
Hallo,
Das ist aber schon seit Jahren bekannt.
Der IE < 7 kann hover nur auf Links anwenden.alles klar, danke :)
Viele Grüße,
Philip -
Hallo,
gibt es eine andere Lösungsmöglichkeit als die folgende?
Scheint mir ein wenig unschön...Stylesheet wie oben, angefügt wurde:
div.subnav span a
{
display: block;
text-decoration: none;
margin: 0px;
padding: 5px;
border: none;
}Layout wie oben, umgeändert in den subnavs wurde:
<div class="subnav">
<span><a href="#">Menü1</a></span>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>Viele Grüße,
Philip-
Hi Philip!
gibt es eine andere Lösungsmöglichkeit als die folgende?
[...]Funktioniert in meinem IE 6 nicht.
Ist auch nicht mit HTML/CSS zu lösen.
Da muss mit Javascript nachgeholfen werden.http://de.selfhtml.org/css/layouts/navigationsleisten.htm
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:)-
hallo Hopsel,
Da muss mit Javascript nachgeholfen werden.
Nicht zwingend. Eine Alternative wäre es natürlich, das Ganze über einen EventHandler wie "onmouseover" oder "onclick" zu lösen, aber selbst dafür brauchst du nicht unbedingt auch noch eine ganze externe Javascriptfunktion. Schematisch geht das ungefähr so (ist allerdings ziemlich "ruckelhaft"):
<div id="div1" onclick="document.getElementById('div2').style.display='block'; this.style.display='none'">DIV1</div>
<div id="div2" onclick="document.getElementById('div1').style.display='block'; this.style.display='none'" style="display:none">DIV2</div>Grüße aus Berlin
Christoph S.
-
Hi Christoph!
Da muss mit Javascript nachgeholfen werden.
Du sagst:
Nicht zwingend.
und:
Eine Alternative wäre es natürlich, das Ganze über einen EventHandler wie "onmouseover" oder "onclick" zu lösen [...]
Ist das kein Javascript?
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:)
-
-
-
hallo,
gibt es eine andere Lösungsmöglichkeit als die folgende?
Vermutlich ja. Mach mal, um dich vorerst zu orientieren, aus "div.subnav a" ein "div.subnav a:link". Und erweitere
div.subnav a:hover
{
text-decoration: none;
}zu:
div.subnav a:hover
{
display: block;
color: #ffffff;
text-decoration: none;
}
Das "verschiebt" dir zwar zunächst ein bißchen was, aber du siehst wenigstens, wie du herangehen könntest. Und dann, wenn du dir über die Darstellung klar bist, verwendest du eben "conditional comments" und gibst darin vor, welche CSS für IE kleiner 7 berücksichtigt werden soll.Grüße aus Berlin
Christoph S.
-
-