Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Podział na dwie kolumny
sYa_TPS
post
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 13.09.2009
Skąd: Polska ;)

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

Witam. Mam pewien problem, a mianowicie: Chcę podzielić stronkę na 2 kolumny.

W pliku index.html mam 
[HTML] pobierz, plaintext 
  1. <body>
  2. <div>
  3. <body>
  4. <div id="zawartość">
  5. </div>
  6. <div id="nawigacja">
  7. </body>
  8. </div>
[HTML] pobierz, plaintext


w style.css mam 
[HTML] pobierz, plaintext 
  1. div#nawigacja
  2. {
  3. position:absolute;
  4. right:0;
  5. top:15em;
  6. width:300px;
  7. padding:0;
  8. margin:0;
  9. }
  10.  
  11. div#zawartosc
  12. {
  13. margin-rigth:20em;
  14. margin-left:1em;
  15. }
[HTML] pobierz, plaintext


Lecz stronka nadal nie jest podzielona (IMG:style_emoticons/default/sad.gif)

Z góry dziękuje (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
sYa_TPS
post
Post #2





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 13.09.2009
Skąd: Polska ;)

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

Cytat(Void @ 17.09.2009, 17:21:38 ) *
Wywal te "position: absolute" i dodaj do diva "nawigacja" 
[HTML] pobierz, plaintext 
  1. float: right;
[HTML] pobierz, plaintext
a do diva "zawartosc" 
[HTML] pobierz, plaintext 
  1. float: left;
[HTML] pobierz, plaintext

Chyba, że chcesz mieć całą stronę wyrównaną do prawej, to wtedy do obu divów "float: right".
A jeżeli koniecznie nie chcesz mieć odstępu od prawej krawędzi strony to musisz ująć oba bloki div w kolejny i jemu ustawić odpowiednie właściwości (position: absolute; right: 0)


Hmm.. Czyli chodzi Ci o to by style.css wyglądał tak:

[HTML] pobierz, plaintext 
  1. body
  2. {
  3. margin:0;
  4. padding:0;
  5. background-color:white;
  6. }
  7.  
  8. <div id="naglowek"></div>
  9.  
  10. div#naglowek
  11. {
  12. width:100%;
  13. border-bootom:solid 5px #518AB5;
  14. }
  15.  
  16. div#naglowek li
  17. {
  18. display:inline
  19. margin-left:15px;
  20. }
  21.  
  22. div#naglowek a
  23. {
  24. text-decoration:none;
  25. color:white;
  26. border-bootom:solid 5px #518AB5
  27. }
  28. div #naglowek a:hover
  29. {
  30. color:silver
  31. border-bootom:solid white 3px;
  32. }
  33.  
  34. ul#menugora
  35. {
  36. margin:0;
  37. height:30px;
  38. background-color:#518AB5
  39. list-style:none;
  40. font-family:monospace;
  41. }
  42.  
  43. div#menusrodek
  44. {
  45. height:150px;
  46. }
  47.  
  48. div#menusrodek img,  div#menusrodek a
  49. P
  50. border:0;
  51. }
  52.  
  53. div#menusrodek img
  54. {
  55. vertical-aling:middle:
  56. }
  57.  
  58. div#menusrodek form
  59. {
  60. postition:absolute;
  61. right=10px;
  62. top:1px;
  63. }
  64.  
  65. div#menusrodek input.pole
  66. {
  67. background-color:silver;
  68. border:1px solid white;
  69. width:150px;
  70. padding:0;
  71. margin:0;
  72. }
  73.  
  74. ul#menudol
  75. {
  76. background-color:#518AB5;
  77. margin:0;
  78. margin-left:300px;
  79. height:40px;
  80. text-align:center;
  81. font-size:large;
  82. text-transform:uppercase;
  83. }
  84.  
  85. <div id="stopka">
  86. <p>Wszelkie prawa zastrzeżone. Copyright @ 1009 <a href="/">Laptopy</a>.</p>
  87. <p>Strona Stworzona przez:<a href="http:..www.cre8.pl/"CRE8 - tworzenie stron</a></[?
  88. <p><a href="sitemape.xml">XML SiteMap</a></p>
  89. </div>
  90.  
  91. body, html, #zawartosc
  92. {
  93. min-height:100%;
  94. height:100%;
  95. }
  96.  
  97. html>body, html>body #zawartosc
  98. {
  99. height:auto;
  100. }
  101.  
  102. div#stopka
  103.  
  104. {
  105. width:100%;
  106. height:40px;
  107. background:#518AB5 url(http://www.globus-wapienica.eu/userfiles/Mini_Stopka_str.jpg);
  108. padding-top:10px;
  109. position:absolute;
  110. bottom:0;}
  111.  
  112. div#stopka p 
  113. {
  114. margin:0;
  115. padding-left:20px;
  116. font-size:smaller;
  117. }
  118.  
  119. div#nawigacja
  120. {
  121. float: right;
  122. }
  123.  
  124. div#zawartosc
  125. {
  126. float: left;
  127. }
  128.  
  129. </html>
[HTML] pobierz, plaintext


Jeśli tak, to niestety nic to nie dało (IMG:style_emoticons/default/sad.gif)

e/ Zamieszczam obrazek, w celu ułatwienia w rozwiązaniu mojego problemu:

(IMG:http://img183.imageshack.us/img183/4885/20090917339.jpg)

Ten post edytował sYa_TPS 17.09.2009, 16:51:59
Go to the top of the page
+Quote Post

Posty w temacie
- sYa_TPS   [HTML][CSS]Podział na dwie kolumny   17.09.2009, 15:53:03
- - Void   Wywal te "position: absolute" i dodaj do...   17.09.2009, 16:21:38
- - sYa_TPS   Cytat(Void @ 17.09.2009, 17:21:38 ) W...   17.09.2009, 16:45:06
- - Void   Ale chodzi ci o to, żeby mieć te divy "nawiga...   17.09.2009, 17:00:18
- - sYa_TPS   Cytat(Void @ 17.09.2009, 18:00:18 ) A...   17.09.2009, 17:02:34
- - black_alexis   czesc zrób to po prostu tak: a) ustal szerokości...   17.09.2009, 17:10:52
- - sYa_TPS   Cytat(black_alexis @ 17.09.2009, 18:10...   17.09.2009, 17:15:45
- - black_alexis   jestem dziewczynką CSS: Koddiv.page_container{ w...   17.09.2009, 17:27:21
- - sYa_TPS   Cytat(black_alexis @ 17.09.2009, 18:27...   17.09.2009, 17:34:56
- - qqwwq   Nie wiem co to za książka, ale bez sensu jest stos...   18.09.2009, 14:12:59
|- - sYa_TPS   Cytat(qqwwq @ 18.09.2009, 15:12:59 ) ...   18.09.2009, 14:56:54
- - qqwwq   To pokaż kod jaki dokładnie nie działa, html oraz ...   18.09.2009, 17:07:22
- - sYa_TPS   Cytat(qqwwq @ 18.09.2009, 18:07:22 ) ...   18.09.2009, 20:30:46
- - thek   W pliku css nie występują znaki html i nie powinny...   18.09.2009, 21:44:18
- - sYa_TPS   Cytat(thek @ 18.09.2009, 22:44:18 ) W...   18.09.2009, 22:22:05
- - thek   Nom... Ja zaczynałem od AC LOGO ( żółwik rulez ),...   18.09.2009, 22:51:23
- - sYa_TPS   Cytat(thek @ 18.09.2009, 23:51:23 ) N...   19.09.2009, 11:58:50
- - thek   Jest jeszcze dużo w index. Już od pierwszej linijk...   19.09.2009, 13:37:01
- - sYa_TPS   Cytat(thek @ 19.09.2009, 14:37:01 ) J...   19.09.2009, 14:05:14

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