Zaloguj się

jurkos · 21-07-2009, 22:18

Witam wszystkich

Mam taki problem i nie wiem czy jest to wykonalne.

Chcialbym aby #bottom (w tej chwili niewidoczny - jest zielony) rozciagal sie do konca ekranu (na wysokosci), lecz gdy np #top zwiekszy swoja wysokosc to elemenet #bottom automatycznie ją zmniejszał, a w przypadku gdy wysokosc #top przekroczy 100% okna to po przewinięciu ekranu był widoczny element #footer (wysokosc podana na sztywno 200px). Jeśli mnie ktoś zrozumie to będzie super a jeszcze lepiej jeśli mi ktoś pomoże Smile

z góry dzięki

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body {margin:0px;}

#top {background-color: #900;}

#bottom{background-color: #390;}

#footer {background-color:#C90; height:200px;}

</style>

</head>

<body>

<div id="top">

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

</div>

<div id="bottom">

    <div id="footer">footer</div>

</div>

</div>

</body>

</html>

Leja · 21-07-2009, 22:33

ja do końca nie rozumiem jak chcesz żeby bottom był większy to daj mu height: (tu wpisz wartość w px); chyba ot to ci chodzi albo nieweim

jurkos · 21-07-2009, 22:36

Niestaty nie. Chcialbym aby to bylo dynamiczne czyli bez podawania na sztywno wymiarow

Leja · 21-07-2009, 23:44

nie wiem do końca o co chodzi

Piana · 26-07-2009, 02:37

Nie kminie tego.
Może narysuj, chociażby w Paincie schematyczny obrazek który przedstawia o co chodzi. Może w tedy będziemy w stanie ci pomóc.

Leja · 26-07-2009, 03:22

własnie może tak bd najlepiej albo pokaż na jakimś przykładzie gdzieś w necie pozdro Cool

**KowR** · (Ten post był ostatnio modyfikowany: 26-07-2009, 16:09 przez KowR.)

OMG.

Kod:
<body>

<div id="strona">

 <div id="top">

   <p>top</p>

 </div>

 <div id="tresc">

      <p>dwadawdjadw hwadjawhd awj dahdakdh</p>

 </div>

</div>

<div id="footer">

   <div id="strona_footer">

      <p>treść footer</p>

   </div>

</div>

</body>

To w XHTML, a teraz CSS:

Kod:
body {

margin:0px;

padding:0px;

text-align:center;

}

div#strona {

margin:0px auto;

padding:0px;

width:800px;

text-align:left;

}

div#top {

margin:0px;

padding:0px

text-align:center;

width:800px;

float:left;

}

div#tresc {

margin:0px;

padding:0px

text-align:center;

width:800px;

float:left;

}

div#footer {

float:left;

width:100%;

margin:0px;

padding:0px;

height:200px;

background-color:green;

}

div#strona_footer {

margin:0px auto;

padding:0px;

width:800px;

text-align:left;

float:left;

}

Pisane z palca, nie sprawdzałem, ale powinno działać. Big Grin

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie