ugrás a tartalomhoz

Firefox body min-width

gphilip · 2008. Aug. 13. (Sze), 12.48
Hello!

Van egy középre igazított weboldalam, aminek a body-jában van egy középre igazított háttérkép (egy függőleges csík, amit oszlopok elválasztására használok).

A probléma az, hogy ha Firefoxban a böngésző méretét kevkenyebbre húzom, mint a középpontban elhelyezkedő DIV (az oldal maga), akkor a háttérkép elcsúszik, mivel a firefox a böngészőablakhoz méretezi a body-t.

Próbáltam kivédeni a problémát min-width-tel, de mintha a body-ra ezt nem venné figyelembe a firefox. :(

Egyszerűsített kód:
  1. body {  
  2.     text-align: center;  
  3.     background-image: url("../skin/contentback.gif");  
  4.     background-repeat: repeat-y;  
  5.     background-position: top center;  
  6.     min-width: 990px;  
  7. }  
  8.   
  9. div#page {  
  10.     text-align: left;  
  11.     width: 990px;  
  12. }  
HTML:
  1. <html>  
  2. <body>  
  3.     <center>  
  4.     <div id='page'>Bla bla</div>  
  5.     </center>  
  6. </body>  
  7. </html>  
‹ CSS: a tartalomhoz dinamikusan igazodó magasságú menü koordinátából utcaneveket ›
 ■
1

valóban

fchris82 · 2008. Aug. 13. (Sze), 17.18
Először is, a <center> helyett használd css-ben ezt: "margin: 0 auto;"
  1. <html>  
  2. <head>  
  3. <style>  
  4.   body {  
  5.       text-align: center;  
  6.       margin: 0;  
  7.       padding: 0;  
  8.   }  
  9.   
  10.   div#page {  
  11.       background-image: url("images/lopott.jpg");  
  12.       background-repeat: repeat-y;  
  13.       background-position: top center;  
  14.       text-align: left;  
  15.       width: 990px;  
  16.       margin: 0 auto;  
  17.   }  
  18. </style>  
  19. </head>  
  20. <body>  
  21.     <div id='page'>Bla bla</div>  
  22. </body>  
  23. </html>  
Ezután a div-be pakolj mindent, amit a body-ba tennél.
2

kézenfekvő, de...

gphilip · 2008. Aug. 13. (Sze), 17.23
igen, a megolds jónak tűnik, de sajnos mégsem az :(

a firefox ugyanis a page div hátterét nem "húzza ki" egészen a lap aljáig :(
mindenképpen a bodyba kellene... vagy tudsz jobbat?
3

height: 100%;

fchris82 · 2008. Aug. 13. (Sze), 17.50
  1. <html>  
  2. <head>  
  3. <style>  
  4.   body {  
  5.       text-align: center;  
  6.       margin: 0;  
  7.       padding: 0;  
  8.   }  
  9.   
  10.   div#page {  
  11.       background-image: url("images/lopott.jpg");  
  12.       background-repeat: repeat-y;  
  13.       background-position: top center;  
  14.       text-align: left;  
  15.       width: 990px;  
  16.       margin: 0 auto;  
  17.       height: 100%;  
  18.   }  
  19. </style>  
  20. </head>  
  21. <body>  
  22.     <div id='page'>Bla bla</div>  
  23. </body>  
  24. </html>  
4

height: 100% csak félmegoldás

Fedor · 2008. Aug. 14. (Cs), 10.33
Ha az oldal gördíthető, akkor ez nem megoldás, mert ez a megnyitott ablakot veszi alapul, és nem változik dinamikusan, így a gördítés után a div alsó széle ott marad, ahol a gördítés előtt volt, tehát szépen elindul felfele, mintha mondjuk egy fix értéket adtál volna meg. Én ilyet csak olyan oldalnál használtam, amiről tudtam, hogy belefér még egy 1024*768-as képernyőbe is, és így nem volt a a kikapcsolt gördítés.
5

na igen...

gphilip · 2008. Aug. 14. (Cs), 11.54
igen Fedor, a számból vetted ki a szót...
rendben, hogy az IE egy rakás lótüdő, de azért a Firefox is az őrületbe tud kergetni a baromságaival.

Valami kifinomult, elegáns ötlet? :)
6

Ehhez ismerni kellene a designt

fchris82 · 2008. Aug. 14. (Cs), 14.12
Ha látnám a designt, akkor lehet, hogy lenne egy egészen más megoldási ötletem :) Mert lehet, hogy máshogy is el lehet érni a megfelelő designt, egy egészen más megközelítéssel, és akkor máris nincs ez a probléma. Egyáltalán ez most valóban tömegeket érintő probléma, vagy csak inkább "elméleti"?
7

nem tudom :)

gphilip · 2008. Aug. 14. (Cs), 14.47
hát azt nem tudom, hogy tömegeket érint-e, szerintem eléggé általános lehet. engem biztosan érint, ha ez számít :)

szíves örömest megmutatnám a dizájnt, de sajnos nem lehet, mert hét pecsétes titok. :)

viszont van egy oldal, ami hasonló technikával készült, és ugyaniylen hiba jön elő vele, ha a firefox ablakát túl keskenyre méretezed (a hátteret kell figyelni):
showdown.hu
8

Nos

fchris82 · 2008. Aug. 14. (Cs), 17.33
Én ennél az oldalnál a következőt csinálnám:
1. A háttérképnek megcsinálnám a 900 px széles verzióját is.
2. Az előbbit beállítanám háttérnek a belső div-nek.

Benthagynám a 100%-os megoldást.
- Ha az oldal kisebb, mint a böngésző belső magassága, akkor a body háttere mindenképpen elfut az oldal aljáig.
- Ha nagyobb, akkor is :)
- Ha a user kényszerűségből vagy mert jobb szórakozása nincs, 900 px-nél kisebbre állítja a böngésző ablakot, akkor meg a felső div-es háttér kitakarja a body hibáját.

Nem tudom, hogy érthető-e. Így már jó? Persze nem szép ... :D
9

árthető, de...

gphilip · 2008. Aug. 14. (Cs), 17.49
persze, értem, de a belső diven nem fog végigfutni az a rohadt háttér, mert az ifióta firefox nem húzza ki a divet addig, amíg a tartalma véget nem ér.
10

Megvan...

gphilip · 2008. Aug. 21. (Cs), 13.14
Megvan a megoldás, gondoltam megosztom veletek.
A legelső válaszban küldött, fchris82-féle megoldás működik. A problémát az okozta, hogy az oldal tartalmaz jópár float-olt DIV-et, és a Firefox valamiért nem nyújtja ki az ezeket tartalmazó DIV-eket méretre. Kivéve, ha az alattuk lévő DIV CSS-ébe beszúrsz egy
  1. clear: both;  
ot.

Ekkor már kihúzza a float-okat tartalmazó DIV-et megfelelő magaságra.
Így tettem a footer DIV-be egy ilyet, és tökéletes. :)

Köszönöm a segítséget mindenkinek!