View previous topic :: View next topic |
Author |
Message |
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 25.09.2004 20:20 Post subject: css layout without position: absolute? how? |
|
|
Tricky CSS question
Zna netko kako da napravim ovakav turbo-originalni layout DIVovima:
bez apsolutnog pozicioniranja? |
|
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 25.09.2004 20:54 Post subject: |
|
|
ja bih porbala ovako
sve u "container"
Quote: | <div id="container">
<div id="nav"></div>
<div id="main">
<div id="hea"></div>
<div id="bod"></div>
</div>
</div>
note: nav {float: left} |
onako na brzaka bi trebalo raditi ako nisam nesto falila |
_________________ Google is a blind person |
|
Back to top |
|
|
budha
Joined: 02 Mar 2004 Posts: 1377 Location: Osijek
|
Posted: 25.09.2004 21:09 Post subject: |
|
|
Code: | <div style="float: left; width: 200px; height: 550px; border: 3px solid #FF0000;">nav</div>
<div style="float: left; width: 580px; height: 550px;">
<div style="float: left; width: 100%; height: 150px; border: 3px solid #00FF00;">hea</div>
<div style="float: left; width: 100%; height: 400px; border: 3px solid #0000FF;">bod</div>
</div> | ?
edit: sad tek vidim da je keye napisala brze (i bolje
btw. cemu to? |
_________________ I hate to advocate drugs, alcohol, violence, or insanity to anyone, but they've always worked for me. |
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 26.09.2004 12:32 Post subject: |
|
|
Hvala! Nisam se sjetio grupirati ova dva u jedan div, niti sam znao da svi trebaju floatati lijevo, ne samo nav...
Nisam mogao koristiti apsolutno jer je sve to u još jednom div-u koji ima margin-left i right na auto, znači centriran. Tu dolazi problem jer vaša ideja radi dok se to ne nalazi u nekom drugom div-u, ali ovako se raspadne. Igrao sam se width-ovima jaako dugo dok nisam pogodio kombinaciju kad se to drži skupa i u FF i IE -- na kraju se to svelo na slijepo napikavanje po intervalima od 5 piksela, ali sam uspio, i smeta me što ne shvaćam kako...
Svi znamo za loše renderiranje u IE-u, ali ima nešto u FF što me užasno smeta, a to je kad u tom svom layoutu stavljam padding na neki od div-ova, on ga povećava usprkos apsolutno zadanoj širini. Happened to anyone? Problem je toliki da me stavlja u iskušenje da puknem to u tablicu, ne css... |
|
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 26.09.2004 13:27 Post subject: |
|
|
Sulien wrote: | Tu dolazi problem jer vaša ideja radi dok se to ne nalazi u nekom drugom div-u, ali ovako se raspadne. |
ne kuzim tocno gdje je problem ako je sve u jednom divu koji je centriran.
baci pogled malo na moj sajt uvijek mi je centriran bez apsolutnih pozicija tako da se unutra nema sta puno raspadati |
_________________ Google is a blind person |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 26.09.2004 14:53 Post subject: |
|
|
Sulien wrote: | Svi znamo za loše renderiranje u IE-u, ali ima nešto u FF što me užasno smeta, a to je kad u tom svom layoutu stavljam padding na neki od div-ova, on ga povećava usprkos apsolutno zadanoj širini. Happened to anyone? Problem je toliki da me stavlja u iskušenje da puknem to u tablicu, ne css... :( |
to je zbog razlicitog box modela u IE i FF...
naime, padding po specifikaciji ne spada u sirinu sadrzaja nego se dodaje na nju. http://www.w3.org/TR/CSS21/box.html
znaci da je ukupna sirina boxa = sirina sadrzanja + padding + border + margin
u biti, da te ne zbunim mislim da ces se bolje snac ovdje - http://www.tantek.com/CSS/Examples/boxmodelhack.html
druga bitna stvar, bas sto se tice tog box modela, je da moras imat pravilno definiran doctype (znaci sa urlom do njegovog dtd-a, npr. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) jer jedino tako browser zna koji box model da koristi... tj sa doctypeom stavljas browser u standardni mod, dok bez njega browser renderira onako kako misli da ti hoces a ne onako kako si mu rekao :) |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 26.09.2004 16:03 Post subject: |
|
|
Pa čitao sam, naravno, specifikacije svojevremeno, i Tantek Celik hack sam naučio još davno, samo sam čini se previdio da 'width' određuje širinu contenta, ne boxa thnx Che
Stvar je u tome što sam uvijek radio na IE pa sam se naučio krivo.
@che: pazio sam i na dtd
@keye: ozbiljno, raspalo mi se samo zbog centriranja... ne znam više u kojem browseru. Naravno, ne isključujem mogućnost ljudske pogreške jer su možda širine prevelike, idem sada to složiti kako se spada pa javim |
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 27.09.2004 14:25 Post subject: |
|
|
Evo, zahvaljujući vašoj podršci napravio sam kako se spada
http://nippur.irb.hr/~mislav/euraslic/preview.html
Uljepšavam (volonterski) sajt jedne konferencije za sljedeću godinu, žena mi je rekla da se ne trebam baš ubiti od posla, samo da to izgleda kako-tako, a oni će dodavati sadržaj... Budući da je konferencija o 'open waters - open sources', meni palo na pamet da pitam Vatru da li mogu iskoristiti "Tresak"... i dao mi je, dobar čovjek
Nije neki dizajnerski pothvat ali eto, za na brzinu je dobro... sve je u css-u i drži se dobro, makar ga još moram vjerojatno tweakati za ie5.x
Ima i splash stranica ali nije još gore... |
|
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 27.09.2004 14:41 Post subject: |
|
|
hej mislim da ti je bolje ako definiras cursor:hand u onom acronym-u, nekako mi ovako nema smisla
ideja je dobra ali su mi ove forme malo nesretne, izgledaju mi nabacane bez puno razmisljanja.
i jos onaj menu: font mi je prevelik i tanak, da ti je deblji i manji bio bi ljepsi.
ostalo kul |
_________________ Google is a blind person |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 27.09.2004 16:55 Post subject: |
|
|
keye wrote: | hej mislim da ti je bolje ako definiras cursor:hand u onom acronym-u, nekako mi ovako nema smisla :)
|
bolje onda cursor: help jer ce hand asocirat na link :) |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 27.09.2004 16:56 Post subject: |
|
|
che.UP wrote: |
bolje onda cursor: help jer ce hand asocirat na link |
lapsus calami, htjela sam i ja reci help |
_________________ Google is a blind person |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 27.09.2004 16:57 Post subject: |
|
|
keye wrote: | che.UP wrote: |
bolje onda cursor: help jer ce hand asocirat na link :) |
lapsus calami, htjela sam i ja reci help :D |
da da, sad se izvlaci :) |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 27.09.2004 17:08 Post subject: |
|
|
a moram probat |
_________________ Google is a blind person |
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 27.09.2004 20:25 Post subject: |
|
|
keye wrote: | hej mislim da ti je bolje ako definiras cursor:hand u onom acronym-u, nekako mi ovako nema smisla |
stavljeno, ali očito nije updateano online... acronym ne vrijedi bez kursora
Quote: | ideja je dobra ali su mi ove forme malo nesretne, izgledaju mi nabacane bez puno razmisljanja. |
Bingo.
Quote: | i jos onaj menu: font mi je prevelik i tanak, da ti je deblji i manji bio bi ljepsi. |
I meni je isto ružan. Nisam se još pozabavio time
Hvala na kritikama i pomoći, ispravit ću ove sitnice, a dizajn generalno će ostati kakav jest jer se trenutno nečim drugim sad bavim, a i mislim da je to dovoljno ok za ljude koji će ići na konferenciju -- za koje se usudim reći da im je ukus malo... awkward Jednom sam za sličan seminar (ali ne internacionalan) složio jedan (barem meni) neuspjeli dizajn na kojem je bila (nacrtana vektorima) knjižničarka koja svira klavir (koji je zapravo knjiga) a preko nje snajperski nišan. Konferencija se zvala "ne pucajte u knjižničarku" pa su tako i htjeli; ja nisam baš bio zadovoljan, ali na zadanu temu nisam znao bolje. Meni je dizajn bio neuspjeli, ali polaznici seminara su bili oduševljeni 'idejom'. A da ne govorim o webu... But I'm still young and learning A najviše u životu sam naučio ovdje, na mi3.
|
|
|
Back to top |
|
|
|