hat leider nicht geholfen..
hier mal meine HTML-Datei:
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>Test</title>
<link rel="stylesheet" type="text/css" href="css/standard.css"/>
</head>
<body>
<div id="seite">
<div id="header">
<h1>Header</h1>
</div>
<img style="float:left;" src="bilder/logo1.png" alt="logo1"/>
<img style="float:right" src="bilder/logo2.png" alt="logo1"/>
<div id="menu">
<ul>
<li><a style="background-color:#fff; color:#f00;" class="direkt" href="#">Link</a></li>
</ul>
<ul>
<li><a class="direkt" href="#">Link</a></li>
</ul>
<ul>
<li><h3>Link</h3>
<ul style="padding-left:30px;">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<ul>
<li><h3>Link</h3>
<ul style="padding-left:30px;">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</div>
<div id="inhalt">
<h2>Inhalt</h2><br/>
</div>
</div>
</body>
</html>
Alles anzeigen
und hier die dazugehörige CSS-Datei (hab nur die entscheidenden Einträge reinkopiert)
Code
/*--Seite--*/
* {
margin: 0;
padding: 0;
font-family:Verdana;
}
body {
background-color:#808080;
}
#seite {
margin-left:auto;
margin-right:auto;
width:837px;
background-color:#eee;
}
#header {
float:left;
padding:14px 0px 0px 15px;
width:563px;
line-height:0.2;
background-color:#fff;
min-height:107px;
}
#inhalt {
color:#f00;
padding:60px 11px 15px 70px;
font: 13px Verdana;
min-height:550px;
clear:left;
}
/*--Navigation--*/
#menu {
float: left;
/*position:relative; top:1px;*/ /*--Versatz-Ausgleich von Menü-Balken und Grafik für Internet Explorer und Firefox--*/
width:646px;
background-color:#f00;
border:0;
font:12px Verdana;
cursor:default;
}
#menu ul {
float: left;
width: 92px;
list-style-type: none;
}
/*--Überschriften--*/
#menu h3 {
background-color: #f00;
border: 1px solid #f00;
font:bold 12px Verdana;
color: #fff;
text-align: center;
padding:3px;
}
Alles anzeigen
noch ein paar Erläuterungen: also zuerst kommt links oben ein div-Container als eigentlicher Header. Recht daneben folgt dann die Grafik, die ich teilen musste, da die Grafik zwei verschiedene Höhen hat (Menü wird durch die Höhe der ersten Grafik vertikal positioniert). Unter dem Header und unter der ersten Grafik folgt dann das horizontale Menü, das eigentlich mit der zweiten Grafik eben abschließen soll. Hab auch mal ein Foto angehängt, da das alles irgendwie schwer zu erklären ist^^