CSS - dziwny problem z tłem (cd.)

Marek

unread,

Nov 13, 2009, 7:24:28 PM11/13/09

to

Przedwczeďż˝nie zakoďż˝czyďż˝em poprzedni wďż˝tek. Mam nastďż˝pujďż˝cy problem.
Konstruncja strony jest taka:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>
<div id="background">tu treďż˝ďż˝</div>
</body>
</html>

Do tego style:

html {
margin: 0px;
padding: 0px;
min-height: 100%;
height:auto;
}

body {
background-image: url(../pictures/siteBackground2.png);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
min-height: 100%;
height:auto;
}

#background {
background-image: url(../pictures/siteBackground.png);
background-position: left bottom;
background-repeat: no-repeat;
min-height: 100%;
width: 100%;
}

Jeďż˝li okno przeglďż˝darki jest mniejsze niďż˝ zawartoďż˝ďż˝, to tďż˝o #background
rysuje siďż˝ poprawnie: na spodzie okna przeglďż˝darki. Gdy zwiďż˝kszďż˝ wysokoďż˝ďż˝
okna to tďż˝o zastyga na wysokoďż˝ci ostatniego elementu strony - nie spada
niďż˝ej. Sprawdziďż˝em: dolna granica <body> nie przylego do dolnej granicy okna
przeglďż˝darki. Gdy ustawiďż˝ wysokoďż˝ďż˝ body na 100% - to wtedy jest ok, ale ďż˝le
zaczyna siďż˝ dziaďż˝ gdy zawartoďż˝ďż˝ strony jest wyďż˝sza niďż˝ wysokoďż˝ďż˝ okna. Gdy
np. tďż˝o i spďż˝d okna wypadďż˝y w poďż˝owie wysokoďż˝ci zawartoďż˝ci strony to gdy
zacznďż˝ przewijaďż˝ stronďż˝ do doďż˝u - backdround leci do gďż˝ry wraz z treďż˝ciďż˝ tej
strony.

Czy da siďż˝ zmusiďż˝ tďż˝odo bycia zawsze w lewym dolnym rogu okna?

W tej chwili napisaďż˝em procedurďż˝ w JS, lecz jest to chore obejďż˝cie:

function fixBackground()
{
var h, tmp=document.getElementsByTagName("html");

h=tmp[0].offsetHeight;
tmp=document.getElementsByTagName("body")
tmp[0].style.height=h+"px";
}

window.onload=fixBackground;
window.onresize=fixBackground;

Marek

unread,

Nov 14, 2009, 5:21:20 AM11/14/09

to

Czytam swďż˝j wďż˝asny post i widzďż˝, ďż˝e nieprecyzyjnie wyraziďż˝em siďż˝. Korygujďż˝
wiďż˝c. Chciaďż˝bym aby obrazek tďż˝a rysowaďż˝ siďż˝ w dolnym lewym rogu okna
przeglďż˝darki gdy strona WWW mieďż˝ci siďż˝ w tym oknie. Gdy strona jest wyďż˝sza,
to tďż˝o powinno wystďż˝powaďż˝ na spodzie tej strony. Obrazek tďż˝a jest w DIVie
gdyďż˝ w BODY rysujďż˝ rďż˝wnieďż˝ jakiďż˝ inny element tďż˝a (gďż˝ra strony, opcja
repeat-x).

Chciaďż˝em osiďż˝gnďż˝ďż˝ ten efekt stosujďż˝c min-height: 100%. Niestety HTML
(IE8/FF) nie reaguje na to tak jakbym oczekiwaďż˝.

Wywrota

unread,

Nov 15, 2009, 6:43:35 AM11/15/09

to

On 14 Lis, 11:21, "Marek" <marek1...@spam.interia.pl> wrote:
> Czytam swój własny post i widzę, że nieprecyzyjnie wyraziłem się. Koryguję
> więc. Chciałbym aby obrazek tła rysował się w dolnym lewym rogu okna
> przeglądarki gdy strona WWW mieści się w tym oknie. Gdy strona jest wyższa,
> to tło powinno występować na spodzie tej strony. Obrazek tła jest w DIVie
> gdyż w BODY rysuję również jakiś inny element tła (góra strony, opcja
> repeat-x).
>
> Chciałem osiągnąć ten efekt stosując min-height: 100%. Niestety HTML
> (IE8/FF) nie reaguje na to tak jakbym oczekiwał.

A ja spróbowałem dać zamiast
#background dać html

przypisałem te wszystkie style do <html> czasem się tak robi...
i powstało:

html {

background-image: url(../pictures/siteBackground.png);
background-position: left bottom;
background-repeat: no-repeat;
min-height: 100%;
width: 100%;
}

W Firefox 3.5.5 i Internet explorer 8.0 działa w innych nie
testowałem, może to także chory pomysł ale działa ;)

Marek

unread,

Nov 15, 2009, 9:30:10 AM11/15/09

to

>A ja sprďż˝bowaďż˝em daďż˝ zamiast
>#background daďż˝ html

A drugi background do <body> ? Od tego zaczynaďż˝em. Niczego to nie zmieniďż˝o.
Okazuje siďż˝, ďż˝e <body> mimo ustawienia min-height na 100% koďż˝czy siďż˝ tam
gdzie zawartoďż˝ďż˝ strony.

Marek

unread,

Nov 15, 2009, 9:53:29 AM11/15/09

to

Wďż˝aďż˝nie powrďż˝ciďż˝em do wersji z body i mam obserwacje. Drugie tďż˝o (to z
sekcji <body>) zawsze rysuje siďż˝ tam gdzie wypada spďż˝d dokumentu. Jeďż˝li
dokument jest niďż˝szy od wysokoďż˝ci okna przeglďż˝darki, to tďż˝o rysuje siďż˝
powyďż˝ej krawďż˝dzi okna. Nie dziaďż˝a min-height: 100% przypisane do body.

Wywrota

unread,

Nov 15, 2009, 11:29:00 AM11/15/09

to

Racja napisałem ale nie sprawdziłem przy małej zawartości ;)
ale udało mi się teraz
struktura htm (bez zmian) natomiast arkusz styli:

html {
margin: 0px;
padding: 0px;
min-height: 100%;
height:auto;

}

body {
background-image: url(../pictures/siteBackground.png);
background-repeat: no-repeat;
background-position: left bottom;

margin: 0px;
padding: 0px;
min-height: 100%;
height:auto;

}

#background {
background-image: url(../pictures/siteBackground2.png);
background-repeat: repeat-x;
min-height: 100%;
width: 100%;

}

A jak to działa ? Działa ponieważ body ma zawsze height: 100%; to
umieszczamy ten symbol czy coś tam na dole w <body>(background-
position: left bottom;) a skoro nasz <div> zawsze będzie zaczynał się
u samiutkiej górnej krawędzi strony to umieszczamy w nim tło z
powtarzaniem poziomym (background-repeat: repeat-x;) i gotowe ;) Myślę
że to chciałeś uzyskać

Pozdrawiam Wywrota

Marek

unread,

Nov 15, 2009, 5:44:54 PM11/15/09

to

Odwrďż˝ciďż˝eďż˝ przypisanie - bardzo sprytne :-)
Jest tylko maďż˝y problem. Jeďż˝li okno jest na tyle maďż˝e, ďż˝e oba tďż˝a najdďż˝ na
siebie to to z lewego dolnego rogu wejdzie pod gďż˝rne. Tymczasem ma to byďż˝
niestety odwrotnie.

Marek

unread,

Nov 15, 2009, 5:46:19 PM11/15/09

to

Czy mogďż˝ Ci wysďż˝aďż˝ na email adres strony? Nie chcďż˝ go publikowaďż˝. Sďż˝dzďż˝, ze
uďż˝atwi nam to sprawďż˝.

Katarzyna 'Bastet' Świderska

unread,

Nov 15, 2009, 5:55:44 PM11/15/09

to

Marek pisze:
> Odwróciłeś przypisanie - bardzo sprytne :-)
> Jest tylko mały problem. Jeśli okno jest na tyle małe, że oba tła najdą na
> siebie to to z lewego dolnego rogu wejdzie pod górne. Tymczasem ma to być
> niestety odwrotnie.

Dlaczego powtarzalnego tła nie przypiszesz do html zamiast
body/dodatkowego diva?

--
Bastet_Milo

Message has been deleted

Wywrota

unread,

Nov 16, 2009, 10:49:14 AM11/16/09

to

On 15 Lis, 23:46, "Marek" <marek1...@spam.interia.pl> wrote:
> Odwróciłeś przypisanie - bardzo sprytne :-)
> Jest tylko mały problem. Jeśli okno jest na tyle małe, że oba tła najdą na
> siebie to to z lewego dolnego rogu wejdzie pod górne. Tymczasem ma to być
> niestety odwrotnie.
>

> Czy mogę Ci wysłać na email adres strony? Nie chcę go publikować. Sądzę, ze
> ułatwi nam to sprawę.

Owszem napisz mi adres na email myśle że nie jesteś taki upierdliwy
jak czasem bywają ludzie :| Tylko nie jestem pewien czy da się to już
obejść jeszcze pomyślę

Message has been deleted

Wywrota

unread,

Nov 16, 2009, 2:46:15 PM11/16/09

to

On 15 Lis, 23:44, "Marek" <marek1...@spam.interia.pl> wrote:
> Odwróciłeś przypisanie - bardzo sprytne :-)
> Jest tylko mały problem. Jeśli okno jest na tyle małe, że oba tła najdą na
> siebie to to z lewego dolnego rogu wejdzie pod górne. Tymczasem ma to być
> niestety odwrotnie.

Wszystko rozbija się o "position:fixed; bottom:0px; left:0px; height:
100%; width: 100%;" <- chyba tego nie muszę tłumaczyć
Właśnie takie właściwości (chyba takie xD) ma body. Sprawdziłem kod w
Firefox 3.5.5 i IE 8.0 i zamierzony efekt działa ;)
Podaj jednak link do strony chciałbym zobaczyć jak to dokładnie
funkcjonuje (pisz na maila)

Chyba z 5 razy kasowałem wpisy bo źle napisałem ;) raz za dużo kodu
znowu wpadł mi lepszy pomysł... ech tam masz gotowca ;)

CSS:

html {
margin: 0px;
padding: 0px;

height: 100%;
background-image: url(../pictures/siteBackground2.png);
background-repeat: repeat-x;
}

body {
margin: 0px;
padding: 0px;
height: 100%;
}

#background {

background-image: url(../pictures/siteBackground.png);
background-repeat: no-repeat;
background-position: left bottom;

position:fixed;
bottom:0px;
left:0px;
height: 100%;
width: 100%;
}

HTML (nie zmienia się - jest taki sam jak na starcie)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>

<div id="background">tu treść</div>
</body>
</html>

Marek

unread,

Nov 17, 2009, 3:33:02 PM11/17/09

to

> Dlaczego powtarzalnego tła nie przypiszesz do html zamiast
> body/dodatkowego diva?

To akurat był akt rozpaczy. Najpierw próbowałem z html jednakże nie chciało
zadziałać. Uzyskałem efekt, że dodanie background-color do html skutkowało,
że <body> przestawało zajmować 100% wysokości. Wtedy dodałem DIV'a i takim
etapemrozważań zacząłem operować na grupie. Tak czy owak problemu to nie
rozwiązuje.