divovi i tablice

[dabac]

Sorry za mozebitno krivi naslov teme, no radi se o sljedecem:

Buduci da i dalje radim stranice sa tablicama sa onolikom kolicinom CSS-a koliko mi treba, a toliko svi pricaju - pogotovo na ovom forumu - o tom CSS pozicioniranju (ne znam da li sam se pravilno izrazio, mislim na alternativu tablicama u vezi iskljucive upotrebe divova i CSS-a) da se svako malo okusam u tom pogledu i iznova se opecem i iznova se pitam sto ce mi to u zivotu. Stoga molim vasu pomoc i sugestije:

Napravio sam 2 probne stranice sa 2 stupca - verzija divovi i tablice:

1a) http://www.movie-remakes.com/proba/TEMPLATE_2stupca.htm
1b) http://www.movie-remakes.com/proba/TEMPLATE_2stupcaTablica.htm

Iako sumnjam da u verziji 1a) sve stima, nastojao sam dobiti isti efekt kao i s verijom 1b.
Medjutim, kad bih htio nadopunjavati prvi stupac (div "content1") sa tekstom, on bi prelazio okvire; pokusao sam sa roditeljskim divovima da im dam height 100% bez uspjeha. Pokusao sam i da desnom divu dam float:right ali onda nestane border od diva "contentout".
U svakom slucaju molio bih da mi pomognete:
- gdje grijesim u verziji 1a) (cilj mi je dobiti isti efekt kao u verziji 1b)
- koja je prednost te verzije kad mi je trebalo 3 puta vise vremena da je napravim, a ni nije funkcionalna kako spada - (ovu stavku zanemarite ako mi pokazete kako jednostavno napraviti funkcionalnu verziju 1a)


unaprijed hvala svim dobronamjernima
Dabac


P.S. napravio sam i verzije sa 3 stupca ali se isti problemi desavaju, a i mislim da sam tu jos vise kiksao u verziji s divovima:

2a) http://www.movie-remakes.com/proba/TEMPLATE_3stupca.htm
2b) http://www.movie-remakes.com/proba/TEMPLATE_3stupcaTablica.htm

[Sulien]

Deklariraj DOCTYPE kojeg želiš koristiti (želiš HTML 4)

Align atributi, što će ti to? Horizontalno centriraš sa position:absolute trikom??

Content ti izlazi van jer ne razumiješ float model. Ako floataš neki element onda on neće rastezati svoj parent (kad budeš radio prave layoute bit će ti jasno zašto je tako odlučeno)

http://odin.irb.hr/~mislav/tmp/dabac.html

[dabac]

Sulien wrote:

Align atributi, što će ti to?

Pa kad ne znam kako drugacije jednog stavit lijevo, a drugog desno. Rekoh idem probat obojicu desno a lijevog float left.
BTW, vidim da i ti u svom rjesenju koristis align atribute (<div id="pageout" align="center">)

Sulien wrote:

Horizontalno centriraš sa position:absolute trikom??

Prilagodio sam to na temelju ovog rjesenja:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
a taj si link bas ti dao ranije u forumu, ako se ne varam

Sulien wrote:

Content ti izlazi van jer ne razumiješ float model. Ako floataš neki element onda on neće rastezati svoj parent (kad budeš radio prave layoute bit će ti jasno zašto je tako odlučeno)

Vidi moj prvi odgovor: Nisam uvidio drugi nacin

Sulien wrote:

http://odin.irb.hr/~mislav/tmp/dabac.html

Hvala na trudu, ali ovo nije identicno mom rjesenju. Gornji i doljnji box bjeze nekoliko pixela od bordera centralnog diva. Pretpostavljam da klasi "bla" marginu trebam staviti 0px...

Da li bih trazio previse kad bih te zamolio da mi pokazes i rjesenje za onaj model s 3 kolone? ( http://www.movie-remakes.com/proba/TEMPLATE_3stupcaTablica.htm )

EDIT: ... I sta da radim s onim clearing elementom? kako da ga ubijem? Ako stavim display none ili ako mu izbrisem content, zelena se prelijeva dolje...

EDIT2: Probao sam marginu od "bla" staviti 0px, medjutim u firefoxu se ne desava nikakva promjena... Molim te da jos jedanput napravis rjesenje identicno mom primjeru s tablicama s 2 kolone, samo neka se i jedna i druga kolona automatski resizea prema dolje dodavanjem contenta

Thanks

Last edited by dabac on 22.12.2006 20:08; edited 1 time in total

[Sulien]

dabac wrote:

Sulien wrote: Align atributi, što će ti to? Pa kad ne znam kako drugacije jednog stavit lijevo, a drugog desno. Rekoh idem probat obojicu desno a lijevog float left. BTW, vidim da i ti u svom rjesenju koristis align atribute (<div id="pageout" align="center">)

oops sorry, zaboravio sam tog pobrisati

Quote:

Sulien wrote: Horizontalno centriraš sa position:absolute trikom?? Prilagodio sam to na temelju ovog rjesenja: http://www.wpdfd.com/editorial/thebox/deadcentre4.html a taj si link bas ti dao ranije u forumu, ako se ne varam

možda i jesam, ali jednostavno centriranje se radi sa left & right marginama = auto

Quote:

Sulien wrote: http://odin.irb.hr/~mislav/tmp/dabac.html Hvala na trudu, ali ovo nije identicno mom rjesenju. Gornji i doljnji box bjeze nekoliko pixela od bordera centralnog diva. Pretpostavljam da klasi "bla" marginu trebam staviti 0px...

well, duh!

Quote:

Da li bih trazio previse kad bih te zamolio da mi pokazes i rjesenje za onaj model s 3 kolone?

da

http://del.icio.us/mislav/css%2Blayouts (probaj prvi resource na listi, svidjet će ti se)

[dabac]

Quote:

Da li bih trazio previse kad bih te zamolio da mi pokazes i rjesenje za onaj model s 3 kolone? da

Fer inaf, ovaj sam odgovor i ocekivao...
Medjutim, molim te da pogledas edit mog posta; ako je to stvarno piece of cake da doradis kako je i original s tablicama...

[sinisa.kusic]

dabac wrote:

Medjutim, molim te da pogledas edit mog posta; ako je to stvarno piece of cake da doradis kako je i original s tablicama...

evoo samo sekund, sad će Sulien to nabrzaka. Da skuham ja kavicu dok čekaš?

[dabac]

sinisa.kusic wrote:

dabac wrote: Medjutim, molim te da pogledas edit mog posta; ako je to stvarno piece of cake da doradis kako je i original s tablicama... evoo samo sekund, sad će Sulien to nabrzaka. Da skuham ja kavicu dok čekaš?

Ne trazim puno, samo da se jedan od najjednostavnijih primjera s tablicama doradi (ispravi) u verziju s divovima, kako bih pohvatao neke konce.
(Nije ovo upuceno direktno Sulienu nego bilo kome tko zna i ima 5 min vremena)
Ako je to too much za vas znalce (najjednostavniji primjer na svijetu) onda si konacno prestajem razbijati glavu s divovima i vracam se tablico tebiiii

Ovo je cijeli kod - varijanta s divovima:

Code:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <style> #pageout {position:absolute; left:50%; top:0px;} #pagein {position:absolute; left:-385px; top:0px; width:770px;} #contentout {border:1px solid #C7D0DE;} #contentin {margin:10px; background-color:#CCFFCC} #content1 {float:left; width:100px; text-align:left; background-color:#CC9966;} #content2 {width:638px; text-align:left; background-color:#CC6666} </style> </head> <body> <div id="pageout" align="center"><div id="pagein">    <div><img src="images/part_up_all.gif" width="770" height="10"></div>    <div id="contentout">       <div id="contentin" align="right">          <div id="content1">aaaaa<br>aaaa</div>          <div id="content2">aaaaa<br>aaaa</div>                </div>    </div>    <div><img src="images/part_dn_all.gif" width="770" height="10"></div> </div></div> </body> </html>

varijanta s tablicama:

Code:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <style> body { padding:0px; margin:0px; } #contentout {border:1px solid #C7D0DE;} </style> </head> <body> <table width="770" border="0" align="center" cellpadding="0" cellspacing="0">   <tr>     <td><img src="images/part_up_all.gif" width="770" height="10"></td>   </tr>   <tr>     <td><table width="770" border="0" cellspacing="0" cellpadding="0" id="contentout">   <tr>     <td height="10" width="10"> </td>     <td width="100"> </td>     <td width="10"> </td>     <td> </td>     <td width="10"> </td>   </tr>   <tr>     <td> </td>     <td bgcolor="#CC9966">aaaaa<br>aaaa</td>     <td bgcolor="#CCFFCC"> </td>     <td bgcolor="#CC6666">aaaaa<br>aaaa </td>     <td> </td>   </tr>   <tr>     <td height="10"> </td>     <td> </td>     <td> </td>     <td> </td>     <td> </td>   </tr> </table> </td>   </tr>   <tr>     <td><img src="images/part_dn_all.gif" width="770" height="10"></td>   </tr> </table> </body> </html>

[nel`chee]

dabac wrote:

Ako je to too much za vas znalce (najjednostavniji primjer na svijetu) onda si konacno prestajem razbijati glavu s divovima i vracam se tablico tebiiii

wtf? kakav ti je to stav?
covjek ti je dao link gdje mozes naci sve sto ti treba, ali ne - gospodinu je pretesko kopati tamo po nekim engleskim stranicama kad ima ovdje ljudi koji ce mu sve dati na pladnju

i fyi, car CSS based layouta je upravo razbijanje glave s div-ovima, no ako ne uzivas u rjesavanju problema mozda nisi dorasao tom zahtjevu...

[yozzzo]

nel`chee wrote:

i fyi, car CSS based layouta je upravo razbijanje glave s div-ovima, no ako ne uzivas u rjesavanju problema mozda nisi dorasao tom zahtjevu...

vidiš nelice... bez ovakvih nepromišljenih i prepotentnih odgovora, ovaj community bi bio puno ljepše place to be.

[retro_one]

yozzzo wrote:

nel`chee wrote: i fyi, car CSS based layouta je upravo razbijanje glave s div-ovima, no ako ne uzivas u rjesavanju problema mozda nisi dorasao tom zahtjevu... vidiš nelice... bez ovakvih nepromišljenih i prepotentnih odgovora, ovaj community bi bio puno ljepše place to be.

ocito nisi odgovorio na dovoljno pitanja na ovom forumu. Jebiga...svi ocekuju od ljudi da svoje znanje serviraju na pladnju i onda se cude jer ti isti ljudi popizde jer za neke ne postoje google / mi3 search / zdrav razum. Ono sto niko ne uzima u obzir je da je odgovaranje na forumu cista dobra volja da sheras s nekim znanje kojim zaradjujes za kruh i za koje si prosao proces razbijanja glave - proces koji ti ljudi odbijaju proc...sry...ali ako smo ja / sulien / nelchee / maratz / itd mogli nauciti sve self researchom...ne shvacam zasto bi za nekog drugog to trebao predstavljati tolki problem...

EOD

[moko]

mislim...covjek je napisao sljedeće

dabac wrote:

Buduci da i dalje radim stranice sa tablicama sa onolikom kolicinom CSS-a koliko mi treba, a toliko svi pricaju - pogotovo na ovom forumu - o tom CSS pozicioniranju (ne znam da li sam se pravilno izrazio, mislim na alternativu tablicama u vezi iskljucive upotrebe divova i CSS-a) da se svako malo okusam u tom pogledu i iznova se opecem i iznova se pitam sto ce mi to u zivotu. Stoga molim vasu pomoc i sugestije...

čudi me da mu je itko i odgovorio!
pa svi pričaju o tome i rade to jer je to bolje. i malo je teže u početku, ali je ušteda vremena prilikom bilo kakve izmjene,prilagodbei optimizacije dizajna nemjerljiva.

@dabac: molim te progooglay i naći ćeš sve predobre razloge za prijelaz na ove tehnologije

ako ti čišći kod, upotrebljiv na raznim platformama za početak nije dovoljan razlog...sumnjam da će ti i drugi razlozi promijenit mišljene, ali to mi je kao da kažeš da server-side tehnologije nemaju smisla jer možemo izrađivat cijele statične stranice za svaki novi sadržaj...

OT: za slušanje uz topic bi preporučio LTJ Bukem "logical progression"

[dabac]

EDIT:
bez komentara

hvala dobronamjernima u prvom redu Sulienu, a ostalima...

a ja opet idem godinama proucavati u tih 15 min dnevno slobodnog vremena CSS pozicioniranje pa se za par godina opet mozda obratim za pomoc ali ne na ovom forumu, mozda nekoj psihijatrijskoj ustavnovi (da, ja to bar priznajem)

a zasad kao sto rekoh, vracam se tablico tebi

[retro_one]

dabac wrote:

a ja opet idem godinama proucavati u tih 15 min dnevno slobodnog vremena CSS pozicioniranje pa se za par godina opet mozda obratim za pomoc ali ne na ovom forumu, mozda nekoj psihijatrijskoj ustavnovi

c'mon stop whining

[moko]

dabac wrote:

a zasad kao sto rekoh, vracam se tablico tebi

ma samo:

1. izbroji koliko redaka ima kod koji si ode stavia u divovima (s tim da bi bilo bolje da je dectype xhtml, a charset utf-8 ), a koliko ovaj u tablicama
2. zamisli da ti klijent kaže da želi kompletni redizajn i ti lipo dođeš i promijeniš samo css i to je to

kužiš odvajanje sadržaja od dizajna to je bit!

uzmi dva vikenda za naučit osnove pozicioniranja i uštedit ćeš sebi cijeli jedan život!
ostalo uči u hodu!

[Tristan]

tako je moko... ja bih radio u divovima da moj dizajner to hoće... al pošto on preferira tablice i neda mu se učit css layouts ja tu ništa ne mogu...
al npr. meni se nije činilo kod nekih jednostavnih primjera ušteda koda, nego tek kada sam napravio cijeli site tako... onda mi je sve bilo jasno...

[dabac]

BlizZ wrote:

tako je moko... ja bih radio u divovima da moj dizajner to hoće... al pošto on preferira tablice i neda mu se učit css layouts ja tu ništa ne mogu...

Bravo BlizZ, ti si konacno pogodio poantu! Ja imam isti problem i zato se i javljam!

I pazi sad: kad dodje do redizajna, onda je to njegov problem da mi izreze u tablice i da HTML kod s tablicama, buduci da samo tako zna. A kako bi se on, moko brate mili, mogao snaci uopce o css pozicioniranju kad se u DWWu to sve vidi razbacano do zla boga...

Medjutim, moj interes da proucim tu tematiku je iskljucivo zato sto samo slusam o tome, a zelim se sam uvjeriti u to. Pa dakle ljudi (to se odnosi na ranije postove) ako vas zamolim da mi u najjednostavnijem primjeru pomognete, pa zar sam odmah zasluzio drvlje i kamenje?

[sinisa.kusic]

@ dabac
dok se ovdje natežeš, kukaš i pravdaš svoju lijenost, mogao si za to vrijeme proučiti linkove koje ti je Sulien dao i do sada već shvatiti kako se neradi o nekom bauku već o jednostavnoj implementaciji web standarda i ubrzanju razvojnog procesa web stranica.

@ Blizz, dabac

Blizz wrote:

tako je moko... ja bih radio u divovima da moj dizajner to hoće... al pošto on preferira tablice i neda mu se učit css layouts ja tu ništa ne mogu... al npr. meni se nije činilo kod nekih jednostavnih primjera ušteda koda, nego tek kada sam napravio cijeli site tako... onda mi je sve bilo jasno...

dabac wrote:

I pazi sad: kad dodje do redizajna, onda je to njegov problem da mi izreze u tablice i da HTML kod s tablicama, buduci da samo tako zna. A kako bi se on, moko brate mili, mogao snaci uopce o css pozicioniranju kad se u DWWu to sve vidi razbacano do zla boga...

Zašto bi netko držao takvog dizajnera?

[Tristan]

sinisa.kusic wrote:

@ dabac dok se ovdje natežeš, kukaš i pravdaš svoju lijenost, mogao si za to vrijeme proučiti linkove koje ti je Sulien dao i do sada već shvatiti kako se neradi o nekom bauku već o jednostavnoj implementaciji web standarda i ubrzanju razvojnog procesa web stranica. @ Blizz, dabac Blizz wrote: tako je moko... ja bih radio u divovima da moj dizajner to hoće... al pošto on preferira tablice i neda mu se učit css layouts ja tu ništa ne mogu... al npr. meni se nije činilo kod nekih jednostavnih primjera ušteda koda, nego tek kada sam napravio cijeli site tako... onda mi je sve bilo jasno... dabac wrote: I pazi sad: kad dodje do redizajna, onda je to njegov problem da mi izreze u tablice i da HTML kod s tablicama, buduci da samo tako zna. A kako bi se on, moko brate mili, mogao snaci uopce o css pozicioniranju kad se u DWWu to sve vidi razbacano do zla boga... Zašto bi netko držao takvog dizajnera?

I am not a boss....

[mile]

samo vi radite u tablicama, one su bolje, right

[pike]

ja bih samo iskoristio prigodu da svima oštro priprijetim da ću počet opet pisat rukom na trgovačkom papiru ako mi ne budete promptno rješavali probleme na koje naletim

[Sulien]

Hehe Nelči je probila 1500 woo!

Ako nemaš element koji će biti clearing element onda jednostavno koristiš "easy clearing". Dodaj parentu (elementu koji sadrži floatove i koji se treba rastezati) ovu klasu:

Code:

.clearing:after {   content:".";   display:block;   height:0;   clear:both;   visibility:hidden; } /* ovo u poseban css samo za IE5-7: */ .clearing { overflow:hidden; zoom:1 }

Quote:

I pazi sad: kad dodje do redizajna, onda je to njegov problem da mi izreze u tablice i da HTML kod s tablicama, buduci da samo tako zna.

Ljudi koji su "samo tako znali" i upoznali mene sad rade sve sa CSS-om, pa možeš mislit koliko je mene diralo što "samo zako znaju" pucalo mi je srce za njih

Charles Darwin wrote:

It is not the strongest of the species that survives, nor the most intelligent, but rather the one most responsive to change.

Nikad ne zaboravi: ne opstaju svi have fun!

[moko]

možda bi u sulienov sticky trebalo dodat razloge...ja bih ih stavio, ali ne smatram se dovoljno dobrim u tome da ih pedagoški nabrojim:)

ista stvar je bila i s iframeom i frameovima...kao olakša posao, a z druge strane se nađeš kako ubacivaš milijon skripti kako bi pokrpao nedostatke.

@dabac: nije bed pomoć, i svakako da je ovo mjesto za tražit je, ali ima ona "daj čovjeku ribu i nahranit ćeš ga za jedan dan, nauči ga lovit ribu i nahranit ćeš ga za cijeli život":

Sulien wrote:

Hehe Nelči je probila 1500 Smile woo!

i to u stilu