Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] CSS+DIV pierwsze kroki
Forum PHP.pl > Forum > Przedszkole
Rastman
17.12.2010, 19:00:44
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
Kostek.88
17.12.2010, 20:27:15
Twój kod wydaje mi się nieco chaotyczny, ale po pierwsze zmień wszystkie wartości static na relative. Ustaw height div-a #substance na 100%, ale to nie poprawi idealnie Twojego szablonu. Zapoznaj się ze stroną http://www.kurshtml.boo.pl/css/szablon.html a zwłaszcza z poleceniami clear oraz overflow i powinno Ci to nieco rozjaśnić sytuację smile.gif
Rastman
17.12.2010, 21:37:13
dzięki:) relative było kluczem, pomogłeś. Poradnik też ciekawy. A czemu kod jest chaotyczny?
Kostek.88
17.12.2010, 22:16:30
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 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 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 smile.gif
Rastman
17.12.2010, 22:58:20 
[HTML] pobierz, plaintext 
  1.    1.
  2.       position: absolute;
  3.    2.
  4.       left: 50%; margin-left: -475px;
[HTML] pobierz, plaintext


ustawia diva o szerokości 950px na środku ekranu. Nad resztą popracujęsmile.gif
krzysztof_kf
17.12.2010, 23:17:35
Cytat(Rastman @ 17.12.2010, 22:58:20 ) *
[HTML] pobierz, plaintext 
  1.    1.
  2.       position: absolute;
  3.    2.
  4.       left: 50%; margin-left: -475px;
[HTML] pobierz, plaintext


ustawia diva o szerokości 950px na środku ekranu. Nad resztą popracujęsmile.gif



Nie wiem czy to jest najlepsze rozwiązanie jeśli chcesz wyśrodkować całą zawartość to wystarczy dać dla głównego selektora np.

[CSS] pobierz, plaintext 
  1.  
  2. #top {
  3. width: 950px;
  4. margin: 0 auto;
  5. }
  6.  
[CSS] pobierz, plaintext


a pozycjonowanie może ci niepoprawnie działać w wielu przeglądarek .
Damonsson
17.12.2010, 23:41:27
Cytat(krzysztof_kf @ 17.12.2010, 23:17:35 ) *
a pozycjonowanie może ci niepoprawnie działać w wielu przeglądarek .

Na przykład?
Kostek.88
18.12.2010, 22:19:00
Internet Explorer 3.0 albo Mosaic winksmiley.jpg
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.