Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: BOX Model
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
marcini82
23.11.2005, 21:40:05
Witam!

Stworzylem taki uklad strony, na ktorym ma sie opierac pewien serwis:
http://cerber.cs.put.poznan.pl/~inf77213/layout.php

I mam 2 glowne problemy:
1. Jak ustawic stopke na samym dole? Teraz jest ona schowana pod naglowkiem.
2. Jak ustawic obszar container tak, aby byl na srodku ekranu, a po lewej i prawej stronie przy rozdzielczosci 1024x768 lub wyzszej bylo wolne miejsce?

Moze ktos wprowadzi tu jakies poprawki?

Umieszczam CSS zeby nie trzeba bylo kombinowac:
[HTML] pobierz, plaintext 
  1. #container {
  2.    width:770px;
  3.    height: 100%;
  4.    vertical-alignment: middle;
  5.    background-color: lightblue;
  6.    }
  7. #naglowek {
  8.    position: absolute;
  9.    top: 0px;
  10.    left: 10px;
  11.    width: 770px;
  12.    height: 100px;
  13.    background-color: cyan;
  14.    }
  15. #menu {
  16.    float: left;
  17.    position: absolute;
  18.    top: 100px;
  19.    left: 10px;
  20.    width: 150px;
  21.    height: 300px;
  22.    background-color: yellow;
  23.    }
  24. #srodek {
  25.    float: left;
  26.    position: absolute;
  27.    top: 100px;
  28.    left: 160px;
  29.    width: 620px;
  30.    height: auto !important;
  31.    height: 600px; /* IE */
  32.    min-height: 100%;
  33.    background-color: blue;
  34.    }
  35. #stopka {
  36.    clear: both;
  37.    width: 100%;
  38.    heigt: 50px;
  39.    }
[HTML] pobierz, plaintext
mike
23.11.2005, 23:33:28
Ja bym szedł w tym kierunku:
[HTML] pobierz, plaintext 
  1. BODY {
  2.    background-color: lightblue;
  3.    }
  4. #container {
  5.    width:770px;
  6.    height: 100%;
  7.    margin: auto;
  8.    background-color: lightblue;
  9.    overfow: auto;
  10.    }
  11. #naglowek {
  12.    width: 770px;
  13.    height: 100px;
  14.    background-color: cyan;
  15.    }
  16. #menu {
  17.    float: left;
  18.    width: 150px;
  19.    height: 300px;
  20.    background-color: yellow;
  21.    }
  22. #srodek {
  23.    float: left;
  24.    width: 620px;
  25.    height: auto !important;
  26.    height: 700px; /* IE */
  27.    min-height: 400px;
  28.    background-color: blue;
  29.    }
  30. #stopka {
  31.    float: right;
  32.    width: 620px;
  33.    heigt: 50px;
  34.    background-color: red;
  35.    }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <head>
  5.   <title></title>
  6.   <meta name="GENERATOR" content="Quanta Plus">
  7.   <meta name="AUTHOR" content="Marcin Iwański">
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  9.   <link rel="stylesheet" type="text/css" href="glowny.css">
  10.  
  11. </head>
  12. <body>
  13.  
  14. <div id="container">
  15.  
  16.   <div id="naglowek">
  17.   naglowek
  18.   </div>
  19.  
  20.   <div id="menu">
  21.   menu
  22.   </div>
  23.  
  24.   <div id="srodek">
  25.   srodek
  26.   </div>
  27.  
  28.   <div id="stopka">
  29.   stopka
  30.   </div>
  31.  
  32. </div>
  33.  
  34.  
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


P.S.
Jak używasz float'ów to nie mieszaj tego z pozycjonowaniem absolutym tak jak to zrobiłeś.
marcini82
25.11.2005, 16:01:16
No elegancko. Dzieki biggrin.gif
Musze jeszcze troche poczytac na ten temat.
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.