nicht angemeldet
Hallo zusammen,
zu meiner "Entschuldigung", ich habe bislang immer Tabellen verwendet, um Elemente an der Seite anzuordnen, auch wenn dies nicht unbedingt 'best practice' ist. CSS habe ich lediglich für "kleinere Schönheitsoperationen" verwendet, jedoch nicht für Positionierungen.
In meinem neuesten Projekt möchte ich es jedoch einmal "richtig" machen und auch die Positionierung mittels CSS steuern.
Allerdings habe ich mir da wohl etwas zu viel vorgenommen, da ich bereits am Anfang feststecke ;)
Mal der Reihe nach, ich möchte 9 DIVs aufgeteilt in 3 Reihen und 3 Spalten anzeigen, wobei nur für das mittlere DIV eine feste Größenangabe besteht. Die drumrum liegenden DIVs sollen entsprechend der Bildschirmauflösung automatisch an die notwendige Größe angepasst werden, so dass insgesamt die 9 DIVs 100% Breite und 100% Höhe vom Bildschirm einnehmen.
Zudem das das mittlere DIV zentriert auf dem Bildschirm sein.
Wenn ich lediglich das mittlere DIV ausgeben möchte, bekomme ich das mehr oder weniger problemlos hin
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" />
<link rel="stylesheet" type="text/css" href="l-o-s2.css" />
</head>
<body>
<div class="middlecenter">
<span>MC</span>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: black;
width: 100%;
height: 100%;
}
div.middlecenter {
background-color: white;
position:absolute;
top:50%;
left:50%;
width:1000px;
height:600px;
margin-left:-500px;
margin-top:-300px;
}
Aber wie bekomme ich die anderen 8 DIVs drumherum?
Wenn ich folgenden Code versuche, schaffe ich es zwar die korrekte Anordnung zu erhalten, allerdings passend die Größen der 8 äußeren DIVs nicht:
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" />
<link rel="stylesheet" type="text/css" href="l-o-s.css" />
</head>
<body>
<div class="top">
<div class="topleft">
<span>TL</span>
</div>
<div class="topcenter">
<span>TC</span>
</div>
<div class="topright">
<span>TR</span>
</div>
</div>
<div class="middle">
<div class="middleleft">
<span>ML</span>
</div>
<div class="middlecenter">
<span>MC</span>
</div>
<div class="middleright">
<span>MR</span>
</div>
</div>
<div class="bottom">
<div class="bottomleft">
<span>BL</span>
</div>
<div class="bottomcenter">
<span>BC</span>
</div>
<div class="bottomright">
<span>BR</span>
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: black;
width: 100%;
height: 100%;
}
div.topleft {
background-color: red;
clear: both;
float: left;
}
div.topcenter {
background-color: green;
width: 1000px;
float: left;
}
div.topright {
background-color: blue;
float: left;
}
div.middleleft {
background-color: yellow;
height: 600px;
clear: both;
float: left;
}
div.middlecenter {
background-color: white;
width: 1000px;
height: 600px;
float: left;
}
div.middleright {
background-color: aqua;
height: 600px;
float: left;
}
div.bottomleft {
background-color: maroon;
clear: both;
float: left;
}
div.bottomcenter {
background-color: purple;
width: 1000px;
float: left;
}
div.bottomright {
background-color: silver;
float: left;
}
Aussehen sollte es ungefähr so Beispielbild
Kann mir bitte jemand den Stoß in die richtige Richtung geben, oder gar konkrete Beispiele?
Vielen Dank schon einmal im voraus!
Gruß
preachie
apsel