ugrás a tartalomhoz

CSS background repeat-x 100%

Castor87 · 2008. Feb. 8. (P), 23.07
Üdv!
Ha egy 100% széles div-nek adok egy repeat-x-es hátteret, akkor elméletileg a böngésző teljes szélességében "rajzolódik" a kép. De ha nem teljes méretben van az ablak és a vízszintes görgővel jobbra görgetek, akkor nem ismétlődik a kép, csak addig amilyen széles épp az ablak, azaz véges a kép. Biztos sokan találkoztak már ezzel a problémával.

Találtam rá egy megoldást, ha a body-ba teszem, akkor semmi gond, nem teljes méretben ha görgetek, végig ott van. Ezzel csak az a bajom, hogy 1db ilyen hátteret tehetek be. De én 2 szeretnék, egyet a fejlécnek, egyet a láblécnek, viszont a bodynak nem adhatok meg két hátteret.

A kérdésem az lenne, milyen módon lehetne megvalósítani, hogy a fejléc és lábléc is 100% széles legyen és az ablak "előző nézet"-re váltás után jobbra görgetésnél is ismétlődjön a kép!?

Köszönöm előre a megoldást!
‹ nincs css... Kurzor kinézetének változtatása ›
 ■
1

Kicsit adekvátabban a probléma: nem a háttérkép nem...

Fraki · 2008. Feb. 9. (Szo), 03.18
Kicsit adekvátabban a probléma: nem a háttérkép nem ismétlődik, hanem az elem szélessége csökken. Mégpedig akkorára, mint amilyen széles az ablak.

Az ok az, hogy kétféle szélesség van, az ún. offsetWidth és a scrollWidth. Ha egy elemen megjelenik az – ez esetben vízszintes – szkrollbár, mert a tartalma szélesebb, mint ő maga, akkor ez a két érték eltér. (A te esetedben ez az elem a body). Ilyenkor valóban spec. helyzet alakul ki, mert az ilyen konténernek a névleges szélességénél több területet kell mutatnia, és ezt a több területet nem mindig fedi le a tartalma, mely a görgetősávot eredményezi (esetleg mert a széltében túlnyúló elem magasságban már kisebb a konténernél). Az üres területen pedig mutatni kell valamit. Ez pedig a saját háttere. De a konténerszélesség ettől függetlenül a CSS-elemek %-os értékei felé – logikusan – az offsetWidth, ők azt látják, nem a scrollWidth-et. Ha nem így lenne, akkor valójában a konténer nyúlna, és ugye ez az egész nem erről szól. (szerk: ez mellesleg farkába harapó kígyó lenne, mert egy mindig nyúló konténernek hogy lehetne mondjuk 200% széles gyermeke...) (szerk2: meg ha mindig nyúlna, nem is lenne gördítősáv, muhaha)

Elvileg az ilyen üres terület létrejötte dizájn-probléma. Önmagában amit leírtál, nem reprodukálja a jelenséget, ugyanis egy 100% széles div ablakátméretezés után nem okoz görgetősávot, hanem felveszi az új viewport szélességét. A görgetősáv azért jelenhet meg, mert mondjuk van egy másik fix méretű elemed (nem tudom, meg kéne mutatnod a konkrét példát).
2

huhh : )

Castor87 · 2008. Feb. 9. (Szo), 23.15
Nagyjából értem amit írtál, de azért még párszor majd nekifutok. :P

Szóval, tényleg van fix szélességű elemem, ezért van görgetősáv ablak átméretezésnél. Ettől függetlenül az oldal tetejére és aljára (fejléc/lábléc) szeretnék egy-egy olyan képet ami repeat-x tulajdonsággal bír, az oldal bal szélétől egészen a jobbig.

Ahogy már fentebb írtam a fejlécet ha nem egy DIV-be teszem, hanem a BODY-ba, akkor nincs probléma. A gond azzal van, hogy én több ilyen képet szeretnék, ami az oldal bal szélétől egészen a jobb széléig tart és ha görgetek vízszintesen, akkor ott is folyamatos legyen.

Én kétféle megoldásra tippelek:
Vagy a BODY-ba kéne több hátteret beszúrni (amik nem írják felül egymást és természetesen nem ugyanazon pozícióban helyezkednek el egymáshoz képest), vagy az egyszerű DIV-eken kéne azt elérni hogy az ott megadott háttér úgy funkcionáljon mint ha a BODY-ba tenném.

Ha most se nagyon érted, akkor lerajzolom, nagyjából mit szeretnék. :)
3

De, értem, nagyon egyszerű a megoldás, következik a...

Fraki · 2008. Feb. 10. (V), 18.11
De, értem, nagyon egyszerű a megoldás, következik a problémaleírásból. A helyzet szereplői: konténer és gyermekei. Gyermekek túlnyúlnak a konténeren, üres terület keletkezik, amit a konténer háttere tölt ki. A te esetedben a konténer a body, és jól látod, hogy ennek kell tehát a hátteret adni (hiába volna szemantikusabb a gyermekeknél).

Ezen felül van egy olyan problémád, hogy kevés elem jut több háttérre, amit szokásos módon wapperezéssel lehet megoldani, azaz bevezetsz még egy konténert a body alá. A layerezés alapjainál tartunk.
4

nos

Castor87 · 2008. Feb. 11. (H), 14.35
Eddig így néz ki a kódom:

  <body>
    <div id="header">
      <div id="menu">
        <a href="#">menü1</a>
        <a href="#">menü2</a>
        <a href="#">menü3</a>
      </div>
    </div>
    <div id="content">
      Hello World!
    </div>
    <div id="footer">
    
    </div>
  </body>
A HEADER az fix szélességű. Azt mondod hogy a BODY-n belül tegyek be egy 100%széles DIV-et és ebben legyen a HEADER, valamint ide tegyem a hátteret?

Nem igazán értem ezt a wrapper megoldást, ha kifejtenéd jobban...
5

Igen

Heilig Szabolcs · 2008. Feb. 11. (H), 16.24
Szia!
Igen, azt jelenti, a wrapper-t a body-n belül kell lepakolni, és abba tenni mindent. Illetve ennek adni hátteret, nem a bodynak. Kerül tehát a html-be még egy szint. Ezt wrapper div-nek szokás hívni, és sokszor a div id-ja valóban a "wrapper".
6

úgy csináltam, de nem jó

Castor87 · 2008. Feb. 11. (H), 16.54

#wrapper{
  background: url(images/header.jpg) repeat-x left top;
  width:100%;
  }
A BODY-ba tettem a WRAPPER-t és azon belül van minden. Hiába 100% széles, vízszintes görgetésnél megint csak vége van a képnek. Linux alatt Firefoxba nézem, lehet más OS/böngészőbe jó lenne?? Nincs más ötletem.. :S

Szerk.:
Megnéztem más böngészővel is és ugyanez a probléma. Találtam egy oldalt ahol szintén ez a baj:
http://www.freecsstemplates.org/templates/previews/primitiveelement/
Ha annyira összehúzom az ablakot hogy megjelenik a vízszintes csúszka, akkor a lábléc háttere véges lesz... Persze teljes méretbe itt is jó, mint nekem. Nemrég tértem át a táblás módszerről css-re, de kezdem megbánni. Folyamatosan szívok vele :S:S:S
8

Nem, a wappernek nem kell 100% szélesség, annak auto kell.

Fraki · 2008. Feb. 12. (K), 17.39
Nem, a wappernek nem kell 100% szélesség, annak auto kell. 100%-kal épp hogy leszorítod a szélességét a viewportra.

–

Probléma update. Egy konténernek auto width esetén fel kéne vennie a gyermekei által meghatározott legnagyobb szélességet, erre alapozódott eddigi tanácsadói tevékenységem e topik berkein belül. Viszont van egy olyan szabály is, hogy ez csak a viewportig igaz. Azaz, ha a body autoszélességen van, akkor a „konténer nyúlik a gyermekei szerint” szabály csak a viewportig tart. Fogalmam sincs, mitől van ez a viselkedés, és nem is tetszik, egyedül az IE viselkedik úgy, ahogy elvárnám (úgyhogy nyilván szabvány, de azért üdítő kivétel is egyben). Vagyis az IE-re érvényes, amit eddig mondtam, a többire nem (tehát nem érvényes).

-

Nagyvilág

Az alábbi fórumon hajszálra ugyanezt a problémát tárgyalják:
http://www.iwdn.net/showthread.php?t=3585

-

Ultimate megoldás

Rájöttem, hogy neked teljesen indokolatlan a headernek adnod a fix szélességet. A bodynak kell adnod vagy width-ként, vagy min-width-ként, attól függ, hogy akarod hogy működjön. A header, footer stb.-nek pedig mind 100%. IE-min-width nem ügy, adjál neki width-et, az alapból min-width-ként viselkedik. Tehát:
min-width: Npx
_width: Npx

Az általad említett oldalnak is megoldódik a problémája, ha kiveszem firebugban a #content-je alól a width: 720px-t, és átrakom a body-jára.
7

megoldás

Castor87 · 2008. Feb. 12. (K), 14.09
Nos a megoldás az lett FF-hez, hogy a hátteres DIV-nek adok egy min-width értéket. (ez az érték a fix szélességű tartalom szélességével egyezik meg)

IE alatt még nem próbáltam, de álítólag nem ismeri a min-width-et, így arra mást kell kitalálni...

A megoldást ezúton is köszönöm Rrd-nek!