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
krzysztof_kf
post
Post #2





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

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: 4.10.2025 - 14:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn