Forum PHP.pl > [CSS]rozciagliwosc diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Stef@n

26.03.2009, 18:27:46

Witam,
mam problem najpierw podam link do strony aby bardziej obrazowo to przedstawić http://www.kozuchykorzen.pl/test.html

1) Otóż problem polega na tym ze div#srodek (powinno być białe tło) nie rozciąga się z treścią zawartą w nim. Nie mam zielonego pojęcia jak to zrobić, pod IE nie ma problemu bo się rozciąga a pod FF nie widać.
2) Drugi problem to ramka którą chce aby div#okienko_left i div#okienko_right rozciągały się równo do dołu z div#okienko_tresc.

Proszę was bardzo o pomoc, podaje kod:

.html

Kod

<div id="srodek">
    <div id="okienko">
        <div id="okienko_top"></div>
        <div id="okienko_left"></div>
        <div id="okienko_tresc">jakas tresc<br />fdgfgf</div>
        <div id="okienko_right"></div>
        <div id="okienko_bottom"></div>
    </div>
</div>

.css

Kod

body {
    background-color: #702F4A; margin-top: 0px; font-family: Arial; color: #000000; font-size: 12px; line-height: 18px;
}
#srodek {
    width: 780px; margin: auto; background-color: #FFFFFF;
}
#okienko {
    width: 276px; height: 59px; display: block; float: left; padding-left: 36px;
}
#okienko_top {
    background-image: url(okienko/top.jpg); display: block; width: 276px; height: 34px; clear: both;
}
#okienko_left {
    background-image: url(okienko/left.jpg); display: block; width: 5px; float: left;
}
#okienko_tresc {
    display: block; width: 249px; float: left; background-image: url(../grafika/okienko/bg.jpg); background-color: #FFFFFF; background-repeat: no-repeat; background-position: bottom;
}
#okienko_right {
    background-image: url(okienko/right.jpg); display: block; width: 22px; float: left;
}
#okienko_bottom {
    background-image: url(okienko/bottom.jpg); display: block; width: 276px; height: 37px; clear: both;
}

Pozdrawiam

bluesqad

26.03.2009, 21:06:13

Cytat

#okienko_tresc {
display: block; width: 249px; float: left; background-image: url(../grafika/okienko/bg.jpg); background-color: #FFFFFF; background-repeat: no-repeat; background-position: bottom;

no spójrz sam. jak Ci sie ma rozciągać jak ustawiłeś szerokosć okna w nim zawartego i to tego w którym jest treść na 249px. to ono choćby chciało to szersze nie bedzie...

Stef@n

27.03.2009, 00:35:34

Sorry ale napisałem chyba wyraźnie ze ma się rozciągać do dołu!

bluesqad

27.03.2009, 09:10:29

Cytat

#okienko {
width: 276px; height: 59px; display: block; float: left; padding-left: 36px;
}
#okienko_top {
background-image: url(okienko/top.jpg); display: block; width: 276px; height: 34px; clear: both;
}
#okienko_left {
background-image: url(okienko/left.jpg); display: block; width: 5px; float: left;
}
#okienko_tresc {
display: block; width: 249px; float: left; background-image: url(../grafika/okienko/bg.jpg); background-color: #FFFFFF; background-repeat: no-repeat; background-position: bottom;
}
#okienko_right {
background-image: url(okienko/right.jpg); display: block; width: 22px; float: left;
}

Styl #okienko Ci oranicza wysokosć na 59px wiec wieksze nie bedzie.
reszta Ci sie dopasuje. mozesz ustawic tez wszystkie na wartosci procentowe. okienko ustaw na jakas wartość większą

ustaw height na jakas wartoscwiększą albo na wartosć chociaz procentowa co by sie zmienialo dynamicznie w zaleznosci od rozdzielczosci
bo tak to masz ustawione ze w zaleznosci od tego ile testu naklepiesz to wtedy Ci sie odpowiednio rosciaągnie

InosU31

27.03.2009, 11:00:29

w obramowaniu czyli w tym nadrzednym div

#srodek {
width: 780px; margin: auto; background-color: #FFFFFF;

dodaj :
height: auto;
overflow: auto;

poprobuj jak bede w domu to Ci to sprobuje poprawic jak nie dasz rady;-)

Pozdrawiam

Stef@n

28.03.2009, 10:40:19

Dzięki zadziałało

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.