|
Geschrieben am: 27.01.2012 um 17:34 Uhr
|
|
Hallo,
ich habe ein Problem im Bereich HTML und CSS ...
Folgendes:
Ich hab mir ein Drop Down Menü mit CSS und mit JS gemacht. Zudem habe ich einen Website-Container, einen Main-Container, einen Header-container und noch ein paar andere unwichtige.
Der Website-Container hat abgerundete ecken. Hier ist der HTML-Code:
Zitat: <!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">
<script type="text/javascript" src="/menue.js"></script>
</head>
<body>
<center><font color="white" size="20">Überschrift</font><p>
</center>
<div id="menu">
<!--Hier steht dann das CSS/JS Menü-->
</div>
<div id="website">
<div id="main">
<div id="header">
</div>
<div id="content">
<center><b><h1>Home</h1></b></center><p>
</div>
</div>
</div>
</body>
</html>
Und das hier ist der relevante CSS-Teil:
Zitat: #website {
width: 900px;
margin:auto;
background-color: white;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-o-border-radius: 13px;
}
#header {
width: 700px;
height: 150px;
margin: auto;
font-size: 60px;
background-color: blue;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
}
#main {
width: 900px;
margin:auto;
}
#menu {
width: 900px;
height: 50px;
margin: auto;
margin-top: 20px;
margin-bottom: 40px;
}
Das sind die beiden Codeschnipsel!
Jetzt mein Problem:
Der Header hängt jetzt oben direkt am Website-Container!
Ich bekomm keine Lücke dazwischen ...
Danke für die Antworten :)
Lach nie über jemanden, der einen Schritt zurück geht!! Er könnte Anlauf nehmen! -.-
|
[