ugrás a tartalomhoz

CSS: Nagy négyzetben középen oszlop, négy sarkában 4 pici téglalap

Viper · 2007. Szep. 22. (Szo), 09.43
Sziasztok!

A címben szereplő dolgot kéne kialakítani, természetesen úgy, hogy IE-ben és FF-ben is azonosan nézzen ki.

Szóval, ami van:
- nagy téglalap, benne középen egy oszlop. Ide kerül a tartalom, ez adja meg az egész magasságát.
- a nagy téglalap 4 sarkában, az oszlop mellett, 4 pici téglalap kéne hogy legyen. Odáig eljutottam, hogy az oszlop két oldalán van 1-2 pici, de az alsókat nem tudtam sehogy se úgy odarakni, hogy a középső olszlop 'átmenjen' közöttük.

A két fölső téglalap flaotolva volt, közé az oszlop megadott margin-al berakva. A két alsó négyzethez szintét float -ot próbáltam, nem túl sok sikerrel. Utána még megpróbáltam egy 'position: relative; bottom: 0px; left: 0px;'-et de azt sem akarta megenni :(

Tudna ebben valaki segíteni?
 
1

Egészségedre...

janoszen · 2007. Szep. 22. (Szo), 11.07
Valamiért azt érzem, hogy maga a koncepció van rosszul elgondolva, web ügyileg, de legyen.

Fogsz egy befoglaló divet, annak adsz egy position: relativet, a négy belsőnek position:absolute. És olvasd el a CSS doksit.
2

Igen, lehet...

Viper · 2007. Szep. 22. (Szo), 11.57
Igen, lehet, hogy magában az elgondolásban van hiba.

A position: absolute -al viszont fixre pozícionálnám az egész oldalon az elementeket, és mivel az egész nagy div még középre van rendezve, így ez szerintem nem járható út (javíts ki, ha tévedek)

Itt tudod megnézni, hogy miről van szó. Bekeretezem sárgával a 4 sarokba (kéne hogy legyen) DIV-et, szürkével a középső oszlopot, és kékkel az egészet befogót, hogy látni lehessen.

szerk.: most kicsit máshogy van megcsinálva, a cél a leírt megoldás lenne, hogy az alsó Google hírdetést is be lehessen tenni a középső (content) oszlopba, egységesen kezelve ezzel a megjelenített tartalmat.
3

Doksi, doksi, doksi.

janoszen · 2007. Szep. 22. (Szo), 12.46
Mint mondottam, el kellene olvasni a doksit. Ha position:relative-el van egy div, akkor minden benne foglalt elem ahhoz képest lesz pozicionálva. Egyébként egyszerűbb lenne próbálkozni.

Ami az elgondolást illeti, lehet hogy célszerűbb lett volna kifloatolni a kugli hirdetéseit abszolut pozicionálás helyett.
4

Köszi

Viper · 2007. Szep. 22. (Szo), 13.06
Rendben, köszönöm.

Konkrétan melyik doksira gondolsz?
6

CSS

janoszen · 2007. Szep. 22. (Szo), 15.31
Választásod szerinti CSS doksira.
7

doksi

Fraki · 2007. Szep. 22. (Szo), 18.44
elsősorban persze ott a w3c.org
5

Dizájn vagy tartalom

Jano · 2007. Szep. 22. (Szo), 15.31
Az alsó két dobozban csak dizájn elemek lesznek vagy tartalom is? Fix-e a magassaguk vagy változó?
8

Design

Viper · 2007. Szep. 22. (Szo), 19.44
Csak dizájn, a tartalom középen lesz csak. Most úgy néz ki, hogy a kolléga által javasolt megoldás szépen működik (ezt a kombinációt pont nem próbáltam ki, mivel az absolute-relative használatával ennyire nem voltam tisztában).
9

Akkor háttér

Jano · 2007. Szep. 22. (Szo), 21.28
HA csak dizájnelem ezek, akkor ahhoz nem kell ennyit vacakolni. Ha fix széles az oszlop akkor ad meg neki háttérként az alsó sarkokat, a fentieket meg ad mondjuk a header elemednek. Ha nincs annyi elemed akkor egyszerűen rakj párat egybe, és egyesével állítsd be a sarkokat háttérpozicionálással. Erről a techinkáról olvahatsz itt a Weblabonr a dobozolásos cikkben.