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:

body {
	text-align: center;
	background-image: url("../skin/contentback.gif");
	background-repeat: repeat-y;
	background-position: top center;
	min-width: 990px;
}

div#page {
	text-align: left;
	width: 990px;
}
HTML:

<html>
<body>
	<center>
	<div id='page'>Bla bla</div>
	</center>
</body>
</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;"

<html>
<head>
<style>
  body {
      text-align: center;
      margin: 0;
      padding: 0;
  }

  div#page {
      background-image: url("images/lopott.jpg");
      background-repeat: repeat-y;
      background-position: top center;
      text-align: left;
      width: 990px;
      margin: 0 auto;
  }
</style>
</head>
<body>
    <div id='page'>Bla bla</div>
</body>
</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

<html>
<head>
<style>
  body {
      text-align: center;
      margin: 0;
      padding: 0;
  }

  div#page {
      background-image: url("images/lopott.jpg");
      background-repeat: repeat-y;
      background-position: top center;
      text-align: left;
      width: 990px;
      margin: 0 auto;
      height: 100%;
  }
</style>
</head>
<body>
    <div id='page'>Bla bla</div>
</body>
</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
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!