| krcko |
20. 04. 2006. 15:34 |
Problem sa layoutom...
1 Prilog(a)
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 :p)
svaka pomoc je dobro dosla.
Hvala unapred.
poz |
| jablan |
20. 04. 2006. 15:58 |
1 Prilog(a)
A što ne probaš sa ugnježđenim tabelama?
|
| krcko |
20. 04. 2006. 19:08 |
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:
Kôd:
<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"> </td></tr>
<tr><td id="layout_left"> </td></tr>
<tr><td id="layout_bottomleft"> </td></tr>
</table>
</td>
<td id="content">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="layout_top"> </td>
<td id="layout_topmiddle"> </td>
<td class="layout_top"> </td>
</tr>
</table>
bla bla bla
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="layout_bottom"> </td>
<td id="layout_bottommiddle"> </td>
<td class="layout_bottom"> </td>
</tr>
</table>
</td>
<td style="width: 63px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td id="layout_topright"> </td></tr>
<tr><td id="layout_right"> </td></tr>
<tr><td id="layout_bottomright"> </td></tr>
</table>
</td>
</tr>
</table>
a ovo je css:
Kôd:
#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 |
20. 04. 2006. 20:40 |
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 |
21. 04. 2006. 17:38 |
za sta koristis ovakav layout??
|
| krcko |
21. 04. 2006. 18:28 |
Citat:
Originalno napisao modeus
za sta koristis ovakav layout??
|
:D za moj site, takav mi je dizajn (nisam ja radio, jedan prijatelj :p)
@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 :D
poz |
| krcko |
22. 04. 2006. 01:45 |
rekoh da cu se javim ako bude bilo problema i evo me :D
elem levi i desni deo mi se ne sire u zavisnosti od duzine sadrzaja u centralnom delu... evo sta sam probao:
html:
Kôd:
<div id="levi">
<div id="levi_gornji"> </div>
<div id="levi_srednji"> </div>
<div id="levi_donji"> </div>
</div>
<div id="desni">
<div id="desni_gornji"> </div>
<div id="desni_srednji"> </div>
<div id="desni_donji"> </div>
</div>
<div id="centralni">
<div id="gornji">
<div id="gornji_razvucen"> </div>
<div id="gornji_centralni"> </div>
</div>
<div id="srednji">
bla bla bla
</div>
<div id="donji">
<div id="donji_razvucen"> </div>
<div id="donji_centralni"> </div>
</div>
</div>
css:
Kôd:
#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 |
22. 04. 2006. 02:31 |
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 |
22. 04. 2006. 16:42 |
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 |
24. 04. 2006. 23:55 |
izgleda da cu morati da radim sa iframe-om i height-om na tabeli! :(
|
| Vreme je GMT +2. Trenutno vreme je 09:30. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.
