Ich habe eine kleine Navigation gebastelt, wobei der Inhalt innerhalb einer Seite wechseln soll.
Dass ganze funktioniert im FF und IE 6+ 7. Nur der Opera 9.6.2 stellt sich "stur".
Hier mein HTML-Code:
- Code: Alles auswählen
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="opera_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Überschrift</h2>
<ul id="inavi">
<li><a href="#c1">eins</a></li>
<li><a href="#c2">zwei</a></li>
<li><a href="#c3">drei</a></li>
</ul>
<div id="icontainer">
<div class="icontent">
<a name="c1" id="c1"></a>
<p>Inhalt zu eins</p>
</div><!-- Ende c1 -->
<div class="icontent">
<a name="c2" id="c2"></a>
<p>Inhalt zu zwei</p>
</div><!-- ende c2 -->
<div class="icontent">
<a name="c3" id="c3"></a>
<p>Inhalt zu drei</p>
</div><!-- ende c3 -->
</div><!-- ende icontainer -->
</body>
</html>
CSS-Inhalt:
- Code: Alles auswählen
.icontent {
background: #FFF;
height: 35em;
padding: 20px;
}
#icontainer {
height: 35em;
overflow: hidden;
border: 1px solid #333;
}
#inavi {
margin: 0;
width: 210px;
float:left;
}
#inavi li {
list-style:none;
margin: 0;
padding: 0;
}
#inavi li a {
background: #ffffff;
color:#000000;
width: 180px;
height: 29px;
border: 1px solid #333;
padding: 10px 5px 0 10px;
margin-bottom: 20px;
display:block;
}
#inavi li a:hover, #inavi li a:focus, #inavi li a:active {
border-bottom: 1px solid #000000;
background-color:#c4ceb4; }
Was mache ich falsch ?
Gruß Joe
