benachbartes bild dynamisch mitvergrößern

[zerogate]

hi,
ich habe ein div namens center. in diesem befindet sich ein div center_west (mit float left) und ein div center_east (mit float right). center_west vergrößert sich nach unten je nach textlänge. ich möchte dass sich center_east entsprechend mitvergrößert. wie erreiche ich das am besten?

vielen dank
ein css-neuling

[GermanysNextTopfmodel]

Wie unterscheiden sich die Divs den vom Aussehen her?
Ohne näheres zu wissen wird es schwierig Dir zu helfen,
aber schau mal hier, vieleicht ist das ja das richtige.

Gruß
GermanysNextTopfmodel

[zerogate]

Wie unterscheiden sich die Divs den vom Aussehen her?
Ohne näheres zu wissen wird es schwierig Dir zu helfen,
aber schau mal hier, vieleicht ist das ja das richtige.

Gruß
GermanysNextTopfmodel

habe es nach dieser anleitung probiert: http://www.alistapart.com/articles/fauxcolumns/

klappt gut, außer dass ich den abstand von OBEN und UNTEN nicht einstellen kann.

der das tut schreib macht ja folgendes:
... repeat-y 50% 0

und meint 50% damits in der mitte ist (das geht bei mir auch) und 0 weil von oben 0 abstand sein soll.

ich will aber dass es so ca. 50px von oben erst beginnt und 50px von unten aufhört... geht aber nicht:/.

habe z.B.: das probiert, da sollte man doch zumindest von oben einen abstand sehen:
background:#FFF url(bg_new.jpg) repeat-y 50% 50%;

mit pixelangaben oder mitgabe von 4 parametern für links, oben, rechts, unten funkts auch nicht..

[1827]

ich will aber dass es so ca. 50px von oben erst beginnt und 50px von unten aufhört... geht aber nicht:/.

Entschuldige die dumme Frage, aber hast du padding:50px auch schon margin-top:50px; sowie margin-bottom:50px; ausprobiert?
Es wäre sicher hilfreich, wenn du uns dein bisheriges zeigen könntest.

[1827]

Vergiss bitte das: padding:50px.

[zerogate]

»» ich will aber dass es so ca. 50px von oben erst beginnt und 50px von unten aufhört... geht aber nicht:/.
Entschuldige die dumme Frage, aber hast du padding:50px auch schon margin-top:50px; sowie margin-bottom:50px; ausprobiert?
Es wäre sicher hilfreich, wenn du uns dein bisheriges zeigen könntest.

das mit dem margin bringt nichts..
hier mein css:

body {  
	  
	background:#985598 url(bg_new.jpg) repeat-y 50% 10%;  
}  
  
#center {  
	width:800px;  
	background: #640064;  
}  
#center_west{  
	float:left;  
	background: #640064;  
	width:560px;  
	min-height:240px;  
	padding:5px;  
}  
#center_west .heading{  
	margin:0px;  
	font-size:18px;  
	font-family:Verdana, Helvetica, sans-serif;  
  
}  
#center_west .content{  
	margin-top:5px;  
	width:560px;  
	height:auto;  
	font-size:14px;  
	font-family:"trebuchet ms", Times, serif;  
  
}  
  
#center_east{  
  
	float:right;  
	background: #640064;  
	width:225px;  
	min-height:240px;  
	margin:0px;  
	padding:0px;  
}

im html sieht das dann cs so aus:

<div id="body">  
.....  
 <div id="center">  
            <div id="center_west">  
                <p class=heading>Das ist eine Überschrift</p>  
                <p class=content></p>  
            </div>  
            <div id=center_east>  
             hier noch 2 subdivs  
            </div>  
</div>

[ChrisB]

Hi,

bitte zitiere *vernünftig*; das, worauf du dich konkret beziehst, und nicht einfach alles.

habe es nach dieser anleitung probiert: http://www.alistapart.com/articles/fauxcolumns/

klappt gut, außer dass ich den abstand von OBEN und UNTEN nicht einstellen kann.

der das tut schreib macht ja folgendes:
... repeat-y 50% 0

und meint 50% damits in der mitte ist (das geht bei mir auch) und 0 weil von oben 0 abstand sein soll.

ich will aber dass es so ca. 50px von oben erst beginnt und 50px von unten aufhört... geht aber nicht:/.

Du musst das Hintergrundbild ja nicht unbedingt direkt body verpassen - sondern bspw. einem anderen Element, welches die gewünschten Abstände von den Viewporträndern einhält.

habe z.B.: das probiert, da sollte man doch zumindest von oben einen abstand sehen:
background:#FFF url(bg_new.jpg) repeat-y 50% 50%;

Nein, natürlich nicht - damit sagst du immer noch, wiederhole das Hintergrundbild in der Vertikalen über die gesamte Fläche. Du gibst lediglich eine andere Startposition dafür an, wo die *erste* "Kachel" platziert werden soll, und danach werden sowohl darunter als auch darüber weitere Kacheln angelegt, bis die Fläche des Elements, für das du diesen Hintergrund zugewiesen hast, ausgefüllt ist.

MfG ChrisB

[zerogate]

Du musst das Hintergrundbild ja nicht unbedingt direkt body verpassen - sondern bspw. einem anderen Element, welches die gewünschten Abstände von den Viewporträndern einhält.

darf das kein div sein?

hab ein div namens "all" wo alles drinnen ist, da den background setzen bringt gar nichts...ändert nichts..

nur beim stylen des bodys scheinen die ganzen unterdivs alle die einstellungen zu "erben".

[ChrisB]

Hi,

Du musst das Hintergrundbild ja nicht unbedingt direkt body verpassen - sondern bspw. einem anderen Element, welches die gewünschten Abstände von den Viewporträndern einhält.

darf das kein div sein?

Doch, das bietet sich sogar an.

hab ein div namens "all" wo alles drinnen ist, da den background setzen bringt gar nichts...ändert nichts..

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[zerogate]

»» hab ein div namens "all" wo alles drinnen ist, da den background setzen bringt gar nichts...ändert nichts..

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

okay es geht doch. das mit dem abstand von oben klappt auch wunderbar.
das problem ist nur, dass das DIV "all" nicht automatisch die height der subdivs annimmt.
wenn ich sie fix setze funktionierts. aber die height soll ja dynamisch sein, je nach textlänge im DIV center_west.

css:

#all{  
	width: 800px;  
  
	height:auto; /***!!!!***/  
  
	background:#985598 url(bg_new.jpg) repeat-y;  
	margin-top:20px;  
	margin:0 auto;  
	color:#FFF;  
}  
  
#center {  
	width:800px;  
	background: #640064;  
	height:auto;  
}  
#center_west{  
	float:left;  
	width:560px;  
	min-height:240px;  
	padding:5px;  
	padding-left:10px;  
  
}  
#center_west .heading{  
	margin:0px;  
	font-size:18px;  
	font-family:Verdana, Helvetica, sans-serif;  
}  
#center_west .content{  
	margin-top:5px;  
	width:560px;  
	height:auto;  
	font-size:14px;  
	font-family:"trebuchet ms", Times, serif;  
}  
#center_east{  
	float:right;  
	width:225px;  
	min-height:250px;  
	margin:0px;  
	padding:0px;  
}  

div verschachtelung:

<body>  
	<div id=all>  
		<div id=center>  
			<div id=center_west>  
			<div id=center_east>

[ChrisB]

Hi,

das problem ist nur, dass das DIV "all" nicht automatisch die height der subdivs annimmt.

Natürlich, weil diese durch float aus dem normalen Fluss genommen sind, und so die Höhe ihrer Vorfahren nicht mehr beeinflussen.

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

MfG ChrisB

[zerogate]

»» das problem ist nur, dass das DIV "all" nicht automatisch die height der subdivs annimmt.

Natürlich, weil diese durch float aus dem normalen Fluss genommen sind, und so die Höhe ihrer Vorfahren nicht mehr beeinflussen.

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

danke! funktioniert. habe einfach ein overflow:hidden in #all eingefügt. somit "berücksichtigt" es die heights der subdivs.