eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS - jak zdefiniować tło? › CSS - jak zdefiniować tło?
  • Path: news-archive.icm.edu.pl!news.icm.edu.pl!not-for-mail
    From: Marek <p...@s...com>
    Newsgroups: pl.comp.www
    Subject: CSS - jak zdefiniować tło?
    Date: Mon, 1 Aug 2011 13:15:06 +0200
    Organization: Dzial Sieciowy ICM, Uniwersytet Warszawski
    Lines: 59
    Message-ID: <1...@4...net>
    NNTP-Posting-Host: 87-206-216-115.dynamic.chello.pl
    Mime-Version: 1.0
    Content-Type: text/plain; charset="utf-8"
    Content-Transfer-Encoding: 8bit
    X-Trace: news.net.icm.edu.pl 1312197307 31555 87.206.216.115 (1 Aug 2011 11:15:07
    GMT)
    X-Complaints-To: u...@n...net.icm.edu.pl
    NNTP-Posting-Date: Mon, 1 Aug 2011 11:15:07 +0000 (UTC)
    User-Agent: 40tude_Dialog/2.0.15.41pl
    Xref: news-archive.icm.edu.pl pl.comp.www:399187
    [ ukryj nagłówki ]

    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.

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: