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(qqwwq @ 18.09.2009, 18:07:22 ) *
To pokaż kod jaki dokładnie nie działa, html oraz css do tego.


Teraz próbowałem ten:

style.css

[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. position:absolute;
  122. right:0;
  123. top:15em;
  124. width:300px;
  125. padding:0;
  126. margin:0;
  127. }
  128.  
  129. div#zawartosc
  130. {
  131. margin-rigth:20em;
  132. margin-left:1em;
  133. }
  134.  
  135. div#nawigacja h3
  136. {
  137. margin:0;
  138. font-reight:bold;
  139. }
  140. div#nawigacja ul
  141. {
  142. margin:3px;
  143. }
[HTML] pobierz, plaintext


index.html

[HTML] pobierz, plaintext 
  1. <link rel="Stylesheet" type="text/css" href="style.css" />
  2.  
  3. <div id="nagłówek">
  4. <br>
  5. <ul id="menugora"></a>
  6. <right><input type="text"  value=" " name="s"  id="s"  class="pole" /></a>
  7. <input type="submit"  id="searchsubmit"  value="Szukaj" /></a></right>
  8. <center><a href="feed">RSS Wiadomości</a>     
  9. <a href="mapa-strony.html">Mapa strony</a>     
  10. <a href="redakcja.html">redakcja.html</a>     
  11. <a href="kontakt.html">kontakt</a></center>     
  12. </ul>
  13.  
  14. <div id="menusrodek">
  15. <a href="/"><img src="" /></a>
  16. <a href="/"><img src="http://img147.imageshack.us/img147/2218/loololollo.png" /></a>
  17. <rigth><from method="get"  id="searchfrom" action="">
  18. </form></right>
  19. </div>
  20.  
  21. <ul id="menudol">
  22. <a href="/">Aktualności</a>
  23. <a href="/testy">Testy</a>
  24. <a href="/artykuly">Artykuły</a>
  25. <a href="/faq">FAQ</a></center>
  26. <a href="http://forum.laptopy.info.pl">Forum</a>
  27.  
  28. </div>
  29.  
  30.  
  31. <div id="wpis">
  32. <h2><a href="news01.html">Nowy Flybook VM</a></h2>
  33. <p class="data"><strong><Data:</strong> 20.07.2007 <strong>Autor:</strong> Bartosz
  34. Danowski </p>
  35. <img src=obrazki/flybook.jpg" alt="Flybook MV"  />
  36. <p>Co początkowo wygląda na tuzinkowego laptopa. Wcale nim nie jest. Flybook VM 
  37. posiada ekran mogący ustwić się w pozycji normalnego ekranu LCD, tak aby użytkownik
  38. miał wygodniejszą pozycje podczas użytkowania komputera. Szczególnie przydatne jest
  39. to w czasie korzystania z laptopa w miejsach, gdzie mamy bardzo małą powierzchnie
  40. na położenie netbooka, np. w samolocie</p>
  41. <p>Flybook VM może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa
  42. mają aspiracje, aby ich produkt konkurował z deskopami. Laptopa będzie można kupic 
  43. pod koniec miesiąca w cenie $2.899.</p>
  44. <p class=zrodlo"><a href="news01.html">Więcej &#187 ;<a></p>
  45. </div>
  46.  
  47. <body>
  48. <div>
  49. <body>
  50. <div id="zawartość">
  51. </div>
  52. <div id="nawigacja">
  53. </body>
  54. </div>
  55.  
  56.  
  57.  
  58. <h3>Artykuły</h3>
  59. <ul>
  60. <li><a href="artykuly/baterie">Baterie - prawda i mity</a></li>
  61. <li><a href="artykuly/recovery">Partycje i nośniki recovery</a></li>
  62. <li><a href="artykuly/nLite">nLite - integracja sterowników</a></li>
  63. </ul>
  64. <h3>Testy</h3>
  65. <ul>
  66. <li><a href="testy/imbt42">IBM ThinkPad T42</a></li>
  67. <li><a href="testy/ibmt60">IBM ThinkPad T60</a></li>
  68. <li><a href="testy/imbx60">IBM ThinkPad X60</a></li>
  69. </ul>
  70.  
  71.  
  72.  
  73.  
  74.  
  75. </html>
[HTML] pobierz, plaintext

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