| View previous topic :: View next topic |
| Author |
Message |
Trust
Joined: 30 May 2005
Posts: 2
|
 Posted: 31.05.2005 21:06 Post subject: DIV |
  |
|
Pozdrav svima na MI3-u evo ovo je moj prvi post.
Imam jedan problem s visinom div-a.
Naime imam u glavnom DIV-u DIV-ove header i footer a između njih left i main.
E sad neznam kako napraviti da mi se main razvuće po visini do footera ako je left veci od njega i suprotno.
evo mog koda:
| Code: | <html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #F6F6F6;
color: #111111;
font-family: Verdana, Arial, Tahoma, Verdana, sans-serif;
font-size: 12;
}
div#wrap {
position: relative;
margin-left: -385px;
left: 50%;
width: 770px;
background-color: #C0C0C0;
}
div#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
background-color: #8A8A8A;
}
div#left {
float: left;
background-color: #00FF00;
margin: 0px;
padding: 0px;
width: 170px;
max-width: 170px;
height: 100%;
}
div#main {
float: right;
background-color: #F1300E;
margin: 0px;
padding: 0px;
width: 600px;
max-width: 600px;
height: 100%;
}
div#footer {
clear: both;
height: 30px;
background-color: #8A8A8A;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div>
<div style="display: block; position: relative;">
<div id="left">
left
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="main">
main
<p> </p>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html> |
Hvala! |
|
|
| Back to top |
|
 |
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
|
| Back to top |
|
|
Sulien
Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb
|
| Posted: 31.05.2005 22:37 Post subject: |
|
|
Pročitaj TILT. Koristi tablice.
| Dimitri Glazkov wrote: | The secret that CSS gurus have been trying to hide from you
But guess what? The table-driven layouts (if designed properly) pass the "stretchy pants" test with flying colors. Perhaps nobody enunciated the issue better than Andy Budd and Dave Shea in their insurgent strike against us structural markup purists: tables are bad, but they may be necessary to keep the layout intact in real-life conditions. |
Ozbiljan sam. Vidi, nema smajlića.
Vidi.
Ono što ti hoćeš je trend savršenog poravnavanja na koji si naučen zbog godina korištenja tablica za layoute. Sad svi (početnici, a i oni napredniji) koriste CSS i hoće istu stvar. Nema smisla. Ili radi slobodnije i fleksibilnije, ili koristi tablice. |
|
|
| Back to top |
|
|
Pekx
Joined: 09 Sep 2004
Posts: 559
|
| Posted: 31.05.2005 23:41 Post subject: |
|
|
u nekim slučajevima (dosta rijetko, barem kod mene) se nemogu izbjeći tablice, teže ćeš se snaći, ali barem neće pucati site kod ie shita.
iako sam 100%-tni zagovornik CSS-a (koji btw rokaaaa (: jednostavno bez tablica nejde
ps. kako li je samo lijepo vidjeti kod
| Code: |
<div>
<div align"center"> <?php include(header.php'); ?> </div>
<div> <?php include(lijevo.php'); ?> </div>
<div> <?php include(sredina.php'); ?> </div>
<div> <?php include(desno.php'); ?> </div>
<*div>
|
morao sam ovo napisati, sad cu si to u sig bubnuti, ako ne bude preveliko  |
_________________
mp3hr.com |
|
| Back to top |
|
|
bj__
Joined: 09 Nov 2004
Posts: 65
Location: Karlovac
|
| Posted: 31.05.2005 23:54 Post subject: |
|
|
| Pekx wrote: | ps. kako li je samo lijepo vidjeti kod
| Code: |
<div>
<div align"center"> <?php include(header.php'); ?> </div>
<div> <?php include(lijevo.php'); ?> </div>
<div> <?php include(sredina.php'); ?> </div>
<div> <?php include(desno.php'); ?> </div>
<*div>
|
|
a kako je onda jos ljepse vidjeti
| Code: | <div>
<div align"center"> {header} </div>
<div> {lijevo} </div>
<div> {sredina} </div>
<div> {desno} </div>
</div> |
 |
|
|
| Back to top |
|
|
kelso
Joined: 19 Jul 2004
Posts: 507
Location: Zagreb -> Zapruđe
|
| Posted: 01.06.2005 00:01 Post subject: |
|
|
| Sulien wrote: | Ozbiljan sam. Vidi, nema smajlića.
Vidi. |
ti?nevjerujem  |
_________________
Don't drop it! |
|
| Back to top |
|
|
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
| Posted: 01.06.2005 00:48 Post subject: |
|
|
| Pekx wrote: | | : jednostavno bez tablica nejde |
Mora da ne govorimo o istom "web-dizajnu", aaye? |
_________________
Get busy living, or get busy dying. |
|
| Back to top |
|
|
nel`chee
Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka
|
| Posted: 01.06.2005 01:09 Post subject: |
|
|
| Pekx wrote: | | iako sam 100%-tni zagovornik CSS-a (koji btw rokaaaa (: |
ulizica
| Quote: | | jednostavno bez tablica nejde |
ne znas.
| bj__ wrote: | a kako je onda jos ljepse vidjeti
| Code: | <div>
<div align"center"> {header} </div>
<div> {lijevo} </div>
<div> {sredina} </div>
<div> {desno} </div>
</div> |
|
wtf is that? 
(me ignorant  ) |
_________________
♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
| Back to top |
|
|
Sulien
Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb
|
| Posted: 01.06.2005 02:57 Post subject: |
|
|
Idemo riješiti neke stvari, jednom za svagda. Onda ćemo lijepo polinkati ovaj topic iz 'CSS resursa' da ga svi pročitaju i zapitaju se što zaista žele od izgleda sajta.
Većina pitanja na mi3 forumu 'client side' (koja se tiču CSS-a) nisu o tome kako pravilno koristiti npr. min-height (i omogućiti ga za IE); nisu ni o tome kako semantički i vizualno predstaviti navigaciju; ni o tome kako napraviti da se href-ovi hyperlinkova printaju u zagradi kraj njih; ni o tome kako optimizirati stylesheet za handheld uređaje; ni o raznim načinima pravljenja galerije sa floatanim thumbnailovima kakvim se zaista može iskoristiti širina naših predivnih i pretjerano skupih monitora -- da, ogromni monitori nisu samo za PS i 3D, na njima se i web stranice mogu gledati... kome je osim mene dosta beskonačnog skrolanja na 700px širokim sajtovima (sadržaj na njima je još uži zbog sidebar navigacije i dr.) koji ostavljaju cijelih 500px širine prazno sa nekakvim pixel background patternom?
Na mi3 nema ni pitanja mladih web dizajnerskih / developerskih nada o različitim CSS image-replacement tehnikama i semantici i accessibility-u iza istih; niti o različitim praksama postavljanja linkova za preskakanje navigacije (tzv. 'skip links'); niti o korištenju definition listi za pravljenje boljih web formi; nitko ne pita kako da najbolje stilizira eksterne linkove jer (slijedeći standarde) ne koristi 'target=_blank' property.
Većina CSS pitanja na mi3 (u 'client side' forumu) je o tome zašto se nešto raspadne u IE a dobro je u FF, i onda pokaže kôd i screenshot prema kojima se vidi da radi nešto što se inače tablicama radi (ali ne, on je zabrijao na DIV+CSS); zašto se tu pojavi 2px razmaka, a autor je htio bez razmaka da bi se (u PS-u naslajsane) slike spojile; kako se napravi savršeno poravnan 2/3-column layout sa svim kolumnama iste visine; kako da footer bude uvijek na dnu ekrana bez obzira ako je sadržaj kratak (to apsoluno svi žele i nemaju pojma zašto); kako da centrira site vertikalno; kako da oboji scrollbar i promijeni mu širinu; i kako da napravi ultra multicolumn site sa 3 ifrejma i pozadinama koji su svi međusobno polinkani, ali da se na frejmovima ne vide scrollbarovi i sl. Sva ta pitanja (gotovo) popraćena su pejstanjem ogromnog koda u topic sa smješno dugačkim CSS dijelom i gomilom redundantnog HTML markupa da bi se dobilo da je ova linija baš negdje ovdje i ne malo više, a ova slika baš kraj toga, a ovaj bullet baš tamo desno.
Meni sve to izgleda kao da ljudima nedostaje onaj 'tablični trend' sajtova koji se izgradio prošlog tisućljeća pa da žele postići isto, samo ovaj put koristeći CSS jer su čuli da je to dobro. Ali to nije isto. Pristup je drugačiji.
Cijela poanta iza dizajniranja sa standardima je odvojenost sadržaja od prezentacije, web development bez ograničavanja na točno određenu prezentacijsku logiku, eksperimentiranje sa layoutima, sloboda, kreativnost, inovacija, shvaćanja svoje uloge u svijetu.
Pogled nezatrovan modernim trendom bloggera i demoniziranja tablica bi omogućio mnogima da vide da tablice nisu Boogie man web dizajna i da ih treba koristiti za ono čemu služe, čak i u idealnom paralelnom svemiru gdje je CSS3 besprijekorno podržan u svim browserima -- prvenstveno za tablične podatke (tabular data), gdje su podaci prikazani u redovima i stupcima tako da sama pozicija elementa pridodaje njegovom semantičkom značenju; sekundarno za 'grid layouts' koji se mogu (ali nema smisla) napraviti i CSS-om.
Članak Andy Budda koji objektivno i praktično gleda na sve to je već polinkan sa resursa, ali linkam ga još jednom, kao i zgodnu anegdotu simpatičnog, ali u više navrata budalastog Dave Shea. Nelijep članak o linearizaciji, pogrešnom i pravilnom korištenju semantike u HTML tablicama isto možete pročitati, jer sadrži i osvrt na screen readere u cijeloj toj priči.
Poanta svega ovoga je da su tablice naši prijatelji u mnogim slučajevima kao i što su standardi i CSS naši prijatelji (u svakom slučaju). 'Grid layouts', odnosno savršeno horizontalno i vertikalno poravnavanje susjednih box elemenata layouta može se na jedan bezbolan način dobiti sa tablicama tako da se i accessibility očuva, dok se za istu stvar autor namuči kao sam vrag koristeći CSS (stvar dodatno otežava činjenica da je CSS još uvijek slabo podržan i biti će još dugo).
Slična 'kontroverzna' razmišljanja ima i Mike Davidson, njegov članak 'March to Your Own Standard' je svojevremeno podigao dosta prašine i kroz mnogobrojne žestoke komentare se pokazalo upravo ono što je člankom htio reći - da ljudi u stvari ne znaju zašto rade po standardima i misle da je sajt dobar ako validira.
Sada konačno odgovor na originalno pitanje koji je postavio Trust: budući da je praktički nemoguće postići da se DIV element razvlači koliko i njegov određen 'sibling' element, CSS-om je uobičajeno 'fejkati' jednaku visinu kolumna. To se radi na način da se definira jedan pozadinski pattern koji u sebi sadržava pozadinske boje i vertikalne bordere svih kolumni, te se taj pattern provuče kroz cijelu visinu sajta stvarajući privid da su sve kolumne iste visine. Očiti nedostatak te metode je naravno fiksna širina tih kolumni. Druga metoda je ostvarena negativnim marginama i debelim borderima i dosta je komplicirana jer u praksi ima dosta hackova (prvenstveno za IE). Kombinaciju to dvoje možeš vidjeti na www.best.hr, ali nisam nimalo ponosan na to (saznat ćeš zašto sa jednim quick preletom preko css-a). Naći ćeš sve linkove na mi3 CSS resursima. Moj savjet je da pristupaš izgradnji stranice bez početnog ograničavanja na razna poravnavanja dok ne prikupiš svo znanje o mogućnostima i nemogućnostima client side 'tehnologija' (xhtml, div-ovi, tablice, css pozicioniranja, margin collapsing, negativne margine, JavaScript DOM) te se zeru mudriji jednom vratiš na početan problem (ako želiš) i uradiš ga kako se spada. Nije sve to ništa strašno (strašna je samo nepodržanost), većina tih stvari je u suštini jako lijepa.
By the way, welcome to mi3 uvijek pitaj sve što te zanima, naravno prije toga napravi search na forumu jer se već o puno 'popularnih' stvari raspravljalo, goggle također daje jako dobre rezultate za specifične stvari jer je web prepun predobrih sajtova / blogova o web dizajnu i standardima.
| bj__ wrote: | | Pekx wrote: | ps. kako li je samo lijepo vidjeti kod
| Code: | | <div align"center"><?php include(header.php'); ?></div> |
|
a kako je onda jos ljepse vidjeti
| Code: | | <div align"center">{header}</div> |
|
da, ali mislim da je ipak najljepše vidjeti nešto pravilno:
| Code: | | <div style="text-align:center;">{header}</div> |
@nelči: templating engine, uobičajena sintaksa kod mnogih (Smarty, phpLIB, ...)
Just remember, kids -- drugs are bad  |
|
|
| Back to top |
|
|
carr
Joined: 13 Nov 2003
Posts: 1397
Location: Karlovac
|
| Posted: 01.06.2005 09:37 Post subject: |
|
|
| Sulien wrote: | | Sada konačno odgovor na originalno pitanje koji je postavio Trust: budući da je praktički nemoguće postići da se DIV element razvlači koliko i njegov određen 'sibling' element, CSS-om je uobičajeno 'fejkati' jednaku visinu kolumna. To se radi na način da se definira jedan pozadinski pattern koji u sebi sadržava pozadinske boje i vertikalne bordere svih kolumni, te se taj pattern provuče kroz cijelu visinu sajta stvarajući privid da su sve kolumne iste visine. Očiti nedostatak te metode je naravno fiksna širina tih kolumni. Druga metoda je ostvarena negativnim marginama i debelim borderima i dosta je komplicirana jer u praksi ima dosta hackova (prvenstveno za IE). |
bilo bi dobro spomenuti
display: table i display: table-cell?
barem teoretski, znam da ga IE ne podrzava, njemu uvalim neki <!--[if IE]> s floatanjem. |
_________________
Bolje biti malo lud, nego malo pametan. |
|
| Back to top |
|
|
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
| Posted: 01.06.2005 09:55 Post subject: |
|
|
| Onaj Koji Puno Priča wrote: | | ...kao i zgodnu anegdotu simpatičnog, ali u više navrata budalastog Dave Shea. |
 |
_________________
Get busy living, or get busy dying. |
|
| Back to top |
|
|
keye
Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France
|
| Posted: 01.06.2005 10:19 Post subject: |
|
|
| Sulien wrote: | kome je osim mene dosta beskonačnog skrolanja na 700px širokim sajtovima (sadržaj na njima je još uži zbog sidebar navigacije i dr.) koji ostavljaju cijelih 500px širine prazno sa nekakvim pixel background patternom?
|
gle, ako ti imas siroki ekran to ne znaci da ga svi imaju.
pricas o full screen dizajnu?
eh pa da. meni ga je iskreno receno stvarno dosta.
dizajn mi je totalno ogranicen i u principu sa velikim izborom rezolucija nitko na ktaju nije zadovoljan osim one uze grupe ljudi koji imaju rezoluciju 1024. (za one sa 800X600 biti ce preveliko, za one sa 1280 pa i vise biti ce preraspresno).
osobno: probala vise puta i uvijek neke nesretne kombinacije.
dakle sirina fiksna i rolaj na nize.
a na kraju svega.. sve ovisi o kontekstu, zar ne?
| Quote: |
Na mi3 nema ni pitanja mladih web dizajnerskih / developerskih nada o različitim CSS image-replacement tehnikama i semantici i accessibility-u iza istih; niti o različitim praksama postavljanja linkova za preskakanje navigacije (tzv. 'skip links'); niti o korištenju definition listi za pravljenje boljih web formi; nitko ne pita kako da najbolje stilizira eksterne linkove jer (slijedeći standarde) ne koristi 'target=_blank' property. |
jasno da nema.
logicno je da nema.
u hrvatskoj pojam pristupacnosti jos nije poprimio adekvatne razmjere i kad to kazem mislim na birokracijski dio administracije, mislim na zakone koji odredjuju da sajtovi moraju biti pristupacni.
ok, ti pricas o semantici a ja se pitam koliko ljudi u hrvatkoj upotrebljava jaws ili hpr i braille browsere? kolikose ljudi sa fizickim ili mentalnim hendikepom sluzi kompjuterom i internetom?
mozda bilo bi bolje pricati o pristupacnosti sajtova juzerima koji imaju 56K modem ili koji surfaju bez javascripta?
sto zelim time reci?
da je semnaticki dio (koji je u stvari jako vazan kod interpretacije za odredjene browsere) dosta nebitan u odnosu na malo vaznije stvari sto se tice hrvatskog weba: znaci upotreba flasha (stariji browseri ili stariji kompjuteri) i tezina stranice (ne preko 70KB da bi bila zaista pristupacna).
nemoj me krivo shvatiti, ne zelim reci da semanticki dio nije bitan, ali u odnosu na ono na sto hrvatski web-dizajneri-masteri-developeri moraju misliti (bar dok rade za hrvatsko trziste) su sasvim drugi problemi.
meni recimo najvise ide na zivce kad stave one sitne fontove u pixelima pa se ti pomuci da procitas dok je baza pristupacnosti regulacija velicine fonta kako kome odgovara.
pristupacnost je i kontrast boja prije svega a to je u 80% slucajeva totalno zanemarena stvar. ljudi koji slabije vide, ljudi koji imaju bilo kakvu vrstu daltonizma npr (a omjer tih porblema kod muzkih surfera je 1:5).
Dakle pocnimo pricati o pravom accessibilitiju, ono na sto bi stvarno trebalo misliti ako se misli na surfere a ne se fokalizirati ne nesto sto je kul ok, google jako voli semantiku i strukturaciju teksta, ali osrednji surfer sa 56K bi mozda ipak vise volio da je sajt lagan i da moze izregulirati za svoj font vellicinu koja mu odgovara.
eto sad smo totalno OT |
_________________
Google is a blind person |
|
| Back to top |
|
|
maratz
mi3.crew
Joined: 24 Nov 2003
Posts: 1207
Location: ZAG
|
| Posted: 01.06.2005 13:12 Post subject: |
|
|
Suliena za domaćina!!1
Stvarno, nije nekli bed složit tablicu s pet cellova za tri kolone s headerom i footerom, ako već ne ide CSS-om. Pukneš !DOCTYPE u transitional i 'deklarirao' si se kao newbie. Ljudi će ti oprostiti. Mislim... to je u slučaju da je motiv za izradu tabeless layouta čista kulerština i želja za slavom. |
_________________
STOP HITTING YOURSELF! | NETIQUETTE | TYPETESTER | Hypertext rulez™ | CREATIVE NIGHTS | ACCOMMODATIONS |
|
| Back to top |
|
|
nel`chee
Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka
|
|
| Back to top |
|
|
|
Forum FAQ
Search
Memberlist
Forum ignore list
Register
Profile
Log in to check your private messages
Log in
