nicht angemeldet
Positionierung mehrerer DIVs mit automatischer Größenanpassung
apselHallo 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
-
Om nah hoo pez nyeetz,
es sind ein paar zu viele floats und zu wenige clears.
Schau dir mal Gunnars Artikel an, er könnte dir weiter helfen.
Matthias
--
-
Danke für Deine Antwort,
allerdings weiß ich nicht, ob mir der Artikel wirklich weiterhelfen kann.
Mittels der display: inline-block Methode scheint es dann möglich zu sein, dynamisch je nach Platzangebot die Anzahl der Spalten pro Zeile anzupassen.Das möchte ich in meinem Fall ja jedoch gar nicht, die Verteilung der Zeilen/Spalten soll ja unabhängig von der Bildschirmgröße 3x3 betragen.
Von der Bildschirmgröße soll lediglich die Größe der 8 äußeren DIV Bereiche abhängen, da nur der Center DIV eine feste Größenangabe besitzt.
An welcher Stelle sind Deiner Meinung nach zu viele floats und wo fehlen clears?
So wie ich es sehe, ist es genauso aufgebaut wie in dem Beispiel in dem von Dir verlinkten Artikel (die erste Variante mit den floats).
Jedes DIV bekommt ein float:left und jedes erste DIV einer Zeile ein clear.Vielleicht ist die Anforderung die ich habe ja auch gar nicht umsetzbar... zumindest ich weiß zur Zeit nicht, wie man es umsetzen könnte... wobei das nichts heißen mag ;)
Wäre sehr dankbar wenn Du oder noch jemand anderes weitere Ideen hätte - Danke
preachie
-
Nur nochmal als Beispiel wie es aussehen soll, so würde ich das ganze mittels Tabellen lösen, aber Tabellen sind ja angeblich "böse" :)
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-s3.css" /> </head> <body> <table class="mainTable"> <tr> <td class="tl">TL</td> <td class="tc">TC</td> <td class="tr">TR</td> </tr> <tr> <td class="ml">ML</td> <td class="mc">MC</td> <td class="mr">MR</td> </tr> <tr> <td class="bl">BL</td> <td class="bc">BC</td> <td class="br">BR</td> </tr> </table> </body> </html>CSS:
html { height: 100%; } body { margin: 0px; padding: 0px; background-color: black; width: 100%; height: 100%; } table.mainTable { width: 100%; height: 100%; padding: 0px; margin: 0px; border-spacing: 0px; } td.tl { background-color: red; } td.tc { background-color: green; width: 1000px; } td.tr { background-color: blue; } td.ml { background-color: yellow; height: 600px; } td.mc { background-color: white; width: 1000px; height: 600px; } td.mr { background-color: aqua; height: 600px; } td.bl { background-color: maroon; } td.bc { background-color: purple; width: 1000px; } td.br { background-color: silver; }-
Om nah hoo pez nyeetz,
wenn du darauf verzichten kannst, das mittlere div in konstanter Größe zu machen, könntest du die divs absolut positionieren und jedes div mit top, left, width und height an die richtige Stelle bringen.
Matthias
--
-
-
-