nicht angemeldet
Hallo Alle zusammen,
Vorbemerkung:
Ich habe das Forum (und andere) mit diversen Begriffskombinationen nach meinem Problem dursucht - ich bin mir sicher irgendwo steht sowas wie mein Problem auch bereits - ich finde es nur nicht.
Daher hier mein Problem.
Ich habe ein in der Breite zentriertes Layout. Darin steht ein Div - der Wrapper in dem sich alle weiteren Inhalte befinden werden.
Aktuell sind dort 3 spalten (mittels float) wobei ein absolut positioniertes Logo das mit z-index 100 über allem stehen muss.
Die Spalten bekommen nun Inhalte und dehnen sich nach unten aus. Dabei passen sich auch die entsprechenden Boxen mit aus wie es sein soll.
Die einzige Box die sich nicht ausdehnt ist der Wrapper. Der ist nämlich fast nicht sichtbar.
Außerdem soll der Wrapper unten links und rechts jeweils noch eine abgerundete Ecke bekommen was ich aber auch nicht hinbekommen habe... naja eine Ecke schon mittels Hintergrundgrafik.
Ist es überhaupt möglich dass der "Wrapper" den in ihm liegenden Content erkennt und sich entsprechend komplett in der Höhe ausdehnt inkl. Hintergrundfarbe / Grafik und das browserübergreifend (von mir aus auch mit Conditional Comments und nem extra Stylesheet für den IE gte 5.
Hier mal der aktuelle Quelltext und die CSS Datei:
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/mipstyles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="logo">Logo</div>
<div id="header"> Header </div>
<div id="spalte-links">Spalte links </div>
<div id="spalte-mitte"> Spalte Mitte Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci </div>
<div id="spalte-rechts"> Spalte rechts </div>
</div>
</body>
</html>
CSS
body
{
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
font: normal 101%/120% Verdana, Helvetica, sans-serif;
background: #FFFFFF
}
#wrapper {
background: #E0E0E0;
text-align: left;
width: 900px;
overflow: visible;
height: auto;
margin: 0px auto;
position: relative;
border-top: none;
border-right: 30px solid #000000;
border-bottom: 30px solid #000000;
border-left: 30px solid #000000;
}
#logo {
background: #003399;
height: 150px;
width: 100px;
position: absolute;
z-index: 101;
top: 0px;
right: 50px;
}
#header {
background: #999999;
clear: both;
height: 40px;
width: 900px;
}
#spalte-links {
width:220px;
padding:0px;
float:left;
background: #00FFFF;
height: auto;
color: #000000;
}
#spalte-mitte {
width:438px;
padding:20px 10px;
float:left;
background: #99FFFF;
height: auto;
color: #000000;
border: 1px solid #000000;
}
#spalte-rechts {
width:220px;
padding:0px;
float:left;
background: #FFFFCC;
height: auto;
color: #000000;
}
Danke im Voraus...
Gruß
Kethryl