XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   1 div links, 2 div's untereinander daneben (http://xhtmlforum.de/showthread.php?t=32738)

jensr 30.06.2004 18:05

1 div links, 2 div's untereinander daneben
 
Hi ich brauche so eine Anordnung von 3 div's:

1111 2222
1111 2222
1111 3333
1111 3333

1 ist ein div links, div 2 und div 3 sollen untereinander und beide rechts von div 1 sein.

wenn div 1 in der höhe wächst, sollen 2 und 3 mit nach unten wandern!

Ist das möglich, ohne, dass ich 2 div's nebeneinander mache und div 2 und 3, dann in den rechten div davon?

PrinzEisenherz 30.06.2004 18:42

Also für mich schreit das nach einem Tabellen-Layout, aber es gibt hier bessere in CSS die das besser beurteilen können. :)

jensr 30.06.2004 18:45

Mmmh, vielleicht haltet ihr mich für verrückt, aber ich designe gerade das PHPBB2 Forum komplett mir CSS und ohne Tabellen!

Ist zwar ein riesen Aufwand, aber ich finde der lohnt sich!

terrikay 30.06.2004 19:00

Vielleicht ein bisschen verrückt, aber Stu Nicholls hat das auch schon gemacht! ;) - aber der Kerl macht ja auch nur verrückte CSS-Sachen... :)

Hier zu bestaunen: http://portal.portland.co.uk/forum/index.php

Gelesen hab ichs hier bei F - LOG - GE: http://www.grochtdreis.de/weblog/index.php?id=P386

Ansonsten ist das halt grundsätzlich immer son Problem, wenn zwei unabhängige, nebeneinander positionierte Container mitwandern sollen - eigentlich kann man dann nur einen großen drumrum machen, der dann wächst....

jensr 30.06.2004 19:26

Dann bin ich ja vielleicht der 2. der ein PHPBB Design tabellenfrei hinbekommt :) Immerhin bin ich schon mit der Index-Seite fertig.

Ich finde das ganze mit CSS eigentlich fast einfacher als mit Tabellen, weil ich nicht nur die Farben ändern möchte, sondern auch bestimmt Anordnungen und das wird mit Tabellen zum Teil schwieriger...
außerdem binde ich das Forum in meine Seite ein und möchte Bilder, die breiter sindals meine Seite, dass nur sie in einem Div über das Forum hinausgehen, wenn das überhauptgeht ;)

Werde das mit den 3 div's bestimmt noch irgendwie hinbekommen, so wie du z.B. gesagt hast! Wollte nur wissen ob es vielleicht eine einfache Möglichkeit gibt das ganze mit float oder margin oder so hinzubekommen!

Gruß jens

beeviz 30.06.2004 22:05

hehe. hatte ich auch mal vor irgendwann :D
aber mal schauen. jetzt is erstmal mein blog dran.

was du vorhast geht übrigens nicht, bzw ich hab noch nicht herausgefunden wie... sollte mein blog heute noch fertig werden und ich n bisschen zeit haben, werd ich mal gucken. aber theoretisch wäre sowas, wenn überhaupt, nur mit negativen margins möglich.

beeviz 30.06.2004 22:15

hm. bingo...
is ultra kompliziert...

vielleicht suchste mal nach dem css phpbb vom stu nicholls und guckst wie er das gemacht hat... aber ich habs mal auf die schnelle so gemacht, und das is nich gerade simpel...

Code:

<html>
<style>
.div1 {float: left; width: 300px; background: #CCC; padding-right: 100px;}
.div2 {clear: both;float: right; width: 200px; background: #DDD; margin-right: -100px;}
.div3 {clear: both;float: right; width: 200px; background: #EEE; margin-right: -100px;}
</style>

<div class="div1">
<div class="div2">2222222









</div>
<div class="div3">3333333




</div>
111111111111 1111 1111 1111 111 111 11111 1111












</div>


Pablo 30.06.2004 22:33

Bis auf das "clear: both;" kapier ich alles, wozu ist das gut?

Pablo

jensr 30.06.2004 23:27

Mhhh, wär eine Lösung für mein Problem, nur wenn div1 höher als div2+div3 wird, ziehen die beiden nicht mit, wäre aber in meinem Fall egal, da div1 immer gleich groß bleibt!

Ich habe es so gelöst, praktisch das gleiche:

Code:


#rahmen {width: 600px; background: #CCCCCC;}
#div1 {float: left; width: 200px;}
#div2 {float: right; width: 400px; background: #DDDDDD;}
#div3 {float: right; width: 400px; background: #EEEEEE;}
</style>

<div id="rahmen">
<div id="div1">1111
 1111</div>
<div id="div2">2222
 2222
 2222</div>
<div style="clear: both;"></div>
<div id="div3">3333
 3333
 3333</div>
</div>

Stu Nicholls hat das garnicht gemacht, er hat das einfach umgangen, in dem er einfach "div1" "div2" und "div3" untereinander gemacht hat, dieser Schummler :)

Unten bei "Who is Online" kann man das sehen, vergleich mal bei ihm und Original!

Gruß Jens

beeviz 30.06.2004 23:41

das ding is, du kannst dem browser bei css nicht wie bei tabellen sagen das er die beiden im div1 befindlichen divs proportional vergrößern soll wenn div1 wächst. das wird durch die eigenschaft 'float' verhindert. wenn

man das float weglässt kann man es mit % angaben in der höhe machen. allerdings kriegt man die divs nicht mehr rechts an den rand. hat also alles seine vor und nachteile.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:31 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019