nicht angemeldet
CSS-Design mit verschachtelten Blockelementen
Hallo Leute,
ich bräuchte mal wieder Rat (siehe Beispielseite) -->
<!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>Testseite</title>
<style>
div#background {
position: relative;
margin: 100px auto 0 auto;
border: solid black 1px;
background: blue;
width: 500px;
height: 200px;
}
div#left {
float: left;
background: green;
width: 150px;
}
div#middle {
float: left;
background: red;
width: 350px;
}
</style>
</head>
<body>
<div id="background">
<div id="left">
Menüleiste
</div>
<div id="middle">
Contentzeile 1<br>
Contentzeile 2<br>
Contentzeile 3
</div>
</div>
</body>
</html>
=============================================================
Folgendes Vorhaben: Ich verwende ein Blockelement (id=background) irgendwo im Flow einer Seite. In diesem Block geschachtelt sind zwei Floats, die sich links ausrichten. Der erste (left) soll den Menübereich darstellen, der zweite (middle) den Contentbereich. Wenn in einer der beiden Bereiche Elemente hinzugefügt werden, sollen alle Blöcke incl. dem Hintergrund auf die gleiche Höhe gezogen werden. Ich dachte also, dass der left und der background-Block mit dem Content-Block mitwachsen, aber dem ist nicht so, wie man sieht. Wenn man im Beispiel die height-Angabe im background-Block wegnimmt wird es noch deutlicher.
Ich habe vorher versucht die beiden inneren Blöcke (left, middle) absolut zum backround zu positionieren. Hat mich aber auch nicht weiter gebracht. Weiß jemand Rat ? Wie muss ich sowas aufbauen ?
Ich möchte keine Tabelle zum layouten verwenden. Kann mir nicht vorstellen, dass sowas nicht möglich ist ...
-
Hallo Marky,
ich würde darauf hinweisen, dass du mit einem float jedes element aus dem seitenfluss nimmst. Also reagieren deine anderen spalten nicht auf den Zuwachs. Sie ignorieren dass und lassen es links - floaten eben.
Die Lösung nach meinem beschränkten Horizont:
1_ entweder alles floaten oder , noch besser,
2_ hier schlau werden
http://www.positioniseverything.net/articles/onetruelayout/Grüße!
Claus-
Hallo Claus,
Die Lösung nach meinem beschränkten Horizont:
nicht so bescheiden ... ;-)
1_ entweder alles floaten oder , noch besser,
das klappt nicht ... auch nicht vom Design-Standpunkt her, denn ich muss den äußeren Block mittig im Browser positionieren ...
2_ hier schlau werden
http://www.positioniseverything.net/articles/onetruelayout/Der Hinweis war sehr gut !!!
Da wird das Thema behandelt. Ich sehe mich aber schon übel hacken ... aber wenn's Erfolf bringt. Wenn schn CSS-Design, dann richtig.Besten Dank nochmal !!!
Gruß
Marky
-