Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
CSS padding problem

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
nemogirl



Joined: 27 Oct 2004
Posts: 386
Location: istra

PostPosted: 23.05.2005 13:54    Post subject: CSS padding problem Add user to your forum ignore list Reply with quote

evo, prvi put pokusavam u css napravit sajt. tabless.
najvise mi je problema dao taj bezazleni padding Confused
npr.
imam jedan div koji je definirane sirine.. npr. ovako

<div style="width: 400px; padding: 25px; background-color: #A3D9F8;">proba</div>

e sad. u exploreru mi taj div ostaje 400 px sirok, a u firefoxu se padding zbraja sa sirinom i on postaje 450 sirok !? Mad
kako to rijesit??
probala sam stavit overflow: hidden i onda mi je na trenutak proradilo, ali kad sam promjenila neki drugi div - od onda nikako ne mogu natjerat ga da radi kako ja hocu. i to me uvijek firefox zeza.
please, vi css experts, help!
tnx.
Back to top
View user's profile Send private message
keye



Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France

PostPosted: 23.05.2005 14:09    Post subject: Add user to your forum ignore list Reply with quote

stavi u body margin:0px i padding:0px i odredi line-height tako da ti svuda bude isti default.
nakon toga ti je najbolje u taj div opalit jos jedan div sa transparent bg i u njega staviti samo content a odvojiti ga od glavnog diva sa marginom i paddingom.

probaj pa javi Exclamation

_________________
Google is a blind person
Back to top
View user's profile Send private message Visit poster's website
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 23.05.2005 14:11    Post subject: Add user to your forum ignore list Reply with quote

Imas li definran potpuni DTD na početku tog dokumenta? U quirks mode-u ne želiš započinjati izradu css layouta.

Ovo što opisuješ je koliko me sjećanje služi karakteristično baš za internet explorer, a ne za firefox... Osim ako nisi u quirks modu.

EDIT: http://www.mi3dot.org/forum/viewtopic.php?t=3888 - odlična početna točka za pročitati malo o css-u i svemu što ide uz to...
Back to top
View user's profile Send private message Visit poster's website Twitter profile
keye



Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France

PostPosted: 23.05.2005 14:18    Post subject: Add user to your forum ignore list Reply with quote

zytzagoo wrote:


Ovo što opisuješ je koliko me sjećanje služi karakteristično baš za internet explorer, a ne za firefox... Osim ako nisi u quirks modu.
..


zyt ja sam imala slicnu frku nedavno sa dva stupca i u desnom zeza sirina zbog padinga(doc type deklariran of course) i onda sam muljala bas ovako kao gore pa sam uspjela ispaaviti (donekle).
sve kul, dobro sam prucila taj box-model demo ali nemam neko objasnjenje na zasto mi padding ok u prvom stupcu ali ne u drugom (u dva browsera) Confused

_________________
Google is a blind person
Back to top
View user's profile Send private message Visit poster's website
nemogirl



Joined: 27 Oct 2004
Posts: 386
Location: istra

PostPosted: 23.05.2005 14:32    Post subject: Add user to your forum ignore list Reply with quote

@keye: margine u bodyju su mi na nuli. line-height se isto pokazao nepouzdan pa ga izbjegavam koristit dok ne skuzim u cemu je caka. tako da mi on nigdje nije definiran.
a ovo ostalo... probala sam nesto slicno. ne znam koliko je to pametno, ali sad mi radi.
stavila sam u taj div <span style="position: relative; top 20px; left: 20px; right: 20px; left: 20px">
i tako dobila taj padding bez paddinga, a sirinu sam smanjila za 40 px i dobila tocno sto zelim. imam neki feeling da sam ih prevarila (IE i FF), pa da ce mi to u buducnosti opako vratit... npr. nekim nebuloznim pomicanjem ili... Twisted Evil


@zyt: moram priznati da jos ne kuzim bas taj doctype tj. ne znam koji stavit. ono sto sam procitala o tome na netu nije mi bas pomoglo u definiranju. ja koristim <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> konkretno za taj projekt, i ne znam da li ASP ima kakve veze s doctypom jer imam i ASP koda u stranici...
Back to top
View user's profile Send private message
che.UP
mi3.crew


Joined: 07 Sep 2003
Posts: 2320
Location: zagreb

PostPosted: 23.05.2005 14:45    Post subject: Add user to your forum ignore list Reply with quote

nemogirl wrote:
ja koristim <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> konkretno za taj projekt, i ne znam da li ASP ima kakve veze s doctypom jer imam i ASP koda u stranici...


asp nema veze sa doctyeom ali ovaj koji ti koristis nije potpun jer mu fali link na dtd file...
ovo je ispravan za html 4 transitional:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

_________________
UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX
Back to top
View user's profile Send private message Visit poster's website
nemogirl



Joined: 27 Oct 2004
Posts: 386
Location: istra

PostPosted: 23.05.2005 14:58    Post subject: Add user to your forum ignore list Reply with quote

@che.up:
ok, ali kakve veze ima taj url link ako ja radim i gledam u stranice offline - kako znam da nisam u quirk modu jer mi je neispravan doctype? i lako ja puknem taj url ali mislim da necu vidjet neku razliku.

@everybody: moze li mi netko reci da li je okej taj nacin kojim sam ja rjesila problem ili ce me kasnije negdje opet zezat jer nisam dobro napravila...?!
drugo pitanje: da li je bed ako postavim jednu tablicu: cisto da mi drzi 2 column design pa da mi bude lakse... ili je ipak daleko bolje potpuno izbacit tablice?
Question
Back to top
View user's profile Send private message
keye



Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France

PostPosted: 23.05.2005 15:15    Post subject: Add user to your forum ignore list Reply with quote

nemogirl wrote:


@everybody: moze li mi netko reci da li je okej taj nacin kojim sam ja rjesila problem ili ce me kasnije negdje opet zezat jer nisam dobro napravila...?!

ako radi radi Smile


Quote:
drugo pitanje: da li je bed ako postavim jednu tablicu: cisto da mi drzi 2 column design pa da mi bude lakse... ili je ipak daleko bolje potpuno izbacit tablice?
Question

gle, transitional html ti podrzava strukturalne tablice dakle slobodno napravi sajt u tablicama ali ako vec ides na tabless nece on nista bolje drzati od divisiona kad ih dobro slozis Smile
u sulijenovim resursima cini mi se imas dosta primjera za 2 i 3 column tabless layouta Exclamation

_________________
Google is a blind person
Back to top
View user's profile Send private message Visit poster's website
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 23.05.2005 15:50    Post subject: Add user to your forum ignore list Reply with quote

nemogirl wrote:
ok, ali kakve veze ima taj url link ako ja radim i gledam u stranice offline - kako znam da nisam u quirk modu jer mi je neispravan doctype? i lako ja puknem taj url ali mislim da necu vidjet neku razliku.

Pukni, pa ces vidjeti.
Browser se, ako ne vidi cijeli url (bez obzira jel offline ili online), tj. kompletan i ispravan doctype, baca u quirks mode. I to je razlog tvom problemu sa paddingom.

nemogirl wrote:
@everybody: moze li mi netko reci da li je okej taj nacin kojim sam ja rjesila problem ili ce me kasnije negdje opet zezat jer nisam dobro napravila...?!

Quirks mode je mode u kojem su rezultati renderinga elemenata nepredvidljivi, i browser "pogađa" što si ti htjela napraviti svojim css deklaracijama. Kad je u strict modeu, onda se ponaša po html i css specifikacijama koje poznaje, i ne pokušava (barem ne bi trebao, jel, IE i dalje pogađa) pogađati.
Quote:
drugo pitanje: da li je bed ako postavim jednu tablicu: cisto da mi drzi 2 column design pa da mi bude lakse... ili je ipak daleko bolje potpuno izbacit tablice?

Stavi tablicu ako ti se žuri, pa kasnije pokušaj maknuti tablicu i napraviti skroz bez tablica. Ako želiš nešto naučiti, i shvatiti kako stvari funkcioniraju, onda ti ipak preporučam da pokušaš bez tablice. Teže je, ali ima to i svojih prednosti Smile
Back to top
View user's profile Send private message Visit poster's website Twitter profile
nemogirl



Joined: 27 Oct 2004
Posts: 386
Location: istra

PostPosted: 23.05.2005 16:09    Post subject: Add user to your forum ignore list Reply with quote

hvala svima na savjetima... need some more Sad

puknula sam onaj doctype: i desilo se ovo:
sad mi taj padding 25px i div od 400 px u oba browsera daju 450 sirok div!?
evo primjer code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="width: 400px; padding: 25px; background-color: #A3D9F8;">proba</div>
</body>
</html>


zar ne bi taj div trebao biti 400 px?!!
Back to top
View user's profile Send private message
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 23.05.2005 16:57    Post subject: Add user to your forum ignore list Reply with quote

nemogirl wrote:
zar ne bi taj div trebao biti 400 px?!!

Noup, sad kad si sigurna da si u strict mode-u, prouči css box model:

http://www.ilovejackdaniels.com/css/box-model/
http://www.tanfa.co.uk/css/articles/css-box-model.asp
http://www.w3.org/TR/REC-CSS2/visudet.html

Definranjem width-a, definira se širina samo content dijela, a padding nije content dio, jer u njega ne može doći sadržaj. Pa se element širi za taj prostor padding-a.
Back to top
View user's profile Send private message Visit poster's website Twitter profile
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group