Forum PHP.pl > [html][css]podział strony za pomocą css

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html][css]podział strony za pomocą css

Oscar_83

24.07.2007, 22:07:09

Witam
Próbuje podzielić stronkę za pomocą CSS (div), zawsze wcześniej robiłem to za pomocą ramek (frames), ale wyczytałem że za pomocą CSS jest dużo lepiej, więc próbuje, ale coś mi nie idzie :/ Narazie staram się podzielić i obszar podzielony zaznaczyłem przypadkowymi kolorami tła. Szerokość już jest niby oki, ale jeszcze w wysokości coś nie chce mi zrobić :/, proszę o doradzenie, jakieś podpowiedzi jak najlepiej jest to zrobić. Chciałbym też znać Waszą opinię czy robić wielkość na sztywno w pixelach czy może lepiej procentowo - jak Waszym zdaniem lepiej, żeby przy różnych rozdzielczościach w miare dobrze to wyglądało.

plik index.html:

[HTML] pobierz, plaintext 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Description" content="Oscary, drużyna" />
	<meta name="Keywords" content="piłka nożna" />
	<meta name="Author" content="Marek Żukowski" />
	<title>Drużyna</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="strona">
 
     <div id="naglowek">
     </div>
 
     <div id="kolumnaLewa">
     </div>
 
     <div id="koloumnaPrawa">
     </div>
 
     <div id="stopka">
     </div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

a pik style.css stworzyłem jak narazie taki:

[HTML] pobierz, plaintext 
#strona {
    margin           : auto;
    border           : 1px solid black;
    padding          : 0px;
    width            : 758px;
}
 
#naglowek {
    margin           : 0px;
    border           : none;
    padding          : 0px;
    background-color : black;
    width            : 758px;
}
 
#kolumnaLewa {
    margin           : 0px;
    border           : none;
    padding          : 0px;
    float            : left;
    background-color : yellow;
    width            : 180px;
}
 
#kolumnaPrawa {
    margin           : 0px;
    border           : none;
    padding          : 0px;
    float            : right;
    background-color : green;
    width            : 577px:
}
 
#stopka {
    margin           : 0px;
    border           : none;
    padding          : 0px;
    clear            : both;
    background-color : red;
    width            : 758px;
 
}
[HTML] pobierz, plaintext

plurr

24.07.2007, 22:50:14

na moje oko to bym sobie wpisal cos w divach przykladowego, pozniej wywalił z css'a margin i padding, bo i tak masz 0. I wtedy dopiero przystapil do pozycjonowania. Stopke wyciagnałbym poza głownego div'a, na sam dół, z naglowkiem bym zrobil to samo - na sama gore. Height srodka ustaw sobie lepiej na 100%, chyba ze robisz jakis sztywny szablon ze scrollem. Tak robilem swoja strone i wyglada okej

maziak

25.07.2007, 01:22:18

Witam, apropo układu w divach :

- duzo cennych informacji
http://www.gajdaw.pl/html/uklad-div-css.html

- bardzo uzyteczne narzedzie, nie tylko do cssa ;p
http://chrispederick.com/work/firefox/webdeveloper/

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.