Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Szablon strony
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
gumer
15.02.2010, 20:15:05
Witam. Dopiero raczkuję w temacie CSS, dlatego proszę o pomoc. Chciałbym stworzyć szablon strony, której wysokość zawsze by miała 100%. Nagłówek (1) i menu (2) miałby stałą wysokość, a pozostały obszar strony (3) był dynamicznie powiększany do wysokości 100% bez różnicy, czy jest jest tam mało czy dużo treści. Strona miałaby 900px szerokości i była wyśrodkowana.



Z góry dziękuję za ewentualną pomoc.
darophp
15.02.2010, 21:28:41
No niech Ci będzie ... 

[HTML] pobierz, plaintext 
  1.  
  2. ... reszte napisz sobie
  3.  
  4. <div id="page">
  5. <div id="header">Tekst</div>
  6. <div id="menu">tekst</div>
  7. <div id="menu">tekst</div>
  8. </div>
  9.  
[HTML] pobierz, plaintext


style.css

[HTML] pobierz, plaintext 
  1.  
  2. * {
  3.   margin: 0; 
  4.   padding: 0;
  5. }
  6.  
  7. #page {
  8. width: 900px;
  9. }
  10.  
  11. #header {
  12. height: 100px;
  13. }
  14.  
  15. #menu {
  16. height: 30px;
  17. }
  18.  
  19. #main {
  20. height: 100%;
  21. }
  22.  
[HTML] pobierz, plaintext


Po dostrajaj sobie, mam nadzieję, że o to Ci chodziło. Ustaw sobie inne parametry i będzie dobrze winksmiley.jpg
gumer
15.02.2010, 21:50:36
Dziękuję, ale niestety, jeśli jest mało tekstu to div #main nie "dotyka" paska stanu w przeglądarce.
darophp
19.02.2010, 08:02:29
W css we footer:

[HTML] pobierz, plaintext 
  1. #footer {
  2.   bottom: 0px;
  3.   position: fixed;
  4. }
[HTML] pobierz, plaintext
krzysztof_kf
21.02.2010, 19:37:47
masz przykład style.css

Kod
<style type="text/css">

#top {
width: 900px;
margin: 0 auto;
}

#header {
width: 900px;
height:  200px;
background: #3399ff;
}

#menu {
width: 900px;
height: 30px;
background: #ff0000;
}

#text {
width: 900px;
height: 100%;

}

</style>


formułka

Kod
<div id="top">
<div id="header">
</div>
<div id="menu">
</div>
<div id="text">
Jakiś tam tekst
</div>
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.