Forum PHP.pl > [CSS] Rozmieszczenie divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Rozmieszczenie divów

pavobe

5.10.2007, 16:18:43

Chodzi o rozciągnięcie strony tak, aby stopka była na samym dole, a jeżeli potrzeba - obniżała się. Próbowałem dać wszystko do jednego diva, ustawić mu 100% wysokości i stopke wyrównać do dołu, ale efekt jest taki. Stopka jest, ale akurat tak, że cała jest ukryta. Co mam zrobić ? (Te kolorki, to tylko po to, żebym "widział" divy)

Kody źródłowe:

Index.html (później .php)

Kod

<html>
     <head>
         <link rel="Stylesheet" type="text/css" href="default.css" />
         <title>PHP Site</title>
     </head>
     <body>

     <div id="site">
     <div id="header">
     </div>
     <div id="search">
     </div>

     <div id="main">
     <div id="sidebar">
     Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here ! Sidebar is here !
     </div>
     <div id="content">
     Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here! Content is here!
     </div>
     </div>

     </div>

     <div id="footer">Footer is here ! Footer is here ! Footer is here ! Footer is here ! Footer is here ! Footer is here !</div>

     </body>
     </html>

default.css (ciągle w trakcie modyfikacji

)

Kod

body {
         margin: 0px;
         padding: 0px;
         background-image: url(images/header_bg.jpg);
         background-repeat: repeat-x;
     }

     div {
         margin: 0px;
         padding: 0px;
     }

     img {
         border-style: none;
     }

     #site {
         height: 100%;
         width: 900px;
         margin: auto;
         padding: 0px;
     }

     #header {
         height: 136px;
         background-color: red;
     }

     #search {
         height: 67px;
         background-color: green;
     }

     #content {
         margin-right: 250px;
         background-color: black;
     }

     #sidebar {
         width: 250px;
         float: right;
         background-color: red;
     }

     #footer {
         height: 58px;
         clear: both;
         vertical-align: bottom;
         background-image: url(images/footer_bg.jpg);
         background-repeat: repeat-x;
     }

deirathe

6.10.2007, 08:33:24

użyj position:relative i position:absolute , np

[HTML] pobierz, plaintext 
<div id="site" style="position:absolute;top:0px;margin-left:auto;margin-right:auto;width:800px;">
 tutaj strona
</div>
<div id="footer" style="position:relative;top:0px; width:800px; margin-right:auto;margin-left:auto;">
stopka
</div>
[HTML] pobierz, plaintext

pisane z palca sprawdz czy dziala

Kreton

6.10.2007, 08:43:50

Było na forum już :
http://www.xs4all.nl/~peterned/examples/csslayout1.html

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.