CSS - jak wyrównać tło do dolnej lewej krawędzi ? - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - jak wyrównać tło do dolnej lewej krawędzi ?

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 17

1. Data: 2009-11-18 21:51:22
Temat: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

Witam,

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?

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2009-11-19 00:23:06
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: Paweł Piskorz <n...@p...nie?>

Marek wrote:
> 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-backg
round-attachment

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2009-11-19 13:17:23
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

> http://www.w3.org/TR/CSS21/colors.html#propdef-backg
round-attachment

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?

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2009-11-19 17:20:15
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: Paweł Piskorz <n...@p...nie?>

Marek wrote:
>> http://www.w3.org/TR/CSS21/colors.html#propdef-backg
round-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.

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2009-11-19 22:37:26
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

> 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.

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?

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2009-11-21 11:51:46
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: Paweł Piskorz <n...@p...nie?>

Marek wrote:
>> 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/986800testbackgroundat
ta.png

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2009-11-21 14:28:59
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

> SOA#1
> http://www.cubeupload.com/img/986800testbackgroundat
ta.png

Jutro poeksperymentuję i odpiszę.

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2009-11-24 18:23:03
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

> SOA#1
> http://www.cubeupload.com/img/986800testbackgroundat
ta.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.

[ pokaż wiadomość z nagłówkami ]

do góry
9. Data: 2009-11-25 11:36:19
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: Paweł Piskorz <n...@p...nie?>

Marek wrote:
>> SOA#1
>> http://www.cubeupload.com/img/986800testbackgroundat
ta.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%;
}

[ pokaż wiadomość z nagłówkami ]

do góry
10. Data: 2009-11-25 12:09:48
Temat: Re: CSS - jak wyrównać tło do dolnej lewej krawędzi ?
Od: "Marek" <m...@s...interia.pl>

> 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%;
> }

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.

[ pokaż wiadomość z nagłówkami ]

do góry