Padding ?

[ misk0 @ 23.10.2003. 15:12 ] @

Ako za DIV podesim CSS i napishem padding: 10px ili padding-left: 10px IE uredno odmakne text od ivice, a NN poveca DIV za tu vrijednost, tj width ili height u zavisnosti koji je padding koristen ?

Kako to rijesiti ? Opasno me nervira!! :)

[ Ivan Stanojevic @ 23.10.2003. 23:53 ] @

nemoj da koristis padding i resio si problem....

[ bluesman @ 24.10.2003. 00:09 ] @

lol :) Ivane, sto ti je resenje... do ЯЯ :-)) Fenomenalno...

Zeza me auto nece da pali. Nemoj da koristis auto i resio si problem :-))

@misko: Nisi rekao koji NN? Koja verzija jer su velike razlike u verzijama. Stari NN dodaju po 3 piksela za pading i ostavljaju rupu izmedju background i bordera za sirinu paddinga (ko je ovo shvatio ima pivo).

[ arsa xx @ 24.10.2003. 00:31 ] @

ja nisam shvatio ili jesam ako pod background podrazumevas "parent html element" (div,table...)
Imam li pivo?

[ bluesman @ 24.10.2003. 01:17 ] @

Nisi shvatio, ali za to sam kriv ja pa 'ajde imas pivo. :-)

Ako stavis background za div i jos dodas border i padding, izmedju tog bordera i pozadine tog diva postoji (u NN) rupa od 3 piksela kroz koju se providi pozadina dokumenta. Jel' sada jasnije? Onda imam ja pivo. Opet, kazem ne u svim verzijama NN.

[ misk0 @ 24.10.2003. 01:29 ] @

bluesman :
koristim 7.1 znaci poslednji (ima sedmicu dana kako sam ga skinuo)
Ne koristim border i bg, vec hocu da text odmaknem od ivice
koristim 'left-padding'

[ Rodd @ 24.10.2003. 17:24 ] @

Problem je u razlici kapiranja CSS-a za IE i Mozillu (Netscape)

Za razliku od IE, Mozilla sirinu kapira ovako:

sirina objekta = width + left padding + right padding

Nema pametnog resenja za ovo osim:

- Ivanovog (ma kako to cudno bilo) - ako mozes, koristi margine na objektima unutar tog lejera, a njemu padding postavi na 0.

- napravi odvojeni CSS za IE i Mozillu, pri cemu ces u Mozillinom CSS-u sirinu tog lejera podesiti da bude manja za (left padding + right padding) od sirine u IE CSS-u. Zatim mozes da koristis neki JavaScript koji ce da proverava koji je browser u pitanju pa da, na osnovu toga, ucitava odgovarajuci CSS kod, bilo iz stylesheet fajla ili da ga upisuje direktno u dokument.

Samo jos da prokomentarisem da je ovo jedna od najdebilnijih stvari na koje sam naisao kod Mozille, iako sam negde procitao kako oni tvrde suprotno.

[ CONFIQ @ 24.10.2003. 18:03 ] @

Ne koristi odvojeni CSS za različite brosvere NIKAD!

Daj mi mali primer šta to ne radi u mozili pa ću da ti napišem kako treba.

Je si probao margin-left?

~Say FiQ

[ misk0 @ 24.10.2003. 20:20 ] @

Citat:

CONFIQ:
Daj mi mali primer šta to ne radi u mozili pa ću da ti napišem kako treba.

definisi neki layer sa njegovim dimenzijama width, height. i
pored njega stavi isti takav .
i onda u jedan dodaj padding-left:10px

i pogledaj ralziku :)

u vishe browsera

[ misk0 @ 24.10.2003. 20:27 ] @

Vezano za ovo
Kako odvojiti text u <TD>u od ivice ?
ako moze beze &nbsp ?
tu mi treba padding.
left-margin ne radi .. na TDu

[ arsa xx @ 24.10.2003. 21:37 ] @

Nemas izbora pading:0 i koristi margin na objekte koji se nalaze unutar div ili td tag-a.
Mislim da je pravljenje odvojenih stilova naporniji posao negoli malo koncentracije da se uradi jedan koji ce biti funkcionalan u svim(popularnim) citacima.

Inace sto se tice padding-a netscape 7.1 se pridrzava preporuka www.w3.org a IE i Opera nazalost ne.

Nemogu da se setim koji mi je moderator dao ovaj link. Evo ja da ga ponovim. Koristice ti. Meni barem jeste.
http://www.w3.org/TR/CSS1#block-level-elements

[ Ivan Stanojevic @ 24.10.2003. 22:04 ] @

zasto jednostavno ne koristite tabele

[Ovu poruku je menjao Ivan Stanojevic dana 25.10.2003. u 13:56 GMT]

[ Trunks @ 25.10.2003. 01:31 ] @

Citat:

Ivan Stanojevic:
zasto jednostavno ne koristite tabele ko svi normalni ljudi

Ne počinji tu raspravu molim te (ali ako te zanima, tabele su namenjene za tabelarno ispisivanje podataka, a CSS za pozicioniranje).

[ -zombie- @ 25.10.2003. 03:16 ] @

Citat:

Ivan Stanojevic:
zasto jednostavno ne koristite tabele ko svi normalni ljudi

kako profesionalan odgovor, skoro kao i onaj prvi...

elem, ajde mi molim te objasni nešto. zašto ti, i ljudi slični tebi, koji volite flash iz dna duše, i trudite se da ga popularišete i koristete, kao naprednu, novu i mnogo bolju tehniku od starog html-a, nikako ne prihvatate CSS isto kao naprednu i mnogo bolju tehniku od starog html-a (sa sve tabelama).

nikada mi nije bila jasna ta veza...

a odgovor pokretaču teme, nije tu IE prav a NN kriv (btw, više ne postoji NN, postoji samo mozilla), nego obrnuto. potraži na google:css+box+model+hack

[ Rodd @ 25.10.2003. 11:25 ] @

Citat:

-zombie-:
potraži na google:css+box+model+hack

Odlicno! Evo iz prve sam nasao http://tantek.com/CSS/Examples/boxmodelhack.html. Za ovu foru nisam znao. Hvala.

Inace, istina je da IE ovde krsi pravila ali meni se vise svidja nacin na koji on to kapira.

Najveci problem mi je uvek kada layeru koji ima sirinu izrazenu u procentima zadam padding. Mozilla njemu dodaje taj padding na sirinu sto je katastrofalno, a ja pri tome ne mogu da znam tacnu sirinu u pikselima. Tada mi ostaje samo JavaScript ili da ne koristim padding. Da li ja ovde ispadam glup mozda?

[ CONFIQ @ 25.10.2003. 11:36 ] @

Citat:

misk0:
definisi neki layer sa njegovim dimenzijama width, height. i
pored njega stavi isti takav .
i onda u jedan dodaj padding-left:10px
i pogledaj ralziku :)
u vishe browsera

Ovako nešto?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>boring...</title>
</head>
<body>
<style>
#mozila {
    border: thin solid red;
    width: 100px;
}
#prvi {
    border: thin solid Black;
}
#drugi {
    border: thin solid Blue;
    padding-left: 10px;
}
</style>
<div id=mozila><div id=prvi>prvi</div><div id=drugi>drugi</div></div>
</body>
</html>

Evo radi u svim brosverima? demo

~Say FiQ

[ Ivan Stanojevic @ 25.10.2003. 11:53 ] @

posto tabele rade kako treba na svim mogucim browserima a css ne, ja koristim tabele... css koristim uglavnom za odredjivanje stila fonta...

Zombie:
Ja nemam nista protiv starog HTML-a, odakle ti to? Jesam za flash ali samo tamo gde ima smisla...

[ misk0 @ 25.10.2003. 15:20 ] @

Citat:

CONFIQ:
Ovako nešto?

Ne, nego nesto ovako

Code:

<html>
<head>
<title>boring...</title>
<style type="text/css">
.prvi {
border: thin solid black;
width: 100px;
}
.drugi {
border: thin solid black;
width: 100px;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="prvi">prvi</div><br>
<div class="drugi">drugi</div>
</body>
</html>

[ misk0 @ 25.10.2003. 15:20 ] @

Citat:

Ivan Stanojevic:
posto tabele rade kako treba na svim mogucim browserima a css ne, ja koristim tabele... css koristim uglavnom za odredjivanje stila fonta...

Oki, pitao sam vec ... kako odvojiti slova od ivice ne koristeci &nbsp
tome sluzi inace padding .

[ arsa xx @ 25.10.2003. 16:30 ] @

Onda koristi padding...

[ misk0 @ 25.10.2003. 17:00 ] @

Citat:

arsa xx:
Onda koristi padding...

Ponovo procitaj diskusiju od pocetka.... padding je problem ...

[ CONFIQ @ 25.10.2003. 22:58 ] @

Citat:

misk0:

Citat:

CONFIQ:
Ovako nešto?

Ne, nego nesto ovako
.....

Pa da, znači problem je rešen

Code:
<html>
<head>
<title>boring...</title>
<style type="text/css">
#skup {
width: 100px;
}
.prvi {
border: thin solid black;
}
.drugi {
border: thin solid black;
padding-left: 10px;
}
</style>
</head>
<body><div id=skup>
<div class="prvi">prvi</div><br />
<div class="drugi">drugi</div></div>
</body>
</html>

Znači definiši još jedan box preko i završio si problem....
CcCc ble budi malo maštovit, znaš kako kažu... Mašti nikad kraja :Đ

[ misk0 @ 26.10.2003. 00:39 ] @

Citat:

CONFIQ:
Pa da, znači problem je rešen

Nije, ti si uzeo proizvoljnu duzinu unutrasnjih layer-a
Probaj staviti sliku kao BG nesto poput ovog koda ispod
pa ces vidjeti kako se layer prosiruje.
Tj u IE je jedna a u NN druga slika :)
nadji sliku duzine 400px (ja sam koristio u primjeru
Uglavnom podesi da ti layer bude duzine slike i ukljuci
padding-left pa vidi :)

Code:
<html>
<head>
<title>boring...</title>
<style type="text/css">
.proba {
  width:400px;
  }
.prvi {
  border:1px solid black;
  padding:0px;
  background: url("first_bg.gif");
  width:400px;
  color: white;
}
.drugi {
  border:1px solid black;
  padding-left:10px;
  background: url("first_bg.gif");
  width:400px;
  color: white;
}
</style>
</head>
<body>
<div class="proba">
<div class="prvi">prvi</div><br>
<div class="drugi">drugi</div>
</div>
</body>
</html>

Citat:

CONFIQ:
Znači definiši još jedan box preko i završio si problem....
CcCc ble budi malo maštovit, znaš kako kažu... Mašti nikad kraja :Đ

Jesam mastovit, ali ne radi ...

[ Zoran Rašković @ 26.10.2003. 15:30 ] @

Citat:

Ivan Stanojevic:
posto tabele rade kako treba na svim mogucim browserima a css ne, ja koristim tabele... css koristim uglavnom za odredjivanje stila fonta...

Nisi ti još uvek shvatio punu moć css-a.

[ -zombie- @ 27.10.2003. 03:01 ] @

Citat:

Rodd:
Najveci problem mi je uvek kada layeru koji ima sirinu izrazenu u procentima zadam padding. Mozilla njemu dodaje taj padding na sirinu sto je katastrofalno, a ja pri tome ne mogu da znam tacnu sirinu u pikselima. Tada mi ostaje samo JavaScript ili da ne koristim padding. Da li ja ovde ispadam glup mozda?

ne, to nije katastrofalno. to je po pravilima (tj kako je zamišljeno da se radi). ako ti treba pomeranje ka unutra, za to ti je margina, ako ti treba ka spolja, za to ti je padding.

koristi pravi "alat" za pravu stvar.

a i btw, zašto ne bi mogao i padding da izraziš u procentima u tom slučaju?

[ Rodd @ 27.10.2003. 03:38 ] @

Citat:

-zombie-:
ne, to nije katastrofalno. to je po pravilima (tj kako je zamišljeno da se radi). ako ti treba pomeranje ka unutra, za to ti je margina, ako ti treba ka spolja, za to ti je padding.

Pa, svejedno je. I marginu i padding Mozilla dodaje na sirinu.

Citat:

-zombie-:
a i btw, zašto ne bi mogao i padding da izraziš u procentima u tom slučaju?

Pa, moze ponekad, ali u vecini slucajeva mi treba neki fiksni padding u pikselima.

Jedino resenje koje mi se namece je da stavim layer unutar layera (cini mi se da si to bas ti pomenuo), pa da spoljnji ima sirinu u procentima i padding 0 a unutarnji da nema zadatu sirinu a ima zadati padding. Ali, po meni, to je prekomplikovanje jedne jako jednostavne stvari. Ipak mislim da su mikrosoftisti ovde u pravu.

[ -zombie- @ 27.10.2003. 19:57 ] @

Citat:

Rodd:
Pa, svejedno je. I marginu i padding Mozilla dodaje na sirinu.

hmm.. ne znam šta mi bi sinoć. naravno da se i margina dodaje. ne znam samo odakle mi ono ;)

zvanično, ako neko pita, vadim se na to što sam i dalje bolestan, pod temperaturom i lekovima ;)

a da, i bolela me glava sinoć ;)

nego, što se drugog tiče, naravno da "majkrosoftanci" (šta je to, neko novo pleme ;) nisu u pravu. ako podržavaš neki standard, onda ga podržavaj kako piše u standardu, a nemoj da ga menjaš zato što ti misliš da je nešto bolje.

inače, koliko sam upućen, css3 će imati ovu opciju, tj obe opcije, moći će da se zadaje "unutrašnja dimenzija" (kao što je sada po standardu), a dodaće i zadavanje "ukupne dimenzije" (kao što to ie radi).

[ Dag @ 15.01.2004. 22:45 ] @

Citat:

Judge Dred:

Citat:

Ivan Stanojevic:
posto tabele rade kako treba na svim mogucim browserima a css ne, ja koristim tabele... css koristim uglavnom za odredjivanje stila fonta...

Nisi ti još uvek shvatio punu moć css-a.

:)))

Ma shta ce ti Ivane CSS za fontove brate mili... uzmesh jednostavno:
<font size=4pxs color=rosetas>Moj tekst i normalno zatvorish font</font>

[ noviKorisnik @ 16.01.2004. 08:01 ] @

Citat:

-zombie-:
inače, koliko sam upućen, css3 će imati ovu opciju, tj obe opcije, moći će da se zadaje "unutrašnja dimenzija" (kao što je sada po standardu), a dodaće i zadavanje "ukupne dimenzije" (kao što to ie radi).

Šta? inner i outer width? Cela pričica s lepim cssom koji se razvija tako što se gomilaju stvari koje se potom nazivaju standardima koji se potom poštuju ukoliko odgovaraju...

Gde je sada tu border? I on ulazi u celu priču za određivanje dimenzije. Po standardu, ukupna širina koju zauzima element je: leva margina + levi border + levi padding + prava širina + desni padding + desni border + desna margina.

Ima li ko zna da imenuje browser koji će renderovati border izražen u procentima?

Ako ne, ima li ko da objasni kako dobiti 100% širine ekrana sabiranjem širina dva do tri elementa koji koriste border koji nije izražen u procentima?

Border širine 1% ne bi delovao elegantno, ali bi makar mogao da se koristiti za računicu - koja ovako, čini mi se, ne postoji.

[ -zombie- @ 16.01.2004. 12:50 ] @

pa pazi, ideja CSSa nikad nije ni bila da zameni tzv "pixel dizajne" gde sve mora biti tačno u pixel poravnato i sređeno..

css je mnogo flexibilniji, tečniji ako više volite, i pri radu sa njim treba primarno koristiti relativne veličine, najviše EMove pa procente.. sve ovo sa ciljem da bi dokument izgledao bar upotrebljivo (ako ne i jednako lepo) na različitim medijim (ekran, papir, ..) sa različitim rezolucijama i veličinama slova..

zato, ako i ne možeš da uklopiš da ti dizajn bude tačno 100% širok, našteluj ga na 98-99%, i miran si u većini browsera/medija/rezolucija/veličina fontova...

[ noviKorisnik @ 16.01.2004. 13:43 ] @

Praktično se tako radi, da. Pitao sam postoji li rešenje da se ne radi tako... Čini mi se postoji, kroz analizu kockanja tagova na stranicu, ugnježđavanje, itd. Našlo se rešenje i za padding kroz ugnježđavanje, nije teško ako ne može lakše.

Nekako css vidim kao mogućnost da stranica izgleda lepo i u prikazu i u kodu.

Međutim: http://tantek.com/CSS/Examples/boxmodelhack.html
- ne da mi se ne sviđa, nego mi se ne sviđa nikako...

[ Dag @ 16.01.2004. 17:23 ] @

Citat:

noviKorisnik:
Međutim: http://tantek.com/CSS/Examples/boxmodelhack.html
- ne da mi se ne sviđa, nego mi se ne sviđa nikako...

U principu, korisno je znati da browseri razlichito tumache granice boksova / blokova (re: borders, margin, padding). Ali se slazhem sa tobom: taj hack je toliko, imho privremen (mali PR prijatelja w3Orga). Odgovor je u zombijevoj frazi (a negde postoji i super citat toga:) da "Internet programranje (pisanje koda, pubishing...) nikako nije programiranje svakog piksela u svakom browseru". Tako da je taj hack primenljiv iskljuchivo kada je rech nekim advanced sistemima sa fixed with... iskreno: ja na test stranicama imam menu koji je dosta zafiksiran i radi dosta dobro u mnogim brow. i nigde ne koristim taj hack. Verovatno pristup treba da bude neshto kao: "Ostavi browseru da sam renduje / pokazhe / calculate shto vishe mozhesh."

Citat:

noviKorisnik:
Nekako css vidim kao mogućnost da stranica izgleda lepo i u prikazu i u kodu.

U principu neshto tako... tj: CSS ti omogucuje da pravish pravilnu stranicu sa logichnim SGML koja ce izgledati kao perfektni dokument bez CSS a s CSS mozhesh da radish posle apsolutno shta hocesh.

Bash kao prezentaciju te ideje (da stil prezentacije ne treba nikako da zavisi od source / koda stranice) napravio sam i mali php switcher. Ako se nekome dopada, neka se javi (cookie based - not published in internet).
http://orwell.ru/test/CSS/switch/

By the way, takve igre sa CSS su nemoguce kada se za dizajn / prezentaciju ne-tabularnih stranica / podataka koristi table