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 (1 - 7)
Kostek.88
post
Post #2





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

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

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ę (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Rastman
post
Post #3





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

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

dzięki:) relative było kluczem, pomogłeś. Poradnik też ciekawy. A czemu kod jest chaotyczny?
Go to the top of the page
+Quote Post
Kostek.88
post
Post #4





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
Rastman
post
Post #5





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

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

[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ę(IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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ę(IMG:style_emoticons/default/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 .

Ten post edytował krzysztof_kf 17.12.2010, 23:18:05
Go to the top of the page
+Quote Post
Damonsson
post
Post #7





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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

Na przykład?
Go to the top of the page
+Quote Post
Kostek.88
post
Post #8





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

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

Internet Explorer 3.0 albo Mosaic (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował Kaloryfer 18.12.2010, 22:20:10
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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