coloane tableless [rezolvat]

[vectorialpx]

voi cum faceti coloanele astfel incat sa ajunga "pana jos" si sa fie egale indiferent de content... ar trebui ceva de genul height:100% dar nu prea merge... sper ca intelegeti ideea... cu un tabel treaba e simpla pentru ca el are coloanele dimensionate pe height "de la mama natura"... dar div-urile trebuiesc stabilite.

as vrea ca div-urile sa nu aiba dimensiuni prestabilite in px... sa fie ceva independent de content... adica, pe orice coloana se abuzeaza de continut, si cealalta sa fie pana la header [aici e vorba de background, in special... sa se vada un bg plin, pana jos]

este posibil ce vreau eu sau sa apelez la maretele tabele?

Cod: Selectaţi tot

-----------------------------------------------------------------------
|                                                               |      |
|                                                               |      |
-----------------------------------------------------------------------
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
|                   |                                           |      |
------------------------------------------------------------------------
|                   |                                           |      |
|                   |                                           |      |
------------------------------------------------------------------------


[NooK]

Se face cu nested divs. Cauta pe google. Ca sa iti iasa fara sa iti bati capul desenezi pe foaie intai

[dechim]

Cred ca-i ce vrei !
http://www.webmasterworld.com/forum83/200.htm

[vectorialpx]

aia cu height:100% la body era tare dar nu merge la mine... oi fi avand css-ul idiot... o sa mai fac incercari dar pana acum nimic... in IE e oke [aproape] dar in firefox nu vrea pic...

edit // am observat ca trebuie sa fac cateva modificari majore... so, nu stiu cum o sa fac... si sa pun tabel o sa fie destul de greu

[ExcalIbvr]

html

Cod: Selectaţi tot

<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>

css

Cod: Selectaţi tot

#left { float: left; display: inline; width: 150px; }
#middle { float: left; display: inline; width: 500px; margin-left: 10px; }
#right { float: left; display: inline; width: 150px; margin-left: 10px; }
#footer { clear: both; }

Pentru #right poti sa folosesti si float: right, daca vrei.

[Amenthes]

Singura solutie de incredere atata timp cat inca mai e in viata IE6 e o tehnica numita faux-columns, celelalte sunt
mult prea pline de hack-uri. Desi link-ul e catre un articol cu doua coloane, cred ca te descurci pentru trei. Nu am gasit articolul unde se ocupa de varianta in trei coloane.

http://www.alistapart.com/articles/fauxcolumns/

Sunt curios dupa ce il citesti ce parere ai intre varianta asta si una cu un tabel.
Singurul avantaj pe care il vad contra tabele e faptul ca FF nu suport pozitionare
absoluta in TD-uri.

[vectorialpx]

Amenthes, nu vad nimic acolo [cel putin nu in momentul asta...]

ExcalIbvr, vreau sa fie cu height 100%, adica sa am bg-ul pana jos, asta e problema..
stiu sa fac coloane dar am nevoie sa pun alb in coloana din centru si, daca pun coloana din dreapta o alta culoare atunci va arata ca dracu... un fel de "L" alb urias... si vreau ca toate coloanele sa fie de sus pana jos. Cum ziceam, tabelul are asta de la "mama natura" dar div-urile au mari probleme de compatibilitate. Daca merge in firefox nu merge in IE si daca merge oke si in IE si in firefox [rar...] atunci nu mere in Safari si tot asa...

[ExcalIbvr]

octavian, macar ai incercat sa testezi codul pe care ti l-am dat? Ca merge asa cum vrei tu...

[Amenthes]

Octavian, ceea ce trebuie sa faci e iluzie optica.
Pentru fiecare coloana la care vrei background cu height 100% trebuie sa ai un div wrapper care sa faca wrap la absolut toate coloanele.

Adica:

Cod: Selectaţi tot

<div id="wraper-for-right-column">
     <div id="wraper-for-left-column">
        <div id="left-column">
   
        </div>
        <div id="center">

        </div>
        <div id="right-column">

        </div>
        <br style="clear:both;">
    </div>
</div>


Pentru coloane faci cum a zis Excalibvr, iar ptr wrapper-e pui background pe stanga respectiv pe dreapta in functie de coloana. Imaginea de background avand latimea dorita de tine la coloana aceea. De asta se numeste faux columns, pentru ca doar da impresia de coloane, ele de fapt nu sunt, sunt doar background-urile acelor divuri care contin toate coloanele la un loc.
Ar mai fi o chestie. Daca nu vrei <br>-ul ala, poti sa adaugi la coloanele wrapper si oveflow:auto/hidden ptr browsere(FF, Opera) iar ptr IE6 trebuie sa declansezi hasLayout. Sunt mai multe modalitati aici dar te las sa cauti ca e interesant.

[vectorialpx]

ExcalIbvr

<style type="text/css">
#left { float: left; display: inline; width: 150px; background-color:#ccc; }
#middle { float: left; display: inline; width: 500px; margin-left: 10px; background-color:#999; }
#right { float: left; display: inline; width: 150px; margin-left: 10px; background-color:#666; }
#footer { clear: both; }
</style>

<div id="header">h</div>
<div id="left">1</div>
<div id="middle">2<br />
<br /><br /><br /><br />fin
</div>
<div id="right">3</div>
<div id="footer">4</div>

eu vreau ceva de genul:

<table width="550">
<tr>
<td bgcolor="#cccccc">1</td>
<td bgcolor="#999999">2<br />
<br /><br /><br /><br />fin</td>
<td bgcolor="#666666">3</td>
</tr>
</table>

Amenthes, nu are legatura Faux Columns cu ce zic eu... e vorba de inaltime... m-am uitat la http://www.communitymx.com/content/arti ... ?cid=afc58 dar nu e ce imi trebuie mie [asta chiar nu ma intereseaza...]

[Amenthes]

Nu stiu ce sa mai zic. Daca gasesti alta solutie mai de incredere sa lasi un link si aici. In afara de ce am zis eu nu stiu alta mai reliable.

[Quber]

@octavian, la ultimul div al tau pui style="clear: both;" asta e vrut sa spuna ExcalIbvr la mine asta merge...

[vectorialpx]

damn man! tu nu vezi codul...? da paste in notepad si salveaza ca gigi.htm

[mihaitha]

mdea, am testat si eu codul lui octavian si nu imi merge nici mie...

[Copyright]

Vezi daca te ajuta cu ceva hacku asta:

<style type="text/css">
#wrapper{ overflow:hidden; }
#header{ background-color:#ffa; width:820px; }
#left { float: left; display: inline; width: 150px; background-color:#ccc; padding-bottom:3000px; margin-bottom:-3000px;}
#middle { float: left; display: inline; width: 500px; margin-left: 10px; background-color:#999; }
#right { float: left; display: inline; width: 150px; margin-left: 10px; background-color:#666; padding-bottom:3000px; margin-bottom:-3000px; }
#footer { clear: both; background-color:#eee; width:820px; position:relative; }
</style>

----------------------------

<div id="wrapper">
<div id="header">h</div>
<div id="left">1</div>
<div id="middle">2<br />
<br /><br /><br /><br />fin

</div>
<div id="right">3</div>
<div id="footer">f</div>
</div>



Later.