Divs nebeneinander legen | Webstatt.org Community

user-137

01.10.2006 11:32

Hallo,

ich habe ein div Problem, also das ist mein Div:

<div id="div_m" align="center">

<div id="div_oben_links">1</div><div id="div_oben_rechts">1</div>

</div>

CSS Code:

	#div_m {

	width:682px;

	background-color: #404040;

	}

	

	#div_oben_links {

	text-align: left;

	background: left top;

	background-image: url(images/box/box_oben_links.gif);

	background-repeat: no-repeat;

	}

	

	#div_oben_rechts { 

	text-align: right;

	background: right top;

	background-image: url(images/box/box_oben_rechts.gif);

	background-repeat: no-repeat;

	}

Eigentlich sollte ein Bild links oben und eins rechts oben angezeigt werden, doch leider ist das was rechts oben sein sollte nicht oben in der ecke sondern rechts unter der ecke also am besten zeigts der Anhang.

Hoffentlich kann mir jemand dabei helfen. Auf css4you habe ich jetzt seit 2 Stunden gesucht aber es hat nichts geholfen.

Mfg. BNS

user-180

01.10.2006 11:38

schonmal mit float probiert?

may the force be with you. but mostly with me.

user-253

01.10.2006 11:42

Genau, beiden DIVs float: left; und schon sind sie nebeneinander

user-137

01.10.2006 12:04

thx.

Nun noch ein Problem das selbe will ich auch für unten machen aber da geht es nicht:
Irgendwie dachte ich CSS ist einfacher traurig

DIV:

<div id="div_m" align="center">

<div id="div_oben_links">LOLOLO</div><div id="div_oben_rechts">LOLOLO</div>

<br><br>

<div id="div_unten_links">LOLOLO</div><div id="div_unten_rechts">LOLOLO</div>

</div>

CSS.



	#div_m {

	width:682px;

	background-color: #404040;

	}

	

	#div_oben_links {

	float: left;

	text-align: left;

	background: left top;

	background-image: url(images/box/box_oben_links.gif);

	background-repeat: no-repeat;

	}

	

	#div_oben_rechts { 

	float: right;

	text-align: right;

	background: right top;

	background-image: url(images/box/box_oben_rechts.gif);

	background-repeat: no-repeat;

	}



	#div_unten_links { 

	float: left;

	text-align: left;

	background: left bottom;

	background-image: url(images/box/box_unten_links.gif); 

	background-repeat: no-repeat;

	}

	

	#div_unten_rechts { 

	float: right;

	text-align: right;

	background: right bottom;

	background-image: url(images/box/box_unten_rechts.gif);

	background-repeat: no-repeat;

	}

user-180

01.10.2006 12:59

stimmen die bilderpfade?

may the force be with you. but mostly with me.

user-137

01.10.2006 13:03

ja, ich dachte auch zuerst es leigt an den Pfaden aber sie sind richtig!

user-180

01.10.2006 13:34

lad mal hoch... ich will das mal in sehen...

may the force be with you. but mostly with me.

user-137

01.10.2006 13:37

Den Code?

<div id="div_m">

	<div id="div_oben_links">LOLOLO</div>

	<div id="div_oben_rechts">LOLOLO</div>

		<br><br>

	<div id="div_unten_links">LOLOLO</div>

	<div id="div_unten_rechts">LOLOLO</div>

</div>



	#div_m {

	width:682px;

	position: absolute;

	margin-left: -341px;

	left: 50%;

	background-color: #404040;

	}



        #div_oben_links {

	float: left;

	text-align: left;

	background: left top;

	background-image: url(images/box/box_oben_links.gif);

	background-repeat: no-repeat;

	}

		

	#div_unten_links { 

	float: left;

	text-align: left;

	background: left bottom;

	background-image: url(images/box/box_unten_links.gif); 

	background-repeat: no-repeat;

	}

	

	#div_oben_rechts { 

	float: right;

	text-align: right;

	background: right top;

	background-image: url(images/box/box_oben_rechts.gif);

	background-repeat: no-repeat;

	}

	

	#div_unten_rechts { 

	float: right;

	text-align: right;

	background: right bottom;

	background-image: url(images/box/box_unten_rechts.gif);

	background-repeat: no-repeat;

	}

user-294

01.10.2006 14:52

Lad mal als Beispiel hoch, nicht nur den Quelltext.

user-137

01.10.2006 14:56

EDIT//

Gut hier: http://victorvici.vi.funpic.de/123/download.html

user-118

01.10.2006 15:00

Ein Beispiel du Nase. die Datei auf den Webspace und den Link ins Forum...

Ich brauche keine Signatur

user-294

01.10.2006 21:11

Aiaiai, das wird schon richtig angezeigt, allerdings aufgrund deiner Background-Positionierung so verschoben, dass man nur das schwarze sieht. Schneide entweder das Schwarze aus deinen Bottom-Grafiken raus, oder gib deinen beiden Bottom-Boxen mal height: 116px;

user-137

02.10.2006 08:12

thx. Kann man es auch machen das das Bild immer ganz angezeigt wird?
Also das ich nicht immer height: 116px; machen muss.

user-294

02.10.2006 16:54

ja, wenn du das Bild per IMG-Tag einfügst. Du hast nur ein Hintergrundbild definiert, und das passt sich der Größe der Box an, und nicht anders herum.