nicht angemeldet
Hallo zusammen
Ich habe da ein Problem mit der style.css.
Ich möchte, dass die Website so aufgebaut ist:
[IMG]http://img523.imageshack.us/img523/8606/cssht9.png[/IMG]
Also die Mindesthöhe für den content soll gleich hoch sein wie das Menü.
Es macht auch nichts, wenn die Hintergrundgrafik für den content sich wiederholt (für das ist sie auch gedacht...)...
Hier meine style.css:
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #31312f;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
width: 772px;
text-align: left;
background-color: #FFFFFF;
}
#header{
background-image: url(images/header.PNG);
height: 152px;
width: 772px;
left: 0px;
top: 0px;
}
#header p{
font-size: 35px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
margin-left: 35px;
font-family: "Arial", Courier;
margin-top: 8px;
}
#header h1{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
margin-left: 50px;
font-family: "Arial", Courier;
margin-top: 0px;
}
#news{
background-image: url(images/newsbg.PNG);
height: 105px;
width: 772px;
left: 0px;
top: 0px;
}
#news p{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;
font-family: "Arial", Courier;
}
#news h1{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;
font-family: "Arial", Courier;
}
#contentl{
background-image: url(images/contentlbg.PNG);
height: 509px;
width: 105px;
left: 0px;
top: 0px;
}
#contentl p{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #31312f;
text-decoration: none;
margin-left: 10px;
font-family: "Arial", Courier;
}
#contentl h1{
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #31312f;
text-decoration: none;
margin-left: 10px;
font-family: "Arial", Courier;
}
#contentl a{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #31312f;
text-decoration: yes;
margin-left: 10px;
font-family: "Arial", Courier;
}
#contentr{
background-image: url(images/contentrbg.PNG);
height: 509px;
width: 588px;
left: 0px;
top: 0px;
margin-left: 184px;
margin-top: -50px;
}
#contentr p{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #31312f;
text-decoration: none;
margin-left: 0px;
font-family: "Arial", Courier;
}
#contentr h1{
font-size: 15px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #31312f;
text-decoration: none;
margin-left: 0px;
font-family: "Arial", Courier;
}
#footer{
background-image: url(images/footerbg.PNG);
height: 24px;
width: 772px;
left: 0px;
top: 0px;
}
#footer p{
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #31312f;
text-decoration: none;
margin-left: 15px;
font-family: "Arial", Courier;
}
Und hier die dazugehörige index.htm:
<!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>
<title>..::Titel::..</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico">
</head>
<body>
<div id="central">
<div id="header">
<p><br>Titel</p>
<h1>Untertitel</h1>
</div>
<div id="news">
<h1><br>News</h1><p>29.06.08: blablabla...</p>
</div>
<div id="contentl">
<h1><br>Menü</h1><br><a href="film.htm">blabla</a>
<div id="contentr"><h1><center>Blablabla<br><br><br><br><img src="images/p2.png"></center></h1></div>
</div>
<div id="footer"><p>©2008 by Tobias Engel</p>
</div>
</div>
</body>
</html>
Die Lösung mit dem "contentr" margin-top=-50, also mit minus zu arbeiten ist nicht wirklich das was ich will...
Funktionieren würde es, aber ich habe immer noch den begrenzten Platz und wenn ich im Menü ein <br> mache, dann muss ich beim contentr wieder um 15pixel nach oben verschieben...
Ich hoffe jemand weiss hier eine Lösung...
Falls sich die Höhe beim content ändert, sollte dies sich beim menü auch tun, denn sonst würde dort der schwarze (oder fast schwarze) Hintergrund reinkommen...