Hallo,
ich habe mich in den letzten Tagen mit diesem Artikel beschäftigt. Meine Seite funktioniert auch so wie ich dies möchte allerdings nur im Firefox! Da ich mich noch nicht so gut mit den Eigenarten der Browsers auskenne, wollte ich in diesem hilfsbereiten Forum fragen, welche Änderungen ich vornehmen muss um die Seite IE-fähig zu machen.
Hier der Code der Seite:
Hier der Css:
Und hier das javascript:
Hoffe auf schnelle hilfreiche Tipps,
mit freundlichen Grüßen Jeff
ich habe mich in den letzten Tagen mit diesem Artikel beschäftigt. Meine Seite funktioniert auch so wie ich dies möchte allerdings nur im Firefox! Da ich mich noch nicht so gut mit den Eigenarten der Browsers auskenne, wollte ich in diesem hilfsbereiten Forum fragen, welche Änderungen ich vornehmen muss um die Seite IE-fähig zu machen.
Hier der Code der Seite:
Code:
<html>
<head>
<link rel="shortcut icon" href="http://www.thestyleworks.de/big-red.ico" /><meta name="robots" content="noindex,nofollow" />
<link rel="Stylesheet" type="text/css" href="style.css" />
<script language="JavaScript" src="ieHover.js"></script>
</head>
<body contentEditable="false">
<div class="box">
<div class="header"></div>
<div class="menu">
<div class="topnav">
<ul id="nav">
<li class="on"><a class="cat" href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul></li>
<li class="off"><a class="cat" href="#">Art Nouveau</a>
<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul></li>
<li class="off"><a class="cat" href="#">Modern</a>
<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul></li>
<li class="off"><a class="cat" href="#">Postmodern</a>
<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul></li>
</ul>
</div>
</div>
<div class="content">HAHAHHAHA</div>
</div>
</body>
</html>
Code:
body {
background:#1B1B1B;
}
div.box
{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
background:#000;
border:1px solid white;
display:table;
min-height:1000px;
}
div.header
{
height: 90px;
background-color:#000;
border-bottom:1px solid #fff;
padding:6px;
}
div.conent {
height:500px;
}
div.menu {
height:57px;
border-bottom:1px solid #fff;
background:#000;
}
div.topnav {
/* Kategorieleiste */
height:28px;
background-color:#666;
border-bottom:1px solid #000;
}
#nav {
position:relative;
margin: 0;
padding: 0;
}
#nav li.on ul, #nav li.off ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
/* Abstand nach oben */
margin-top:3px;
float: left;
display: block;
/* Linker Abstand zum vorherigem Element */
padding-left: 50px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 29px;
*top: 40px;
left: 5px;
padding-top: 2px;
/* Farbe des Untermenüs (dient zum verstecken von #nav li.on ul) */
background: #000;
/* Höhe des Untermenüs */
height: 26px;
width: 820px;
}
/* Kategorie-Link */
#nav li a.cat {
/* Farbe der Kategorie */
color: #fff;
text-align:center;
font-weight: bold;
display: block;
height: 15px;
width: 110px;
padding: 5px;
border-bottom:1px solid #000;
background-image:url("bg.png");
}
/* Kategorie-Link der Klasse on */
#nav li.on a.cat {
background:url("bgon.png");
}
/* Untermenü-Links */
#nav li.on ul a, #nav li.off ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #AE2505;
font-weight:bold;
font-family:Arial;
font-size:14px;
width: auto;
margin-left:5px;
margin-right: 30px;
}
#nav li ul li {
padding:0px;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a.cat:hover, #nav li:hover a.cat, #nav li.over a.cat {
background: url("bghover.png");
color: #FED9CF;
}
#nav li ul a:hover {
/* Farbe beim OnMouseOver eines Links */
background: #000;
color: white;
}
Code:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;mit freundlichen Grüßen Jeff
