Problem sa layoutom...

[krcko]

treba da iskodiram jedan layout koji nikako nisam uspeo da ubacim u tabele (jer su svi delovi razlicitih dimenzija) pa sam pomislio da to uradim preko lejera ali problem mi je sto bas nisam upoznat sa njima (lejerima). Citao sam nesto na netu o lejerima i video primere ali ni jedan koji pokazuje kako da uradim ovo sto meni treba...
evo slike:

zeleni delovi su staticni (ne menja im se velicina) stim sto E i F delovi treba da budu na sredini. Narandzasti delovi se resizuju po horizontali a crveni po vertikali (plavi deo je zapravo mesto gde sadrzaj stranice treba da bude).
nisamo mogao ovo da odradim sa tabelama iz razloga sto A, E i C i B, F i D delovi nisu iste visine...

i cela stvar treba da bude centrirana i da se siri (po vertikali jer biti fixne sirine) u zavisnosti od sadrzaja. (ma znate vec )

svaka pomoc je dobro dosla.
Hvala unapred.

poz

[jablan]

A što ne probaš sa ugnježđenim tabelama?

[krcko]

ma probao sam ja sa ugnjezdenim tabelama ali ne ide...
ovaj tvoj kod radi ali je problem sto ne smem da koristim height na tabeli (jer nije po standardu, a kod mora da mi podrzava najmanje html 4.01 standard)
evo sta sam ja probao:

<table width="900px" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 101px;">
        <table border="0" cellpadding="0" cellspacing="0">
	    <tr><td id="layout_topleft">&nbsp;</td></tr>
	    <tr><td id="layout_left">&nbsp;</td></tr>
	    <tr><td id="layout_bottomleft">&nbsp;</td></tr>
	</table>
     </td>
     <td id="content">
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
	    <tr>
	        <td class="layout_top">&nbsp;</td>
		<td id="layout_topmiddle">&nbsp;</td>
		<td class="layout_top">&nbsp;</td>
	    </tr>
	</table>

         bla bla bla						

         <table width="100%" border="0" cellpadding="0" cellspacing="0">
	    <tr>	
		<td class="layout_bottom">&nbsp;</td>
		<td id="layout_bottommiddle">&nbsp;</td>
		<td class="layout_bottom">&nbsp;</td>
	    </tr>
	</table>
    </td>
    <td style="width: 63px;">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr><td id="layout_topright">&nbsp;</td></tr>
            <tr><td id="layout_right">&nbsp;</td></tr>
            <tr><td id="layout_bottomright">&nbsp;</td></tr>
        </table>
    </td>
    </tr>
</table>

a ovo je css:

#layout_topleft
{
	width: 101px;
	height: 244px;
	background: url(img/frame/top_left.png) no-repeat;
}

#layout_bottomleft
{
	width: 101px;
	height: 210px;
	background: url(img/frame/bottom_left.png) no-repeat;
}

#layout_left
{
	width: 101px;
	background: url(img/frame/left.png) repeat-y;
}

.layout_top
{
	height: 26px;
	background: url(img/frame/top.png) repeat-x;
}

#layout_topmiddle
{
	width: 238px;
	height: 26px;
	background: url(img/frame/top_middle.png) no-repeat;
}

.layout_bottom
{
	height: 15px;
	background: url(img/frame/bottom.png) repeat-x;
}

#layout_bottommiddle
{
	width: 99px;
	height: 15px;
	background: url(img/frame/bottom_middle.png) no-repeat;
}

#layout_topright
{
	width: 63px;
	height: 116px;
	background: url(img/frame/top_right.png) no-repeat;
}

#layout_bottomright
{
	width: 63px;
	height: 211px;
	background: url(img/frame/bottom_right.png) no-repeat;
}

#layout_right
{
	width: 63px;
	background: url(img/frame/right.png) repeat-y;
}

#content
{
	background: url(img/bg/content.png) repeat;
	background-color: #042942;
}

ali kao sto rekoh to ne radi...

hvala na odgovoru ali da nemas neko drugo resenje (da odgovara standardima)?

[ivanhoe]

moglo bi ovo iz CSS-a bez vecih problema, osim za centriranje E i F, to nisam siguran kako da uradim. Moglo bi da se vara pa da se stavi da je 3 i 4 po 50% sirine, a da je E apsolutno pozicionirano preko, ukoliko preklapanje nije problem?

U tom slucaju imas 3 vertikalna div-a, levi i desni su float: left i right, i imaju neku sirinu, a centralni ne mora nista. Onda u levi i desni naprosto ubacis po 3 diva, i oni ce se postaviti kao na slici (A, 1, B i C,2,D).
Centralni podelis na gornji, donji i srednji. Gornji i donji treba da su position:absolute; gornji ima top: 0, a donji bottom: 0. Srednjem podesis padding tako da se ne preklapa sa njima. Srednji ti je 7.

I sad zadnji korak, u npr. gornji stavis 3 diva, 2 su floatovana levo i desno i sirine 49% (to su 3 i 4), a srednji je apsolutno pozicioniran preko njih na sredini (to je E). Identicno tako i u donjem divu za 5,6 i F..

Ajd ako se ne snadjes, probacu da otkucam ovo, pa da ti dam primer, mada ima tu posla...

[modeus]

za sta koristis ovakav layout??

[krcko]

Originalno napisao modeus

za sta koristis ovakav layout??

za moj site, takav mi je dizajn (nisam ja radio, jedan prijatelj )

@ivanhoe:
da preklapanje nije problem (3 i 4 koriste istu sliku) tako da cu pokusati ovo sto si rekao (najverovatnije cu samo da koristim jedan div za 3 i 4, to sam podelio na dva dela zbog tabela...) hvala
cu javim ako bude bilo problema

poz

[krcko]

rekoh da cu se javim ako bude bilo problema i evo me

elem levi i desni deo mi se ne sire u zavisnosti od duzine sadrzaja u centralnom delu... evo sta sam probao:
html:

<div id="levi">
    <div id="levi_gornji">&nbsp;</div>
    <div id="levi_srednji">&nbsp;</div>
    <div id="levi_donji">&nbsp;</div>
</div>

<div id="desni">
    <div id="desni_gornji">&nbsp;</div>
    <div id="desni_srednji">&nbsp;</div>
    <div id="desni_donji">&nbsp;</div>
</div>
            
<div id="centralni">
                
    <div id="gornji">
        <div id="gornji_razvucen">&nbsp;</div>
        <div id="gornji_centralni">&nbsp;</div>
    </div>

    <div id="srednji">

      bla bla bla

     </div>

     <div id="donji">
         <div id="donji_razvucen">&nbsp;</div>
         <div id="donji_centralni">&nbsp;</div>
     </div>

</div>

css:

#levi
{
    width: 101px;
    float: left;
}

    #levi_gornji
    {
        height: 244px;
        background: url(img/frame/top_left.png) no-repeat;
    }

    #levi_srednji
    {
        height: 100px;
        background: url(img/frame/left.png) repeat-y;
    }

    #levi_donji
    {
        height: 210px;
        background: url(img/frame/bottom_left.png) no-repeat;
    }

#desni
{
    width: 63px;
    float: right;
}

    #desni_gornji
    {
        height: 116px;
        background: url(img/frame/top_right.png) no-repeat;
    }

    #desni_srednji
    {
        background: url(img/frame/right.png) repeat-y;
    }

    #desni_donji
    {
        height: 211px;
        background: url(img/frame/bottom_right.png) no-repeat;
    }

#centralni
{

}
    
    #gornji
    {
        position: absolute;
        top: 0;
        padding-top: 30px;
    }

        #gornji_razvucen
        {
            width: 780px;
            height: 26px;
            background: url(img/frame/top.png) repeat-x;
        }

        #gornji_centralni
        {
            position: absolute;
            left: 266px;
            top: 30px;
            width: 238px;
            height: 26px;
            background: url(img/frame/top_middle.png) no-repeat;
        }
    
    #srednji
    {
        background: url(img/bg/content.png) repeat;
        background-color: #042942;
        color: white;
        padding-top: 30px;
    }

    #donji
    {
        position: absolute;
        bottom: 0;
        padding-bottom: 25px;
    }
        
        #donji_razvucen
        {
            width: 780px;
            height: 15px;
            background: url(img/frame/bottom.png) repeat-x;
        }

        #donji_centralni
        {
            position: absolute;
            left: 365px;
            bottom: 25px;
            width: 99px;
            height: 15px;
            background: url(img/frame/bottom_middle.png) no-repeat;
        }

i ovo "radi" (elementi se razmeste gde treba sem sto se ne izduzuju) samo u IE mada nece mi biti tesko da namestim da radi u drugim browserima samo da nadjen nacin da mi se sve siri kako treba...

ima neko ideju kako da resim problem?

[ivanhoe]

a treba da se sire? hmmm.. a jel mora da radi u IE ?

Ako mora onda napravi tabelu sa 3 celije, to je uzgred i najednostavnije resenje...a ako ne mora onda koristi display:table-cell za divove, umesto float (ali to ne radi u IE, kao sto rekoh)..

[krcko]

hm mora da radi u ie (ali nije mi problem da odradim razlicite verzije pa u zavisnosti od pretrazivaca da izbacim odredenu - ionako ce se sve generisati preko phpa)...

sto se tice tablela, vec sam pokusao (imas gore kod) al i to ne radi (dobijem isto sto i ovo preko divova) jer ne mogu da koristim height u tabeli...

[krcko]

izgleda da cu morati da radim sa iframe-om i height-om na tabeli!