Hallo Leute,
ich habe ein ähnliches Problem. Ich möchte gern ein Layout nach diesem Gerüst aufbauen:
http://www.fotos-hochladen.net/uploa...o5u4zykajp.jpg
Unter dem Logo soll noch ein dropdown menü eingefügt werden. Die zwei kleinen Bilder im Header sind Bilder die verlinkt werden soll. ich bekomme es nicht hin, das ich 3 container untereinander habe : (. Ich habe mir jetzt ein Grundgerüst nachgebaut, aber wenn ich versuche mehrere Container untereinander zu erstellen, sieht man nichts davon.
Die 3 unteren Kästchen sind Bilder, die aber nicht verlinkt werden und dann kommt noch der footer. Weiss jemand Rat? Wäre echt super lieb, muss heute noch vorankommen damit. Vielen Dank im voraus :)
Mein bisheriger code:
html:
Code:
<!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>
<link rel="stylesheet" href="design-style.css">
</head>
<body>
<div id="webseite">
test test
<div id="header">
<h1>Hallo Hallo</h1>
</div>
<div id="main">
<div id="menu">
</div>
<div id="inhalt">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
Code:
@charset "utf-8";
/* CSS Document */
body{
background-color:lightyellow;
text-align:center;
}
#webseite{
width:980px;
margin:0 auto;
}
#header{
width:980;
height:150px;
background:orange;
}
#header h1{
padding:50px;
font-size:60px;
font-weight:bold;
font-family:Courier;
}
#main{
width:980px;
}
#menu{
float:right;
width:200px;
height:300px;
background:yellow;
margin-top:10px;
margin-bottom: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;
}
#inhalt{
float:left;
width:770px;
height:300px;
background-color:darkred;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;
}
#footer{
width:980px;
height:30px;
background:orange;
border-radius:5px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;
margin-top:20px;
clear:both;
}