Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html][css]podział strony za pomocą css
Oscar_83
post
Post #1





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 10.05.2007

Ostrzeżenie: (0%)
-----

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 
  1. <html>
  2. <head>
  3. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. 	<meta name="Description" content="Oscary, drużyna" />
  5. 	<meta name="Keywords" content="piłka nożna" />
  6. 	<meta name="Author" content="Marek Żukowski" />
  7. 	<title>Drużyna</title>
  8. 	<link href="style.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11. <div id="strona">
  12.  
  13.      <div id="naglowek">
  14.      </div>
  15.  
  16.      <div id="kolumnaLewa">
  17.      </div>
  18.  
  19.      <div id="koloumnaPrawa">
  20.      </div>
  21.  
  22.      <div id="stopka">
  23.      </div>
  24. </div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


a pik style.css stworzyłem jak narazie taki:
[HTML] pobierz, plaintext 
  1. #strona {
  2.     margin           : auto;
  3.     border           : 1px solid black;
  4.     padding          : 0px;
  5.     width            : 758px;
  6. }
  7.  
  8. #naglowek {
  9.     margin           : 0px;
  10.     border           : none;
  11.     padding          : 0px;
  12.     background-color : black;
  13.     width            : 758px;
  14. }
  15.  
  16. #kolumnaLewa {
  17.     margin           : 0px;
  18.     border           : none;
  19.     padding          : 0px;
  20.     float            : left;
  21.     background-color : yellow;
  22.     width            : 180px;
  23. }
  24.  
  25. #kolumnaPrawa {
  26.     margin           : 0px;
  27.     border           : none;
  28.     padding          : 0px;
  29.     float            : right;
  30.     background-color : green;
  31.     width            : 577px:
  32. }
  33.  
  34. #stopka {
  35.     margin           : 0px;
  36.     border           : none;
  37.     padding          : 0px;
  38.     clear            : both;
  39.     background-color : red;
  40.     width            : 758px;
  41.  
  42. }
[HTML] pobierz, plaintext


Ten post edytował Oscar_83 24.07.2007, 22:07:55
Go to the top of the page
+Quote Post
plurr
post
Post #2





Grupa: Zarejestrowani
Postów: 175
Pomógł: 12
Dołączył: 28.06.2007
Skąd: Bytom

Ostrzeżenie: (0%)
-----

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 smile.gif


--------------------
Wyobraźnia bez wiedzy może stworzyć rzeczy piękne.
Wiedza bez wyobraźni najwyżej doskonałe.
Albert Einstein
Go to the top of the page
+Quote Post
maziak
post
Post #3





Grupa: Zarejestrowani
Postów: 155
Pomógł: 17
Dołączył: 9.07.2007

Ostrzeżenie: (0%)
-----

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/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 02:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn