div Strukturierung

zsoerenm · 25. Apr. 2007

Hallo zusammen

Ich hab ein Problem mit den divs.
Also ich möchte einen "Teilhintergrund" div erstellen, der die Farbe grau enthält.
Dieser ist mit position: absolute; sowie mit top:... positioniert.
Height hab ich jedoch nicht angegeben, denn der div soll sich automatisch bei mehr text vergrößern. Stattdessen verwende ich padding-top: 20px;
Nun sollen in diesen 3 weiter divs [2 links (einer oben der andere unten) und ein großen rechts.] Um das zu ermöglichen habe ich position:absolute verwendet, denn bei position: relative werden die divs untereinander angeordnet.
So nun mein problem: sobald ich bei den "inneren" divs position:absolute angeben (statt relative) erkennt der "Teilhintergrund" div diese drei divs nicht mehr als Inhalt an. Also der "Teilhintergrund" div hat nur eine größe von 20px --> durch padding-top: 20px; Bei relative sind die divs dadrin aber dies kann ich ja nicht verwenden.

Hier mein CSS ausschnitt

#teilhintergrund_div {
width:795px;
position:absolute;
top:295px;
background-color:#1a1a1a;
padding-top: 20px;
}
#oberer_linker_innerer_div {
width:222px;
position:absolute;
margin-top:25px;
margin-left:10px;
color:#ffffff;
background-color:#111111;
}
#unterer_linker_innerer_div {
width:202px;
color:#ffffff;
background-color:#111111;
position:absolute;
top:311px;
left:10px;
}
#rechter_innerer_div{
position:absolute;
margin-left:270px;
top:25px;
width:472px;
color:#ffffff;
background-color:#111111;
padding:20px;
}

Hier html:

<div id="teilhintergrund_div">
<div id="oberer_linker_innerer_div">Neues</div>
<div id="unterer_linker_innerer_div">Umfrage</div>
<div id="rechter_innerer_div">Inhalt</div>
</div>

Mein Ziel ist es dass die divs bei größerem Text anteil auch größer werden.

Wie kann ich das Problem lösen?
Gruß Sören

daWonderer · 25. Apr. 2007

zsoerenm schrieb:
Also der "Teilhintergrund" div hat nur eine größe von 20px --> durch padding-top: 20px;

Padding-Top gibt nur an wie groß der innere Abstand des Elementes zum Inhalt ist. Dadurch ist nicht gegeben wie groß das Element selbst ist.
Ich verstehe irgendwie nicht so richtig, wie die Darstellung am Ende aussehen soll. Der graue Balken (Teilhintergrund) soll 20px hoch sein und darunter sollen dann die DIVs kommen, 2 links untereinander und einer rechts?

Genauer: Hinter welchen DIVs soll der Hintergrund liegen und wie groß ist dieser?

MfG, Ralf...

zsoerenm · 26. Apr. 2007

nein der soll nicht! darunter oder darüber sein... sondern dadrin!!

...................................
..####..#########..
..####..#########..
..####..#########..
..####..#########..
.............#########..
..####..#########..
..####..#########..
..####..#########..
..####..#########..
...................................

... = Hintergrund (bzw Teilhintergrund)
## = innere Divs

So sollte es ungefähr aussehen.
In dem größeren inneren Div (rechts) kommt der Inhalt rein... da dieser durch texte und Bilder oft größer ist als "standart", soll dieser sich automatisch bei mehr text, bilder etc. vergrößern. Und somit auch der Hintergrund, denn der innere div soll ja nicht über den Hintergrund hinausgehen sondern dort drin bleiben.

Hoffe ihr versteht mich jetzt besser.
Danke schon mal für deine Hilfe.
Gruß Sören

daWonderer · 26. Apr. 2007

Versuch es mal damit:

HTML:

<html>
<body>
<div id='backColOrImg' style='position:absolute;left:50px;top:50px;padding:20px;background-color:lightgrey;'>
 <div id='left' style='float:left;border:1px solid red;padding:4px;'>
  <div id='leftTop' style='border:1px solid blue;width:50px;'>
  oberer linker DIV
  </div>
  <div id='leftBottom' style='border:1px solid green;width:50px;margin-top:10px;'>
  unterer linker DIV
  </div>
 </div>
 <div id='right' style='height:150px;border:1px solid magenta;margin-left:80px;'>
 rechter DIV<br>
 und<br>
 angenommen<br>
 mehr<br>
 Text<br>
 </div>
</div> 
</body>
</html>

Habe das Ganze mal etwas farbig gekennzeichnet, da sieht man die DIV-Aufteilung besser.

MfG, Ralf...

PS: Sorry, bekomme das nicht besser in das kleine Fenster, irgendwo fehlen da Umbrüche...

anna55 · 26. Apr. 2007

Sehe eben, daWonderer hat was gebaut. Hier ist nochwas, musst halt mal sehen, was Du gebrauchen kannst:

PHP:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de">
<head>
<title>Seite</title>

<style type="text/css">
body {text-align: left;
}

#gesamtinhalt {
	width: 750px;
	margin: 0 auto;
	background: #eee;
	display: table;
}

#hauptteil {
	float: left;
	width: 734;
	padding: 20px 7px 15px;
}

#kastenlinks {
	position: relative;
	top: -30px;
	width: 210px;
	float: left;
}

.abschnittlinks {
	width: 210px;
	float: left;
	margin-top: 10px;
	border: 0;
	color: #000000;
}

#kastenrechts {
	position: relative;
	top: -30px;
	margin-left: 8px;
	width: 510px;
	float: left;
}
</style>

</head>

<body>

<div id="gesamtinhalt">
         <div id="hauptteil">

	     <div id="kastenlinks">
	
		<div class="abschnittlinks">
			
		</div>
		<p>Weit hinten, hinter den Wortbergen, fern der Länder 
Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in
 Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. 
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den 
nötigen Regelialien.</p>		
		<div class="abschnittlinks">			
		</div>
		<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien 
und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in 
Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein 
kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit 
den nötigen Regelialien.</p>		
		</div>

		<div id="kastenrechts">		
		<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
 und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in 
Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein 
kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den
 nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem 
gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen 
Interpunktion werden die Blindtexte beherrscht - ein geradezu 
unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile 
Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.
 Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata,
 wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ 
sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in 
den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des 
Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die 
Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf 
und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm 
eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. 
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo 
sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von 
ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen
 solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. 
Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht 
lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe
 und Parole betrunken machten und es dann in ihre Agentur schleppten, 
wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es 
nicht umgeschrieben wurde, dann benutzen Sie es immernoch.<br />Weit 
hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien 
leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der 
Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens 
Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. 
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den 
Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die 
Blindtexte beherrscht - ein geradezu unorthographisches Leben. </p>	
	       </div>
</body>
</html>

Gruß Anna

zsoerenm · 01. Mai 2007

erst mal danke an euch beiden.

Ich hab es nach dem selben Schema wie in dem von DaWonderer aufgebaut.
In IE 5.0 - IE6.0 klappt das nun auch. Also bei mehr Text vergrößert sich der div.
Bei allen anderen Browsern jedoch nicht. So nun hab ich sehr lange umstrukturiert, unnötiges "rausgeschmissen" (daher auch die verspätete antwort) und bin nun zu dem ergebnis gekommen, dass es am Dokumenttyp-Deklaration liegt.
Ich habe das hier verwendet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hierbei vergrößert sich der div nicht wenn ich mehr Text einfüge. Genauso ist es mit allen die so anfangen:
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Bei denen klappt es jedoch:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

und

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Aber dies sind ja zwei alte. Also welches sollte ich verwenden?

Gruß Sören

anna55 · 01. Mai 2007

zsoerenm schrieb:
Aber dies sind ja zwei alte. Also welches sollte ich verwenden?Gruß Sören

Keinen davon, denn beide Doctypes versetzen den Browser in den Quirksmode. Wenn Du was dazu lesen willst, wirf den Begriff mal in die SuFu.

Gruß Anna

zsoerenm · 01. Mai 2007

mh welches soll ich denn benutzen?
Oder soll ich gar keine Dokumenttyp-Deklaration benutzen? Denn dann geht es auch.

Gruß Sören

daWonderer · 01. Mai 2007

zsoerenm schrieb:
Aber dies sind ja zwei alte. Also welches sollte ich verwenden?

Wenn du

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

verwendest funktioniert es.
Ach so, wenn du mein Bsp.verwendet hast, musst du auch im style-Attribut die "height" Angabe im DIV "right" rausnehmen, sonst ist ja die Höhe festgelegt!

greetz...

zsoerenm · 01. Mai 2007

daWonderer schrieb:
Ach so, wenn du mein Bsp.verwendet hast, musst du auch im style-Attribut die "height" Angabe im DIV "right" rausnehmen, sonst ist ja die Höhe festgelegt!

genau das ist ja mein problem. Es soll ja eine bestimmte Höhe haben! Erst wenn der Text größer wird, soll sich das div auch vergrößern.

Gruß Sören

anna55 · 01. Mai 2007

zsoerenm schrieb:
genau das ist ja mein problem. Es soll ja eine bestimmte Höhe haben! Erst wenn der Text größer wird, soll sich das div auch vergrößern.

Gruß Sören

Ist die Höhe zu Beginn nicht durch den Inhalt gegeben? Und vergrößert sich dann durch mehr Text

zsoerenm · 01. Mai 2007

Ich erklär es noch ein bisschen detailierter...

... = Hintergrund (bzw Teilhintergrund)
## = innere Divs
TT = Text

So sollte es aussehen bei wenig text:
...................................
..####..#########..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
.............#########..
..####..#########..
..####..#########..
..####..#########..
..####..#########..
...................................

Jedoch nicht so:
...................................
..####..#########..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
.............#########..
..####.......................
..####.......................
..####.......................
..####.......................
...................................

So sollte es aussehen bei viel Text:
...................................
..####..#########..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
.............##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
..####..##TTTTTTT##..
.............##TTTTTTT##..
.............##TTTTTTT##..
.............##TTTTTTT##..
.............#########..

Also zusammengefasst:
Bei wenig Text soll der rechte div dort aufhören, wo der linke untere div aufhört. Dies wollte ich mit Hilfe von height (also manuelle eingabe) ermöglichen.
Bei viel Text soll der rechte div darüber hinausgehen.

PS: Dies funktioniert, wenn ich keine Dokumenttyp-Deklaration verwende oder die alten.

Gruß Sören

daWonderer · 01. Mai 2007

Du kannst "min-height" verwenden. Das Problem dabei ist, dass es von einigen (auch älteren) Browsern nicht unterstützt wird. Siehe dazu die Erläuterungen in Selfhtml zu dieser CSS-Eigenschaft.

zsoerenm · 01. Mai 2007

OK vielen Dank
Es läuft jetzt sogar unter IE5 - IE6, da diese im Quirksmode laufen und da hatte es ja auch so geklappt

div Strukturierung

zsoerenm

New member

daWonderer

New member

zsoerenm

New member

daWonderer

New member

anna55

Moderator

zsoerenm

New member

anna55

Moderator

zsoerenm

New member

daWonderer

New member

zsoerenm

New member

anna55

Moderator

zsoerenm

New member

daWonderer

New member

zsoerenm

New member