ugrás a tartalomhoz

CSS feladvány

Fraki · 2009. Már. 1. (V), 15.29
Adott egy, egy fix szélességű blokkot és annak fejlécét tartalmazó, középre igazított oldal. A fejléckép szélesebb, mint a fix blokk, azaz kétoldalt kilóg belőle.

A vízszintes görgetősáv csak akkor jelenik meg, ha a böngészőablakot keskenyebbre húzom, mint a fix blokk szélessége, akkor nem, ha a fix blokknál szélesebb, de a kilógó fejlécnél szűkebb. Ha a böngészőablak keskenyebb, mint a fix blokk szélessége, akkor a fejléc ugyanúgy megáll, mint a fix blokk, nem tolódik tovább.

Tehát voltaképpen a fejléc nem középre van igazítva, hanem a középre igazított blokkot követi, viszont nem okozhat görgetősávot, görgetősávot csak a blokk okozhat.

Mi a megoldás?
‹ Textarea "paste" tiltása Ket kep osszeolvasztasa ›
 ■
1

ötlet

gex · 2009. Már. 1. (V), 16.06

div#header {
    position: absolute;
    left: 50%;
    margin-left: -(fejléc szélessége/2)px;
}
div#content {
    margin-top: (fejléc magassága)px;
}
szerk: kipróbáltam, már ff-ben sem az igazi.

szerk: itt egy új megoldás:

<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
        tartalom
    </div>
</div>


body {
    min-width: 800px;
    margin: 0;
    padding: 0;
}
div#wrapper {
    position: relative;
    padding: 200px 0 0;
}
div#header {
    position: absolute;
    left: 50%;
    width: 1000px;
    top: 0;
    height: 200px;
    margin-left: -500px;
    background: url(header.png) 0 0;
}
div#content {
    width: 800px;
    margin: 0 auto;
}
eredménye az, hogy nem csúszik el a fejléc a tartalomtól, viszont a fejlécnél keskenyebb böngészőben megjelenik a görgetősáv. viszont a tartalom az egészen a bal oldalig kicsúszhat.
2

Na jó, de akkor ez nem

Fraki · 2009. Már. 2. (H), 12.00
Na jó, de akkor ez nem megoldás, mert mint írod, egy kritérium nem teljesül.

Valaki? :)
3

háttér vs elem

gex · 2009. Már. 2. (H), 12.10
ha body háttérként adod meg akkor elcsúszik a kép, ha pedig már bármilyen elemet (img, div) beraksz akkor az úgyis görgetősávot okoz ha nem fér el. csak nem mindegy milyet és hogyan.
az én példámban 800 és 1000 pixel közötti szélességű böngészőnél tüntesd el a görgetősávot diszkrét js-sel ha ennyire zavar. sima xhtml-css-sel szerintem ez nem megoldható.
4

De én azért tettem fel a

Fraki · 2009. Már. 2. (H), 12.40
De én azért tettem fel a feladványt, mert megoldható :) CSS-sel, természetesen.
5

jah

gex · 2009. Már. 2. (H), 13.07
szóval te ezt megoldottad? küldenél privátban linket? érdekel a megoldás.
6

Igen, de nem tudom, mennyire

Fraki · 2009. Már. 2. (H), 13.28
Igen, de nem tudom, mennyire kattanak rá a témára, gondoltam, jó kis játék gyanánt felteszem. Aztán ha továbbra se jön megoldás, kirakom ide a szabadagazdát.

Mondjuk holnap... addig még bírd ki :)

De addig is: jó a gondolatmeneted egyébként, annyi kiegészítéssel, hogy body háttér helyett 100% széles divben centerbe rakott background is jó. Persze ezzel nincs megoldva a blokkhoz kötöttség.

És persze önmagában a blokkhoz kötés sem olyan nagy wasistdas, de akkor meg nincs megoldva a görgetősáv...
11

második nekifutás

gex · 2009. Már. 2. (H), 16.11

body {
    min-width: 800px;
    margin: 0;
    padding: 0;
    background: url(header.png) no-repeat center 0; /* plusz elem */
}
div#wrapper {
    position: relative;
    padding: 200px 0 0;
}
div#header {
    position: absolute;
    left: 50%;
    width: 900px; /* módosítva, 100px-lel kisebb */
    top: 0;
    height: 200px;
    margin-left: -500px;
    background: url(header.png) 0 0;
}
div#content {
    width: 800px;
    margin: 0 auto;
}
magyarázat: a bal oldalt már megoldottam, az volt a megoldásommal a baj, hogy a jobb oldalon a túllógó fejléc div görgetősávot okozott. a Gábor megoldásában lévő max-width adta az ötletet, hogy hogy ha nem látszik az elem akkor nem is baj ha nincs ott, emiatt a fejléc div most a jobb oldalon egyáltalán nem lóg túl a tartalmon. viszont így ott most levágtam a képet, de erre már tökéletes a body background, hiszen az csak akkor fog elcsúszni, ha már nem látjuk, azaz a fejléc teljesen kitakarja.
ff3-ban és ie6-ban teszteltem, szóval elvileg másban is mennie kell.

ez a megoldás? (ja és persze segített, hogy azt írtad hogy jó a gondolatmenet, enélkül elvetettem volna az abszolút pozícionált divet.)

szerk: ie7, opera 9.62, safari 3.2.2 és chrome-ban is jó. win alatt. ami érdekes, hogy webkitben (safari, chrome) a középre igazított body háttérkép nem csúszik el. raktam fel egy online példát ahol áttetsző a tartalom, ott jól látszik.
12

ehh

gex · 2009. Már. 2. (H), 16.29

<div id="header">
</div>
<div id="content">
    div#content
</div>


body {
    margin: 0;
    padding: 0;
    background: url(header.png) no-repeat center 0;
}
div#header {
    width: 800px;
    height: 200px;
    margin: 0 auto;
    background: url(header.png) no-repeat center 0;
}
div#body {
    width: 800px;
    margin: 0 auto;
}
példa

pedig hányszor előjött már ez... kicsit túlmisztifikáltam. :)
13

Grat.

Török Gábor · 2009. Már. 2. (H), 17.38
Haha, szép.
14

Ön nyert! Gratulálok

Fraki · 2009. Már. 2. (H), 18.59
Ön nyert! Gratulálok :D

Igen, a dupla kép a trükk. Pontosan úgy: van egy 100% széles elem center háttérrel (ez nálad a body), és van egy azt eltakaró, a contenthez kötött másolat, amit a content jobb szélénél meg kell vágni, hogy ne okozzon görgetősávot.

Bemásolom én is a weblabor-fejléces példával.
<div class="header"></div>
<div class="content">
  <div class="header"></div>
  tartalom
</div>

body {
  margin: 0;
}
.header {
  width: 100%;
  height: 148px;
  background: url(http://weblabor.hu/sites/all/themes/wl/images/wlheader.png) no-repeat center;
  position: relative;
}  
.content {
  margin: 0 auto;
  width: 401px;
  background: red;
  position: relative;
}
.content .header {
  position: absolute;
  top: -148px;
  left: -180px;
  width: 581px;
  background-position: left;
}
Apróság, de a két kép nem fedi egymást mindig teljesen, 1px eltolás előfordulhat, ez a vágásnál látszik, amikor a böngésző szélességét állítod, azaz nem mozognak szinkronban. Ez természetes is, és elvileg ki lehetne küszöbölni úgy, ha a content és a fejléckép egyaránt páros/páratlan px széles (azonos párosságú). (Ezért állítottam most itt a content szélességét 401px-re, mert a weblabor-fejléc páratlan px széles.) Ahogy néztem, sajnos ez nem ilyen egyszerű:
- FF-ben szinkronban vannak, ha a fejléc és a content eltérő párosságú.
- Opera/Chrome esetén szinkron van akkor, ha a fejléc és a content azonos párosságú (ez az elvárt viselkedés sztem), viszont ez érdekes módon megfordul, ha a böngésző keskenyebb, mint a fejléc: akkor a szinkron eltérő párosságnál jelentkezik.
- IE mindez pontos fordítottja: széles ablaknál szinkron eltérő párossággal, fejlécszélesség alatt pedig szinkron azonos párossággal.

Következő kérdés, hány milyen beállításokat használjunk, hogy minimalizáljuk az esélyét annak, hogy egy látogatónál 1px-es rés legyen a vágásnál...
15

nem kell position, 1px

gex · 2009. Már. 2. (H), 19.36
nem kell position attribútum. egyszerűen csak a középre igazított elemnek is ugyanazt a hátteret kell megadni, mint az őt befoglalónak.

az 1px-es ugrálás pedig a tapasztalataim szerint azért van, mert máshogy kerekíti a legtöbb böngésző a background-position tulajdonság center értékét és a margin tulajdonság auto értékét (ami egyébként teljesen érthetetlen nekem, mint webfejlesztőnek, böngészőprogramozóként biztos meg tudnám indokolni). egyszer erről is csináltam egy példát.

szerk: ja igen amit itt belinkeltem nézd meg különböző szélességű ablakokban. bizonyos ablakszélességnél jó, bizonyosnál nem. ie, ff, mindegy.
16

Izgalmas

Poetro · 2009. Már. 2. (H), 21.28
És ami még izgalmasabb, hogy pl. Chrome alatt a jobb oldalon keletkezik fehér sáv, FF alatt a bal oldalon. Másik furcsaság, hogy Chrome alatt csak akkor keletkezik fehér sáv, ha a margin nagyon kicsi, azaz kb 20px alatti.
18

Igen, itt is az van, amiről

Fraki · 2009. Már. 2. (H), 22.21
Igen, itt is az van, amiről beszélek, a center background "leragad", ha negatív az offsetje. A http://dev.gex.hu/kerekites-teszt/background.png -n látszik, hogy az a kicsi margó, amiről beszélsz, a kép része.

Ha az ablakot lépésekben 1 pixelenként szűkíted (windowsban Ctrl+nyilakkal lehet csinálni), akkor az tapasztalható, hogy az auto margin (kék rész) 2 lépésenként ugrik egy 1 px-t rendesen, a center bg is, de amikor elérjük a kép szélességét, akkor a center bg, vagyis a sárga rész egy lépésnél kimarad. Ilyenkor fordul át az említett "szinkron". Opera/Webkit/IE-nél van így, FF-nél nem fordul át a szinkron, vagyis nincs ilyen kimaradás.
17

Igen, gondoltam rá, hogy

Fraki · 2009. Már. 2. (H), 22.02
Igen, gondoltam rá, hogy egyszerűbb úgy, ahogy mondod, csak nálam kellett eltolás, mert az egész korábban áll meg, mint a fix blokk szélessége (body min-width: fix blokk + 20px).

Az 1px-es ugrálásnál nekem az az igazán meglepő, hogy FF-et kivéve minden böngésző máshogy viselkedik, ha az ablak szélesebb, mint a fejléc, ill. ha keskenyebb. Tehát nálad például a fejléc 1024px, a content 800px, azonos a párosság. Ennek megfelelően FF-ben ugrál, de nem ez a lényeg, hanem hogy pl. Opera/Chrome-ban nem ugrál, azaz szinkronban van, viszont 1024-nél keskenyebb ablaknál ugrál; ill. IE-ben fordítva.

Valami olyasmi lehet emögött, hogy negatív értéknél máshogy kerekít (?), merthogy akkor megy át a center background offsetje negatívba...
7

A fejléc kép?

Török Gábor · 2009. Már. 2. (H), 14.08
A fejléccel szemben annyi az elvárás csak, hogy kép?
8

Igen.

Fraki · 2009. Már. 2. (H), 14.34
Igen.
9

Az én nevezésem

Török Gábor · 2009. Már. 2. (H), 15.02
Akkor gex markupjához én az alábbi CSS-sel indulnék:

body {
    /* Ez csak annyiból kell, hogy a body jobb oldali margójával ne csúsztassa el */
    /* a fejlécet #content szélességénél kisebb ablakszélesség esetén. */
    margin:0;
}
#header {
    /* Ez a két tulajdonság az érdemi */
    max-width:500px;
    padding:0 -50px;

    margin:0 auto;
    height:148px;
    background:url(http://weblabor.hu/sites/all/themes/wl/images/wlheader.png) no-repeat 0 0;
}
#content {
    margin:0 auto;
    width:400px;
    background:red;
}
10

Itt is elcsúszik a fejléc és

Fraki · 2009. Már. 2. (H), 15.26
Itt is elcsúszik a fejléc és a blokk, ha a fejlécnél szűkebbre veszem a böngészőt. Az elvárt viselkedés az, hogy a fejléc nem tolódhat el a blokktól, tehát pontosan akkor kell megállnia, amikor a blokk áll meg.
19

Update

Fraki · 2009. Már. 31. (K), 17.09
Erre már nem akarok külön topikot nyitni, mert ugyanerről van szó, de a megoldás sokkal egyszerűbb, csak átsiklottunk rajta. A body-nak adott min-width megoldja a problémát.

gex mindegyik kísérletében ott van a min-width, csak az első kísérletben erről elterelte a figyelmet a túl széles div. A további kísérletekben pedig már duplikálta a hátteret :)

Az egyetlen kényelmetlenség vele csak, hogy ie6-re workaround kell rá.
20

nekem nem jó

gex · 2009. Ápr. 6. (H), 10.14
ff-ben is elcsúszik, ha csak a body hátteret használom min-width-tel. ez volt a legelső ötletem de nem úgy viselkedik a body ahogy elvárnám. utána beraktam egy divet, hogy azzal játsszam el ugyanezt, de az sem működött. hogy gondolod?
21

Tényleg, body háttérrel

Fraki · 2009. Ápr. 7. (K), 16.11
Tényleg, body háttérrel elcsúszik. De 100% divvel nem. Ez jó:
body {
  margin: 0;
  min-width: 400px;
}

.header {
  width: 100%;
  height: 148px;
  background: url(http://weblabor.hu/sites/all/themes/wl/images/wlheader.png) no-repeat top center;
}

.content {
  margin: 0 auto;
  width: 400px;
  background: red;
}
<div class="header"></div>
<div class="content">
  tartalom
</div>
Ami az elcsúszást illeti, azt nem értem. Szinte minden böngészőben ugyanazt produkálja, és szerintem ez nem lehet szándékolt viselkedés: http://screencast.com/t/ja0ynLhCkK