Sziasztok!
Napok óta agyalok rajta, de nem tudom megoldani.
Adott egy smink (tomee.wideworld.hu- itt látható) A smink szépen összeállt. Van egy háttér mely így van lekódolva:
#bodyhatter {
background:url(images/bodybg.jpg) no-repeat top center;
height:100%;
margin:0;
width:100%;
}
Az a problémám, ha kicsinyítem a böngésző méretét, akkor a háttér módosul, úgy hogy a jobb oldala kezd eltűnni. Hogy tudom azt megcsinálni, hogy fixen maradjon, még akkor is a böngésző mérete módosul.
Lehetőség: position:relative, de akkor fix szélességet kell adjak. A háttér szélessége 1150px, nos ez pedig az 1024es felbontásnál azt eredményezi,hogy gördíteni kell a böngészőt vízszintesen. Ezt pedig nem szeretném.
Hogy oldanátok meg?
Drupal verzió:
Fórum:
Kell egy fix adat
#bodyhatter {
background:url(images/bodybg.jpg) no-repeat top center;
height:100%; <- ez nem nagyon kell
margin:0 auto;
width:képszélasség_px;
}
Üdv!
Dudás József
igen de
Ez jó akkor ha egy divet középre akarsz zárni, azonban ennek a divnek a szélessége 1156 px, így ha nagyobb mint 996 px (1024-re optimalizálva) akkor megjelenik a vízszintes gördítősáv a böngészőn. Ezt szeretném elkerülni.
Megoldás
Nos sok weboldalt végignéztem és sokan nem tudták megoldani, vagy nem figyelték.
Tehát ez lett a kód:
body {
background:url(images/bg.jpg) no-repeat scroll 50% 0;
margin:0;
padding:0;
min-width:980px;
}
a lényeg a minimum szélesség.
Mikor is kell ezt használni?
Ez akkor jó, mikor a wrapper rész középre zárt, de a grafika még szélesebb és esetleg top irányba is nagyobb mint a tartalmi felület.
Mivel 1024-re optimalizáljuk az oldalak többségét, így 996px-nél nagyobbat nem érdemes alkalmazni, mert megjelenik a vízszintes gördítősáv.
Ez a kód azért jó mert a hátteret szépen középre pozícionálja úgy, ha kicsinyítjük a böngésző méretét, vagy ha vki kisebb felbontással böngészik, akkor is középre lesz zárva a háttér és nem tolódik el.
Eddig az volt a baja, hogy eltolódott, így szétesett.
Tehát a megoldás a minimum szélesség megadása.
Remélem segítek ezzel a kis aprósággal olyanoknak akiknek majd kellhet ilyesmi grafot alkalmazni.
telportal.hu weboldal, ahol majd látható lesz a smink.
szerintem túlbonyolítod
elég egy:
#hatter
{
background: url(img/haterkep.png) no-repeat center top;
}
ízlés szerint:
margin: 0;
padding: 0;
ezek után egy
#hatter-wrap
{
background: transparent;
min-width: 960;
margin: 0 auto;
width: 960px;
}
a legnépszerűbb (by GA) böngészőknek legalábbis biztos.
minimum szélesség
Igen így is jó, de szinte mindegy, nekem a minimum szélesség megadása hiányzott.
Végignéztem az összes drupal oldalt, ami itt az oldalon van belinkelve. Corvintető grafikája is ebbe esik bele, de ott sem alkalmazták a min-width kódot, így ott is a fennállt "probléma" van.
Köszi a hozzászólásod! :)
kapkodtam
és nem emeltem ki, hogy a min-width az nem a háttérképet tartalmazó elemnek kell hanem ami "felette" van. El is hagyhatnád. A min szélesség pont, hogy előhívja a scrollbart ha a megjelenítésre használt ablak keskenyebb, azaz kisebb értékű.
Amit Te szeretnél - középen legyen mindig - azt a center attributum adja meg és ennyi.
http://www.w3schools.com/css/pr_background-position.asp
A fenti kódodban azért a min-width a kulcs, mert van egy 50%-os attr-od, első helyen ami azt eredményezi, hogy a háttérképed bal felső sarkát vízszintesen a megjelenítő ablak felénél kezdje el kirajzolni. Ebből kifolyólag tuti van egy felsőbb szintű deklarációd (öröklött) valahol ami miatt a min-width adja a kívánt eredményt.
Itt így oldottam meg és a közelben sincs minimum szélesség:
http://akusztikakft.hu
szerk:
boccs ezen átsiklottam:
viszont így is elég a center top páros a háttérképnek. Azt amelyik meg 1156px széles no azt kell jól pozicionálni :) én ezt húznám ki (1156-996)/2-vel
nem is jó :)
Bocsi, de ez is olyan ami nekem is volt elötte. A munkaterületed az 910px széles, addig kicsinyítve a böngésző méretét nem is tolódik el a háttér, de nézd csak meg utána!!!
Láthatod h a háttér elkúszott! :) Lehet ez csak az én hülyeségem, de próbálok precíz lenni, ráadásul ma már sokan böngésznek telefonnal. Annak meg nincs 1024es felbontása (még).
És csak hogy teljes legyen:
http://www.wideworld.hu/akusztikakft.jpg
Látható az eltolódás. Ugyan ez volt nekem is. De ha min-width meg van adva a Te esetedben 910px-re akkor ez nem torténik meg :)
igazad van mit iszol? ;)
<off>akkor már csak azt nem értem miért van a design-ban 1156px ha fontos a handheld style?
soproni jó lesz :)
soproni jó lesz :)