-
1. Data: 2009-11-14 00:24:28
Temat: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
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;
-
2. Data: 2009-11-14 10:21:20
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
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ł.
-
3. Data: 2009-11-15 11:43:35
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: Wywrota <a...@g...com>
On 14 Lis, 11:21, "Marek" <m...@s...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 ;)
-
4. Data: 2009-11-15 14:30:10
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
>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.
-
5. Data: 2009-11-15 14:53:29
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
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.
-
6. Data: 2009-11-15 16:29:00
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: Wywrota <a...@g...com>
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
-
7. Data: 2009-11-15 22:44:54
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
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.
-
8. Data: 2009-11-15 22:46:19
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: "Marek" <m...@s...interia.pl>
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ę.
-
9. Data: 2009-11-15 22:55:44
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: Katarzyna 'Bastet' Świderska <b...@C...wp.pl>
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
-
10. Data: 2009-11-16 15:44:13
Temat: Re: CSS - dziwny problem z tłem (cd.)
Od: Wywrota <a...@g...com>
On 15 Lis, 23:46, "Marek" <m...@s...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ę.
Nie ma problemu napisz na email myślę że nie będziesz taki upierdliwi
jak czasem ludzie bywają ;) Pisz smiało, czekam
do góry
Wakacje w Polsce, za granicą czy w domu?
