Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] CSS+DIV pierwsze kroki
Rastman
post
Post #1





Grupa: Zarejestrowani
Postów: 177
Pomógł: 0
Dołączył: 6.06.2004

Ostrzeżenie: (20%)
X----

Witam,
zaczynam przygodę z CSS+DIV. Wcześniej robiłem wszystko na tabelach. Mam poniższy kod:

plik css

[HTML] pobierz, plaintext 
  1. html, body
  2. {
  3. 	background: url(images/strony_internetowe_tlo.jpg);
  4. 	width: 1000px;
  5. 	margin: 0px 0px 0px 0px;
  6. }
  7. div#main
  8. {
  9. 	width: 950px;
  10. 	height: 500px;
  11. 	text-align: center;
  12. 	position: absolute;
  13. 	left: 50%; margin-left: -475px;
  14. }
  15. div#top
  16. {
  17. 	background: Yellow;
  18. 	width: 950px;
  19. 	height: 50px;
  20. 	text-align: center;
  21. 	position: absolute;
  22. 	left: 0%; margin-left: 0px;
  23. }
  24. div#left
  25. {
  26. 	background: Black;
  27. 	width: 50px;
  28. 	height: 100%;
  29. 	text-align: center;
  30. 	position: static;
  31. 	left: 0%;
  32. 	margin-left: 0px;
  33. 	top: 50px;
  34. 	float: left;
  35. }
  36. div#right
  37. {
  38. 	background: blue;
  39. 	width: 50px;
  40. 	height: 100%;
  41. 	text-align: center;
  42. 	position: static;
  43. 	top: 50px;
  44. 	float: left;
  45. }
  46. div#content
  47. {
  48. 	background: fuchsia;
  49. 	width: 850px;
  50. 	height: 100%;
  51. 	text-align: center;
  52. 	position: static;
  53. 	top: 50px;
  54. 	float: left;
  55. }
  56. div#footer
  57. {
  58. 	background: #b22222;
  59. 	width: 850px;
  60. 	height: 50px;
  61. 	text-align: center;
  62. 	position: static;
  63. 	float: left;
  64. 	vertical-align: baseline;
  65. 	left: 0px;
  66. }
  67. div#substance
  68. {
  69. 	background: aqua;
  70. 	width: 850px;
  71. 	text-align: center;
  72. 	position: static;
  73. 	float: left;
  74. 	height: auto;
  75. 	left:0px;
  76. 	vertical-align: baseline;
  77. }
[HTML] pobierz, plaintext


plik html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <link rel="stylesheet" href="style.css">
  7.   <title></title>
  8.  
  9.   </head>
  10.   <body>
  11.       <div id="main">
  12.          <div id="top">
  13.            <p>top</p>
  14.          </div>
  15.          <div id="left">
  16.           <p>l</p>
  17.          </div>
  18.          <div id="content">
  19.             <div id="substance">
  20.              <p>substance</p>
  21.             </div>
  22.             <div id="footer">
  23.              <p>footer</p>
  24.             </div>
  25.          </div>
  26.          <div id="right">
  27.           <p>r</p>
  28.          </div>
  29.       </div>
  30.  
  31.   </body>
  32. </html>
  33.  
[HTML] pobierz, plaintext


czemu tylko w divach top i footer wyświetlana jest jakakolwiek zawartość? Jak zrobić, aby div substance wypełniał całą zawartość diva content minus footer?
z góry dzięki wielkie za pomoc
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Kostek.88
post
Post #2





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

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

Zwykle 3 kolumnowe strony robi się tak:

- nagłówek
- left
- middle
- right
- stopka

A Ty masz tak troszkę pomieszane, right masz dopiero na końcu i to może być przyczyną niektórych problemów w późniejszym kodowaniu. Zwykle dajesz nagłówek, potem left z float: left, potem middle z float: left i right z float: left albo right, a potem stopkę z clear: both. Poza tym niepotrzebnie dopisujesz parametr position. Jeśli element stoi jak ma stać i nie masz zamiaru przemieszczać go o jakąś ilość pikseli, polecam zrezygnować z position.

[HTML] pobierz, plaintext 
  1. margin: 0px 0px 0px 0px;
[HTML] pobierz, plaintext


wystarczy zamienić na margin: 0 lub margin: 0px.

Ogólnie możesz sobie zapodawać na początku CSS-ów kod:

[HTML] pobierz, plaintext 
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
    blockquote,th,td{margin:0;padding:0;}
[HTML] pobierz, plaintext


Który wszystkie marginesy zewnętrze i wewnętrzne ustawi na 0. Jest to bardzo istotne, bo każda przeglądarka może nieco inaczej interpretować domyślne odstępy i aby każda strona wyglądała tak samo... warto na początku to wyzerować, a potem ew. do danych elementów ustawić inne marginesy.

Poza tym staraj się kolory podawać w HEX-ach. Nie wiem, czy każda przeglądarka tak samo zinterpretuje angielskie nazwy kolorów - nie testowałem w każdym razie (IMG:style_emoticons/default/smile.gif) 

[HTML] pobierz, plaintext 
  1. position: absolute;
  2. left: 50%; margin-left: -475px;
[HTML] pobierz, plaintext


Co robi ten kod? Myślę, że można zaprojektować szablon inaczej, bez takich kombinacji

PS. Nie mówię, że źle projektujesz, uważam po prostu że trochę utrudniasz sobie życie. W każdym razie ucz się i jesteś na dobrej drodze (IMG:style_emoticons/default/smile.gif) DIV-y są nie tylko po to, by łatwiej nas wyłapały przeglądarki, ale też po to, by mieć większą kontrolę nad dokumentem, a ja mam wrażenie, że jak coś do tej strony dołożysz, to stracisz nad tym kontrolę całkowicie i wysypie się cała stronka (IMG:style_emoticons/default/smile.gif)

Ten post edytował Kaloryfer 17.12.2010, 22:19:35
Go to the top of the page
+Quote Post

Posty w temacie
- Rastman   [HTML][CSS] CSS+DIV pierwsze kroki   17.12.2010, 19:00:44
- - Kaloryfer   Twój kod wydaje mi się nieco chaotyczny, ale po pi...   17.12.2010, 20:27:15
- - Rastman   dzięki:) relative było kluczem, pomogłeś. Poradnik...   17.12.2010, 21:37:13
- - Kaloryfer   Zwykle 3 kolumnowe strony robi się tak: - nagłówe...   17.12.2010, 22:16:30
- - Rastman   [HTML] pobierz, plaintext 1. position: abs...   17.12.2010, 22:58:20
- - krzysztof_kf   Cytat(Rastman @ 17.12.2010, 22:58:20 ...   17.12.2010, 23:17:35
|- - Damonsson   Cytat(krzysztof_kf @ 17.12.2010, 23:17...   17.12.2010, 23:41:27
- - Kaloryfer   Internet Explorer 3.0 albo Mosaic   18.12.2010, 22:19:00

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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