Ich habe gerade mein Menü in ein Layout eingebaut, aber leider verschiebt sich dieses immer nach rechts, ich weiß nicht woran das liegt, die Größe müsste eigtl. passen...
Hier ist der Code:
Ich hoffe mir kann jemand helfen.
Danke
Hier ist der Code:
HTML:
<!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>
<style type="text/css">
body {
background: #dce7ed;
}
#container {
width: 880px;
padding: 10px;
margin: 0 auto;
background: #fff;
border: 1px solid #000;
}
#container #header {
width: 98%;
height: 120px;
padding: 10px;
background: red;
margin-bottom: 10px;
}
.leftCol { /* linke Spalte */
width: 200px;
float: left;
background:red;
}
.rightCol { /* rechte Spalte */
width: 660px;
float: right;
background: red;
}
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#menu {
width: 190px;
margin:0;
background: green;
}
#menu ul {
margin: 0px 0px 10px 0px;
}
#menu ul li.main {
width: 180px;
height: 28px;
padding: 0px 0px 0px 10px;
line-height: 27px;
margin: 10px 0px 0px 0px;
color: #fff;
font-weight: bold;
background: #262626 url(../images/menu_main.gif) no-repeat;
border-bottom: 1px solid #d7e5ee;
overflow: hidden;
}
#menu ul li {
width: 190px;
height: 27px;
margin: 0px;
overflow: hidden;
}
#menu ul li a {
width: 183px;
height: 26px;
padding: 0px 0px 0px 10px;
line-height: 25px;
display: block;
margin: 0px;
overflow: hidden;
color: #353d3f;
text-decoration: none;
background: #fff;
border-bottom: 1px solid #d7e5ee;
}
#menu ul li a:hover, #menu ul li a.aktiv {
width: 183px;
height: 26px;
padding: 0px 0px 0px 10px;
line-height: 25px;
display: block;
margin: 0px;
overflow: hidden;
color: #353d3f;
text-decoration: none;
background: #cabb98 url(../images/menu_hover.gif) no-repeat;
border-bottom: 1px solid #d7e5ee;
}
</style>
<script type="text/javascript">
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.display == ''){
obj[id].style.display = 'none';
}
else {
obj[id].style.display = '';
}
}
</script>
</head>
<body>
<div id="container" class="clearfix">
<div id="header"></div>
<div class="leftCol">
<div id="menu">
<ul>
<li class="main" onclick="javascript:ShowHide('allgemein')">Allgemein</li>
<div id="allgemein" style="display:none;">
<li><a href="home.html">Startseite</a></li>
<li><a href="profil.html">Mein Profil</a></li>
<li><a href="gebliste.html">Geburtstagsliste</a></li>
<li><a href="login.html?action=logout" title="Logout">Ausloggen</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('privatkunden')">Privatkunden</li>
<div id="privatkunden" style="display:none;">
<li><a href="privatkunden_eintragen.html" title="Privatkunden eintragen" >Eintragen</a></li>
<li><a href="privatkunden_suchen.html" title="Privatkunden suchen" >Suchen</a></li>
<li><a href="privatkunden_upload.html" title="Privatkunden Datei hochladen">Datei upload</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('firmenkunden')">Firmenkunden</li>
<div id="firmenkunden" style="display:none;">
<li><a href="firmenkunden_eintragen.html" title="Firmenkunden eintragen" >Eintragen</a></li>
<li><a href="firmenkunden_suchen.html" title="Firmenkunden suchen" >Suchen</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('vertraege')">Verträge</li>
<div id="vertraege" style="display:none;">
<li><a href="vertraege_eintragen.html&kunde=p" title="Vertrag eingeben">Eintragen</a></li>
<li><a href="vertraege_suchen.html&kunde=p" title="Vertrag suchen">Suchen</a></li>
</div>
<li class="main">Administration</li>
<li><a href="einstellungen.html" title="Einstellungen" >Einstellungen</a></li>
<li><a href="gruppen.html" title="Gruppen" >Gruppen</a></li>
<li><a href="user.html" title="User" >User</a></li>
</ul>
</div>
</div>
<div class="rightCol">t</div>
</div>
</body>
</html>Danke
