CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Marek
Pozwoli�em sobie na kolejny w�tek upraszczaj�c temat tym razem. Czy istnieje
mo�liwo�� zrobienia dokumentu HTML strict z podw�jnym t�em tak aby drugie
(to na wierzchu) by�o wyr�wnane do dolnej lewej kraw�dzi dokumentu? Je�li
dokument jest kr�tszy ni� okno przegladarki to t�o powinno by� w roku
przegl�darki. Konstrukcja:
html {
min-height: 100%;
height:auto;
background-image: url(../pictures/siteBackground2.png);
background-repeat: repeat-x;
background-color: #F6F1F0;
}
body {
min-height:100%;
height:auto;
background-image: url(../pictures/siteBackground.png);
background-position: left bottom;
background-repeat: no-repeat;
}
Nie dzia�a ani w IE ani w FF.
Je�li nie da si� tego zrobi� to czy chocia� mo�liwe jest wyr�wnanie do lewej
dolnej kraw�dzi okna niezale�nie od wysoko�ci dokumentu?
Paweł Piskorz
> Jeśli nie da się tego zrobić to czy chociaż możliwe jest wyrównanie do
> lewej dolnej krawędzi okna niezależnie od wysokości dokumentu?
http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment
Marek
No i ?
Osobiście nie zauważyłem aby to działało pod FF lub IE8. Dla stron krótkich
background potrafi narysować się w połowie wysokości okna. Jeśli jest
"fixed" to zmienia się tylko to, że schodzi do krawędzi okna ale widać tylko
jego fragment - ten powyżej najniższego elementu strony. Gdy powiększę okno
bardziej to tło zniknie. Jak więc proponujesz zastosować ten atrybut?
Paweł Piskorz
>> http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment
>
> No i ?
> Osobiście nie zauważyłem aby to działało pod FF lub IE8.
To najwyraźniej nie rozumiesz jak to działa :)
> Dla stron
> krótkich background potrafi narysować się w połowie wysokości okna.
A jaką pozycję mu ustawiasz?
> Jeśli jest "fixed" to zmienia się tylko to, że schodzi do krawędzi okna
Czyż nie o to pytałeś? "Jeśli nie da się tego zrobić to czy chociaż
możliwe jest wyrównanie do lewej dolnej krawędzi okna niezależnie od
wysokości dokumentu?"
> ale widać tylko jego fragment - ten powyżej najniższego elementu strony.
> Gdy powiększę okno bardziej to tło zniknie.
Możesz jaśniej? Albo screen lub przykładowy kod.
Marek
Nie przeczę :) Do tej pory uważałem, że fixed oznacza niewrażliwość obrazu
tła na scrollowanie, że jego pozycja jest określona względem okna. Jeśli
jest inaczej to sprostuj mnie.
W praktyce tak jest tylko w szczególnych okolicznościach - gdy albo tło nie
jest wyrównywane do dolnej krawędzi albo strona jest dłuższa niż okno
przeglądarki. W przeciwnym razie tło jest ucinane lub nawet znika.
> A jaką pozycję mu ustawiasz?
Tak jak napisałem:
background-position: left bottom;
>
>> Jeśli jest "fixed" to zmienia się tylko to, że schodzi do krawędzi okna
>
> Czyż nie o to pytałeś? "Jeśli nie da się tego zrobić to czy chociaż
> możliwe jest wyrównanie do lewej dolnej krawędzi okna niezależnie od
> wysokości dokumentu?"
Tak ale co mi z tego, że tło wyrównane jest jak trzeba ale się nie renderuje
jego fragment?
> Możesz jaśniej? Albo screen lub przykładowy kod.
Kod podałem na samym początku. Jeśli chodzi o HTML to wystarczy sekcja body
z czymkolwiek co rozepchnie nieco tą sekcję w pionie. Dla pewności podaję
ten kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div id="rozpychacz">tu treść</div>
</body>
</html>
Style podałem wcześniej. Dla rozpychacza sugeruję narysować border wokół
niego. Zobaczysz, że tło poniżej dolnego borderu nie będzie widoczne. Jeśli
np. od krawędzi okna do dolnego borderu DIVa będzie tyle pikseli, że połowa
rysunku tła się tam zmieści to zobaczysz tylko drugą połowę rozpoczynającą
się od dolnego borderu DIV'a w górę.
Wygląda to tak, że z punktu widzenia wyświetlanej treści strony body kończy
się na poziomie końca dokumentu. Dla rysunku tła body kończy się przy
krawędzi okna. Obszar pomiędzy nie jest renderowany.
Czy mógłbyś zaproponować mi jakąś szybką metodę anonimowego udostępniania
screenshotów?
Paweł Piskorz
>> To najwyraźniej nie rozumiesz jak to działa :)
>
> Nie przeczę :) Do tej pory uważałem, że fixed oznacza niewrażliwość
> obrazu tła na scrollowanie, że jego pozycja jest określona względem
> okna. Jeśli jest inaczej to sprostuj mnie.
A jednak rozumiesz :)
>> Możesz jaśniej? Albo screen lub przykładowy kod.
>
> Kod podałem na samym początku. Jeśli chodzi o HTML to wystarczy sekcja
> body z czymkolwiek co rozepchnie nieco tą sekcję w pionie. Dla pewności
> podaję ten kod:
SOA#1
http://www.cubeupload.com/img/986800testbackgroundatta.png
Marek
> http://www.cubeupload.com/img/986800testbackgroundatta.png
Jutro poeksperymentuję i odpiszę.
Marek
> http://www.cubeupload.com/img/986800testbackgroundatta.png
Witaj,
Przepraszam, że z opóźnieniem odpisuję. Służbowy wyjazd miałem. Z obrazka
jaki mi przysłałeś wnioskuję, że nie dodałeś pierwszego backgroundu do
znacznika HTML. Zdeklaruj sobie w tym co zrobiłeś styl np:
html {
background-color:#900;
}
i wszystko Ci się rozleci. Background dodany do body znajdzie się w innym
miejscu niż bez w/w stylu.
Paweł Piskorz
>> SOA#1
>> http://www.cubeupload.com/img/986800testbackgroundatta.png
>
> Z obrazka jaki mi przysłałeś wnioskuję, że nie dodałeś pierwszego
> backgroundu do znacznika HTML.
Faktycznie, mój błąd.
> Zdeklaruj sobie w tym co zrobiłeś styl np:
>
> html {
> background-color:#900;
> }
>
>
> i wszystko Ci się rozleci. Background dodany do body znajdzie się w
> innym miejscu niż bez w/w stylu.
Jest w tym samym miejscu, tylko jest (jak napisałeś wcześniej) obcięty,
bo body jest za krótkie. Dodaj:
html, body {
height:100%;
}
Marek
> bo body jest za krótkie. Dodaj:
> html, body {
> height:100%;
> }
Dodanie tego spowoduje, że Body będzie wysokości 100% wysokości okna. Jeżeli
dokument zajmie 300% wysokości okna, to tło wystąpi w 1/3 wysokości. Więc
również będzie źle.
Paweł Piskorz
Przy background-attachment:fixed; będzie zawsze w tym samym miejscu.
Marek
>> Jeżeli dokument zajmie 300% wysokości okna, to tło wystąpi w 1/3
>> wysokości. Więc również będzie źle.
>
> Przy background-attachment:fixed; będzie zawsze w tym samym miejscu.
Właśnie - zawsze w tym samym złym miejscu gdy dokument jest wyższy niż okno.
To jest to o czym cały czas pisałem. Sprawdź jak to działa. Gdy dokument
jest wysokości 300% okna to tło wyświetli się w lewym dolnym rogu okna mimo
tego, że oglądasz górę tego dokumentu. Tymczasem tło powinno w tym przypadku
wyświetlić się na dole dokumentu a nie okna.
Paweł Piskorz
> Właśnie - zawsze w tym samym złym miejscu gdy dokument jest wyższy niż
> okno. To jest to o czym cały czas pisałem. Sprawdź jak to działa. Gdy
> dokument jest wysokości 300% okna to tło wyświetli się w lewym dolnym
> rogu okna mimo tego, że oglądasz górę tego dokumentu. Tymczasem tło
> powinno w tym przypadku wyświetlić się na dole dokumentu a nie okna.
Zwróć uwagę, że ja odpisuję Ci na fragment:
> Jeśli nie da się tego zrobić to czy chociaż możliwe jest wyrównanie do
> lewej dolnej krawędzi okna niezależnie od wysokości dokumentu?
I taki efekt właśnie mamy :]
Marek
>> Jeśli nie da się tego zrobić to czy chociaż możliwe jest wyrównanie do
>> lewej dolnej krawędzi okna niezależnie od wysokości dokumentu?
>
> I taki efekt właśnie mamy :]
Ahaaaa, sam się pogubiłem w wątku, o którym rozmawiamy :-)
Podsumowując naszą dyskusję:
przy stosowaniu konstrucji HTML/CSS stosującej dwa tła (jedno w tagu
bieżącym, a drugie w nadrzędnym) nie da się wyrównywać tła do dolnej części
dokumentu lub okna (wybrać wyższy obiekt)? Dobrze wnioskuję ?
Paweł Piskorz
> Podsumowując naszą dyskusję:
> przy stosowaniu konstrucji HTML/CSS stosującej dwa tła (jedno w tagu
> bieżącym, a drugie w nadrzędnym) nie da się wyrównywać tła do dolnej
> części dokumentu lub okna (wybrać wyższy obiekt)? Dobrze wnioskuję ?
To jest problem podobny do stopki na samym dole strony, da się taką
stopkę zrobić to i da się takie tło ustawić. Możesz spróbować tak:
html, body { height:100%; width:100%; }
html {
display:table;
}
body {
display:table-cell;
}
I w przeglądarkach* body będzie zawsze takie jakie chcesz.
* do grona owych nie zaliczamy IE.
Paweł Piskorz
> Podsumowując naszą dyskusję:
> przy stosowaniu konstrucji HTML/CSS stosującej dwa tła (jedno w tagu
> bieżącym, a drugie w nadrzędnym) nie da się wyrównywać tła do dolnej
> części dokumentu lub okna (wybrać wyższy obiekt)? Dobrze wnioskuję ?
To jest problem podobny do stopki na samym dole strony, da się taką
stopkę zrobić to i da się takie tło ustawić, ale nie jest to banalne i
dlatego poszedłem na łatwiznę i odpowiedziałem tylko na drugą część
Twojego pytania.