Witam,

W jaki sposób mógłbym zrealizować tło aby od połowy ekrano na lewo tło było
niebieskie, a na prawo - białe? Chodzi o to, że barwa będzie musiała być
zmieniana programowo więc nie wchodzą w grę bitmapy. Po drugie tło białe
nie będzie zaczynało się od środka strony lecz od środka minus połowa
szerokości treści straony (obiekt container). Innymi słowy treść strony ma
być zawsze na białym a strona ma być wyśrodkowana.

Zrobiłem coś takiego:

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

Gdzie:

html {
margin: 0px;
padding: 0px;
position: relative;
height: 100%;
}


body {
background-color: #00859E;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
margin: 0px;
position: relative;
padding: 0px;
height: 100%;
}
#background {
background-color: #FFF;
height: 100%;
width: 50%;
position: fixed;
left: 50%;
z-index: -1;
}
#containter {
background-color: #FFF;
width: 885px;
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
min-height: 100%;
}

Działa to prawie idealnie z wyjątkiem sytuacji gdy treść strony jest wyższa
od okna przeglądarki. Wtedy powstaje taka sytuacja, że tło elementu
comtainer kończy się a tekst leci jeszcze dalej. Próbowałem nadać
containerowi min-height:100% zamiast height: 100% lecz jest to ignorowane
przez przeglądarki.

do góry

On Mon, 01 Aug 2011 13:15:06 +0200, Marek wrote:

> Witam,
>
> W jaki sposób mógłbym zrealizować tło aby od połowy ekrano na lewo tło
> było niebieskie, a na prawo - białe? Chodzi o to, że barwa będzie
> musiała być zmieniana programowo więc nie wchodzą w grę bitmapy.

wchodzą wchodzą. background-color daj white, a background-image daj
http://adres/skrypt.php?color=blue. Skrypt php bedzie generowal
dynamicznie obrazek o pewnej szerokosci i kolorze pobranym z $_GET
['color']

oczywiscie dla obrazka w tle zabierz repeat-x i daj mu pozycjonowanie do
lewej



--
pozdrawiam, Konrad Karpieszuk

do góry

Dnia Mon, 1 Aug 2011 11:58:58 +0000 (UTC), |<onrad napisał(a):

> On Mon, 01 Aug 2011 13:15:06 +0200, Marek wrote:
>
>> Witam,
>>
>> W jaki sposób mógłbym zrealizować tło aby od połowy ekrano na lewo tło
>> było niebieskie, a na prawo - białe? Chodzi o to, że barwa będzie
>> musiała być zmieniana programowo więc nie wchodzą w grę bitmapy.
>
> wchodzą wchodzą. background-color daj white, a background-image daj
> http://adres/skrypt.php?color=blue. Skrypt php bedzie generowal
> dynamicznie obrazek o pewnej szerokosci i kolorze pobranym z $_GET
> ['color']
>
> oczywiscie dla obrazka w tle zabierz repeat-x i daj mu pozycjonowanie do
> lewej

W ten sposób będę musiał wygererować kilkadziesiąt bitmap albo robić to
programowo w PHP. Dlatego chciałem tło zrobić na stylach.

Do lewej? W tym przypadku lewy margines (w sensie koloru) będzie oddalony
od krawędzi strony o tą samą odległość. Tymczasem środkowana zawartość
srony będzie zmieniała swoją odległość od krawędzi wraz z rozszerzaniem
okna przeglądarki. W efekcie nigdy nie trafi we właściwy obszar tła, którym
jest parę pikseli zaraz za granicą zmiany koloru.

To już lepiej byłuby wygenerować bardzo szeroką bitmapę. Powiedzmy 4000px o
asymetrycznym podziale kolorów i centrować ją oraz repeat-y;

do góry

W dniu 2011-08-01 13:15, Marek pisze:
> Działa to prawie idealnie z wyjątkiem sytuacji gdy treść strony jest wyższa
> od okna przeglądarki. Wtedy powstaje taka sytuacja, że tło elementu
> comtainer kończy się a tekst leci jeszcze dalej. Próbowałem nadać
> containerowi min-height:100% zamiast height: 100% lecz jest to ignorowane
> przez przeglądarki.
> #containter {
> background-color: #FFF;
> width: 885px;
> position: relative;
> height: 100%;

Wyrzuć height, zostaw tylko min-height.

> margin-right: auto;
> margin-left: auto;
> min-height: 100%;
> }


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Dnia Mon, 01 Aug 2011 17:25:22 +0200, Paweł Piskorz napisał(a):

> W dniu 2011-08-01 13:15, Marek pisze:
>> Działa to prawie idealnie z wyjątkiem sytuacji gdy treść strony jest wyższa
>> od okna przeglądarki. Wtedy powstaje taka sytuacja, że tło elementu
>> comtainer kończy się a tekst leci jeszcze dalej. Próbowałem nadać
>> containerowi min-height:100% zamiast height: 100% lecz jest to ignorowane
>> przez przeglądarki.
>> #containter {
>> background-color: #FFF;
>> width: 885px;
>> position: relative;
>> height: 100%;
>
> Wyrzuć height, zostaw tylko min-height.
>
>> margin-right: auto;
>> margin-left: auto;
>> min-height: 100%;
>> }

Powyżej napisałem, że właśnie tak postąpiłem i że przeglądarki to
ignorowały. DIV o min-heigh: 100% jest wysokości tego co ma w środku nawet
jeśli jest to połowa wysokości ekranu. Hint: <body> ogranicza możliwość
powiększenia się DIVa z procentowym min-heigh gdyż w jego przypadku
min-height nie działa w ogóle. Pod IE9 F12, Ctrl+B, wskazuję na BODY i
widzę jego granice. Pod FF analogicznie z Firebugiem.

do góry

W dniu 2011-08-01 22:27, Marek pisze:
> Powyżej napisałem, że właśnie tak postąpiłem i że przeglądarki to
> ignorowały. DIV o min-heigh: 100% jest wysokości tego co ma w środku nawet
> jeśli jest to połowa wysokości ekranu.

Jaki Doctype ustawiłeś? Dla <!DOCTYPE html> działa tak jak chcesz.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Dnia Wed, 03 Aug 2011 17:00:39 +0200, Paweł Piskorz napisał(a):

> W dniu 2011-08-01 22:27, Marek pisze:
>> Powyżej napisałem, że właśnie tak postąpiłem i że przeglądarki to
>> ignorowały. DIV o min-heigh: 100% jest wysokości tego co ma w środku nawet
>> jeśli jest to połowa wysokości ekranu.
>
> Jaki Doctype ustawiłeś? Dla <!DOCTYPE html> działa tak jak chcesz.

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

do góry

W dniu 2011-08-04 22:21, Marek pisze:
> Dnia Wed, 03 Aug 2011 17:00:39 +0200, Paweł Piskorz napisał(a):
>
>> W dniu 2011-08-01 22:27, Marek pisze:
>>> Powyżej napisałem, że właśnie tak postąpiłem i że przeglądarki to
>>> ignorowały. DIV o min-heigh: 100% jest wysokości tego co ma w środku nawet
>>> jeśli jest to połowa wysokości ekranu.
>>
>> Jaki Doctype ustawiłeś? Dla<!DOCTYPE html> działa tak jak chcesz.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">

Hmm, dziwne, dla tego DTD też u mnie działa :)


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry