Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 3 div obok siebie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
ONdragon
Witam mam taki przykładowy kod:
Kod
<div>
    <div class="Goralewa Boczne inline">
    </div>
    <div class="GoraPrawa Boczne inline">
    </div>
    <div class="Gora Srodek">
    </div>
    
    
    <div class="DolLewa Boczne inline">
    </div>
    <div class="DolPrawa Boczne inline">
    </div>
    <div class="Dol Srodek">
    </div>
</div>


Oraz CSS:

Kod
.inline {
    display: inline;
    float: left;
}

.Boczne {
    width:50%;
    height: 70px;    
}

.Srodek {
    width:70px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:0;
}

.Gora{
    background: pink;
}

.GoraPrawa {
     background: blue;
}

.Goralewa {
    background: red;
}

.Dol {
    background: green;
}

.DolPrawa{
    background: black;
}

.DolLewa {
    background: yellow;
}


Chodzi o to by div środkowy (górny i dolny) był zawsze na środku okna przeglądarki, oraz by miał określoną szerokość. Natomiast boczne powinny dostosowywać swoją szerokość w zależności od wielkości okna przeglądarki (od lewej strony przeglądarki do środkowego diva i od środkowego diva do prawej strony przeglądarki)... Chodzi o to ze mam obrazek o zadanej szerokości. Obrazek ma być nagłówkiem strony. Przedstawia gradient z koloru a do koloru b. Chce wstawić ten obrazek jako tło środkowego diva... Natomiast boczne divy mają przedstawiać kolory tła boczne a i b. Chce by kolory były widoczne na całej długości okna przeglądarki (Od lewej strony okna przeglądarki do gradientu i od gradientu końca prawej strony okna)...

Przedstawiony kod działa ładnie (tak jak bym chciał) ale tylko w FF i Opera. Natomiast w IE6 się wysypuje.
Macie może pomysł jakich styli użyć by działało również w IE?

A może macie jakiś zupełnie inny pomysł na zrobienie opisanego nagłówka.

Pozdrawiam
toaspzoo
  1. margin:0 auto;
  2. float:left;
  3. float:right;


ew. position

Albo procenty albo pixele
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.