ugrás a tartalomhoz

CSS segítséget kérek

fisher · 2009. Okt. 6. (K), 14.16
Kicsit kezdek megőrülni, már a w3c "Visual formatting model"-jét olvasgatom kínomban
de nem tudok rájönni, hogy hogyan lehetne megoldani azt, ami nekem kéne:
  1. <html>  
  2. <head></head>  
  3. <body>  
  4.   
  5. <div style="margin-left: auto; margin-right: auto; width: 400px; border: 1px solid red; position: relative;">  
  6.   
  7.  <div style="top:10px; left: 10px; height:40px; width:40px; border: 1px solid green; position: relative;">  
  8.  </div>  
  9.   
  10.  <div style="top:10px; left: 60px; height:25px; width:40px; border: 1px solid black; position: absolute;">  
  11.  </div>  
  12.   
  13.  <div style="top:40px; left: 60px; width:40px; border: 1px solid blue; position: absolute;">  
  14.  Abrakadabra<br>  
  15.  Abrakadabra<br>  
  16.  Abrakadabra<br>  
  17.  Abrakadabra<br>  
  18.  Abrakadabra<br>  
  19.  Abrakadabra<br>  
  20.  </div>  
  21.   
  22. </div>  
http://fisher.hu/t1.html

A probléma az, hogy a "piros" keret nem fogja körbe az "Abrakadabra" részt, pedig az kéne, de nagyon.

Részemről nem vagyok webész, csak én kaptam a nemes feladatot, hogy a céges weblapot megcsináljam, és most nagyon jó nekem.
‹ PHP-->JavaScript Prototype vs jQuery ›
 ■
1

pozition: absolute

Poetro · 2009. Okt. 6. (K), 14.20
Mivel az "Abrakadabra" rész abszolút van pozicionálva, ezért kiesik a dokumentum folyamából (document flow), ezért olyan mintha nem is lenne ott, ezen okból nem veszi körbe az "Abrakadabra" blokkodat.
Amennyiben float-ot szeretnél használni, akkor szükséged lenne egy clearfix-re a float-olt tartalmak után.
2

Nem tudom, hogy mit csinálok

fisher · 2009. Okt. 6. (K), 15.21
Nem tudom, hogy mit csinálok rosszul, ez a "rossz" lap:

http://fisher.hu/t1.html

Ez pedig a "jó":

http://fisher.hu/t3.html

Lehet, hogy rossz helyre teszem a clearfix-et? A http://www.webtoolkit.info/css-clearfix.html alapján csináltam, de valamit úgy lászik, hogy elbénázok...
3

Mit szeretnél pontosan csinálni?

Chaar-Lee · 2009. Okt. 6. (K), 15.54
Tudnál egy képet mellékelni, vagy egy leírást arról, hogy mit is szeretnél elérni?
Mert ez a minden div-nél position:absolute tuti nem lesz jó :)
4

Azt, ami a t1.html-ben van,

fisher · 2009. Okt. 6. (K), 16.32
Azt, ami a t1.html-ben van, csak a piros keretnek körbe kéne futnia mindhárom div-et. A három div úgy helyezkedik el, ahogy a "nagy" oldalon kell elhelyezkednie, csak az sokkal bonyolultabb, nem akartam elkavarodni benne, ezért csináltam egy egyszerűbb oldalt, amiben csak a div-ek vannak, amikbe bele tudom dobálni a menüt balra, a képet a kiskockába, a szöveget meg az abrakadabra helyére. Csak az egészet középre kéne tenni egy szép keretbe.
5

Remélem erre gondoltál

Chaar-Lee · 2009. Okt. 7. (Sze), 00.49
http://chaarlee.hu/dl/fisher.html

Itt most mindegy, hogy a d1 vagy d23 magassága lesz a nagyobb, a piros doboz hozzá fog igazodni.
6

Áh, tökéletes :) Akkor ha jól

fisher · 2009. Okt. 7. (Sze), 10.23
Áh, tökéletes :) Akkor ha jól értem, a lényeg az, hogy a flow mindenképpen megmaradjon (tehát el kell felejteni az absolute pozíciót), illetve a clear both meg "széthúzza", "lehúzza" a környező div-et?

Hm, pedig ezt még hozzáírtam: köszönöm a segítséget, magamtól sose találtam volna ki :)
(megviccelt az előnézet :))