| View previous topic :: View next topic |
| Author |
Message |
fanatic
Joined: 02 Nov 2004
Posts: 81
Location: vienna
|
 Posted: 15.10.2006 18:21 Post subject: css centriranje, header pomaknut za 1px |
  |
|
Vjerojatno se radi o opcepoznatom bug-u (ili pak ja radim kardinalnu glupost) ali ako centriram content na poznati nacin, pa za header koristim background jpeg, taj se background jpeg pomice za 1px u lijevo u (firefox-u, IE je oke) kao na slici:
http://peeksey.bravehost.com/primjer.jpg
Ovdje je primjer:
http://peeksey.bravehost.com/
Primjetio sam da ako risajzam browser, da je u odredjenim polozajima header pozicioniran ispravno. Kod IE je upravo obrnuto, samo u odredjenim pozicijama dobijam taj shift u lijevo za 1px.
Ima netko neku ideju?
kod:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
background: #699e1d url(bgr.jpg) repeat-y 50% 0px;
text-align: center;
}
#wrapper {
width: 769px;
margin: 0px auto;
}
#header {
background: #699e1d url(header.jpg) no-repeat;
text-align: left;
height: 130px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
</div>
</body>
</html> |
Last edited by fanatic on 15.10.2006 21:59; edited 1 time in total |
|
|
| Back to top |
|
 |
sinisa.kusic
Joined: 26 Jul 2005
Posts: 728
Location: Rijeka
|
| Posted: 15.10.2006 18:29 Post subject: |
|
|
prva stvar:
| Code: |
background: #699e1d url(bgr.jpg) repeat-y 50% 0px;
|
poziciju pozadinske slike nemožeš zadati u pikselima.. samo u postotcima ili riječima ( top , botttom ... )
druga stvar i vjerojatno riješenje:
Pozadinsku sliku stavi u wrapper pa ti scrollbar neće stvarati probleme i pomicati pozadinsku sliku u ljevo kod dužeg sadržaja |
_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them |
|
| Back to top |
|
|
fanatic
Joined: 02 Nov 2004
Posts: 81
Location: vienna
|
| Posted: 15.10.2006 18:53 Post subject: |
|
|
pokusao sam ovo, bez uspjeha:
| Code: | body {
background: #699e1d url(bgr.jpg) repeat-y center top;
text-align: center;
} |
ako prebacim background jpeg u wrapper onda imam, ako se ne varam, min-heigh problem, to jest background jpeg se razvlaci samo onoliko koliko je dug content, ne? |
|
|
| Back to top |
|
|
sinke
Joined: 02 Oct 2005
Posts: 257
Location: Zagreb
|
| Posted: 15.10.2006 19:06 Post subject: |
|
|
| feelfree wrote: | | poziciju pozadinske slike nemožeš zadati u pikselima.. samo u postotcima ili riječima ( top , botttom ... ) |
 |
_________________
THE SHTANZIG | Web Do's & Don'ts |
|
| Back to top |
|
|
:cosmos:
Joined: 12 Sep 2003
Posts: 2098
Location: México
|
| Posted: 15.10.2006 19:17 Post subject: |
|
|
| feelfree wrote: |
poziciju pozadinske slike nemožeš zadati u pikselima.. samo u postotcima ili riječima ( top , botttom ... ) |
 |
|
|
| Back to top |
|
|
Tristan
Joined: 01 Aug 2006
Posts: 614
Location: Under the sky
|
| Posted: 15.10.2006 21:30 Post subject: |
|
|
| I stavi da ti header bude širok neki paran broj... |
_________________
Carpe diem... |
|
| Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005
Posts: 728
Location: Rijeka
|
| Posted: 15.10.2006 21:30 Post subject: |
|
|
radiš css layout a razmišljaš u tablicama. mislim da je to tvoj jedini problem .... ( uz nepoznavanje css-a )
možeš, ako baš moraš... zadati 100% visinu wrapperu dati mu ulogu body-a, al osobno mislim da to nema smisla. Nemam konkretan primjer za ovo što sam naveo, potraži po netu pod pojmom 100% height div . Alii nebi ti preporučio da to radiš, jer koliko ja znam, buguvito je + to je ponašanje tablice a ne divisiona. |
_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them |
|
| Back to top |
|
|
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
| Posted: 15.10.2006 21:41 Post subject: |
|
|
@feelfree: "Ponašanje" tablice je da stoji mirno i drži ćelije tam di trebaju bit.
@fanatic: zakaj te margine na body-ju? Ti je XHTML valid? |
_________________
Get busy living, or get busy dying. |
|
| Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005
Posts: 728
Location: Rijeka
|
| Posted: 15.10.2006 21:49 Post subject: |
|
|
| red wrote: | | @feelfree: "Ponašanje" tablice je da stoji mirno i drži ćelije tam di trebaju bit. |
Do nedavno svi smo radili table layout i ja sam mislio na takvo ponašanje tablice ( kao layout tablice ), pardon. Isti je slučaj sa zahtjevima za fiksni footer na dnu stranice ( navika od tablica ).
- nije semantički ali smo svi to radili. |
_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them |
|
| Back to top |
|
|
Tristan
Joined: 01 Aug 2006
Posts: 614
Location: Under the sky
|
| Posted: 15.10.2006 22:01 Post subject: |
|
|
| Al kak rješit taj jedan pixel?? |
_________________
Carpe diem... |
|
| Back to top |
|
|
fanatic
Joined: 02 Nov 2004
Posts: 81
Location: vienna
|
| Posted: 15.10.2006 22:18 Post subject: |
|
|
@red: margine u body-ju su tu slucajno, pokusavao sam svasta pa zaboravih izbrisati. ali ne mijenjaju nista na stvari i normalno prolazi validaciju.
@feelfree: ma kakve tablice, to sto sam pokusao je slicno notornim faux column-ama (http://alistapart.com/articles/fauxcolumns/) ali me jebe taj pixel u header-u. siguran sam da je problem trivijalan i poznat, ali ja - luzer - ne znam rjesenje.
@BlizZ: tako je majstore... |
|
|
| Back to top |
|
|
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
| Posted: 15.10.2006 22:22 Post subject: |
|
|
| feelfree wrote: | | red wrote: | | @feelfree: "Ponašanje" tablice je da stoji mirno i drži ćelije tam di trebaju bit. |
Do nedavno svi smo radili table layout i ja sam mislio na takvo ponašanje tablice ( kao layout tablice ), pardon. Isti je slučaj sa zahtjevima za fiksni footer na dnu stranice ( navika od tablica ).
- nije semantički ali smo svi to radili. |
Dobro, kužim ja kaj si htio reći, ali ne vidim zašto si htio reći to kaj si htio reći. fanatic pita za nešto drugo a nije da svom silom hoće neki height 100% ili footer stick ili neku sličnu bedastoću. Pita zašto ima pomak od 1px u headeru.
Na brzinu sam probao, Fx će biti OK ak se širina čejnđa na 770px (pozadinski image isto). Ne znam u čem je frka, koliko znam fixali su problem sa rounding bugom, ako je to uopće to. IE će pak biti OK ak mu se doda 1px left margina. Dunno, uvijek radim tak da izbjegavam ovakva pixel-perfect narihtavanja. |
_________________
Get busy living, or get busy dying. |
|
| Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005
Posts: 728
Location: Rijeka
|
| Posted: 15.10.2006 22:46 Post subject: |
|
|
ok fanatik, zadaj iste širine body-u, wrapper-u i header-u i to bi trebalo reijšit problem. probao sam, douše bez pozadinskih slika i radi.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body { width: 770px; margin: 0 auto; background-color: #699e1d; }
#wrapper { width: 770px; margin: 0px auto; background-color: #fff; }
#header { width: 770px; background-color: #000; height: 130px; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
</div>
</body>
</html>
|
preradi po potrebi |
_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them |
|
| Back to top |
|
|
fanatic
Joined: 02 Nov 2004
Posts: 81
Location: vienna
|
| Posted: 15.10.2006 22:48 Post subject: |
|
|
da, slicno je rounding bugu kada se resize-a browser, ali ako sam ja dobro razumio, on se pojavljuje kada se box-ovi definiraju relativnim jedinicama
http://www.positioniseverything.net/round-error.html
| Quote: | | When boxes are rendered, and the dimensions of those boxes are defined in 'relative' units such as percentages or EM's, then the browser must work out how many screen pixels to assign to the box dimensions. |
thx na workaround-u, pokusati cu cijeli layout povecati za 1px.
btw, i sam takodjer izbjegavam pixel-perfect layout-e (i hackov-e), ali ovo sto sam postao su tek kontejneri i jos nisam razmisljao o alternativnim rjesenjima. kako bi ti ovo odradio? |
|
|
| Back to top |
|
|
Tristan
Joined: 01 Aug 2006
Posts: 614
Location: Under the sky
|
| Posted: 15.10.2006 23:00 Post subject: |
|
|
| Pali kad staviš paran broj? meni je... |
_________________
Carpe diem... |
|
| Back to top |
|
|
red
Joined: 03 May 2004
Posts: 919
Location: Zabok
|
|
| Back to top |
|
|
fanatic
Joined: 02 Nov 2004
Posts: 81
Location: vienna
|
| Posted: 16.10.2006 10:02 Post subject: |
|
|
yeah, that's it!!!
muchas gracias chicos, thx a lot red & co... |
|
|
| Back to top |
|
|
|
Forum FAQ
Search
Memberlist
Forum ignore list
Register
Profile
Log in to check your private messages
Log in
