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(thek @ 18.09.2009, 23:51:23 ) *
Nom... Ja zaczynałem od AC LOGO ( żółwik rulez (IMG:style_emoticons/default/biggrin.gif) ), Turbo Pascala, DOS (nawet nie pamiętam, ale chyba 5.X), a wszystko co nowe zaczynało się od tutoriali, helpów, readme, howto, manuali, książek tematycznych i uważnej lektury wszystkiego gdzie można jakąś wiedzę na dany temat znaleźć. Tymczasem przyjrzyj się swojemu kodowi i sam powiedz, czy to jest chociaż podobne do czegokolwiek w tutorialach o podstawach? Nawet linki w odnośnikach wygladają jakbyś zapomniał o rozszerzeniach ( albo przesadził z używaniem mod-rewrite'a, ale o to Cię nie podejrzewam (IMG:style_emoticons/default/aaevil.gif) ) Dlatego proszę Cię w imieniu tutaj piszących i to czytających: Popraw to do formy przystępnej i choć trochę zgodnej z obowiązującymi standardami. Nie chodzi o to, by to był kod bezbłędny, bo przecież masz problem i chcesz go rozwiązać (a to oznacza, że one zapewne są), ale by się choć do Transitional walidował. Bo teraz jak mamy Ci pomóc w problemie tak naprawdę, skoro prosisz nas o rozwiązanie, a my jako piszący widzimy, że problem jest szerszej natury i nawet nasze podpowiedzi mogą Ci nic nie mówić. Widać to po kodzie. Z działającego zrobiłeś sieczkę, a na nasze uwagi, że masz błędy i gdzie, nie ma odzewu. Jeszcze kilka postów wyżej wspomniano o usunięciu tagów html z pliku css, a jakby nigdy nic ponownie wklejasz plik css z nimi wewnątrz. Takie coś na dłuższą metę może irytować odpowiadających Ci. Inaczej bowiem podejdą gdy widzą, że robisz poprawki, postępy, a zupełnie inaczej gdy mimo nakierowania i wskazania błędów nadal robisz swoje.
A wracając do tematu to nawet podziałów na 2 kolumny layoutu jest kilka metod: pozycjonowanie absolutne, relatywne, z użyciem float i każda z nich jest zależna od tego czy chcesz zrobić szablon typu statycznego czy fluid. W temacie masz przynajmniej kilka sposobów podanych jak na tacy, gdybyś choć trochę rozumiał co do Ciebie zostało napisane. Tyle że nie napisano Ci gotowego kodu na zasadzie kopiuj-wklej, bo też nie o to na forum w dziale Przedszkole chodzi. Od gotowców masz odpowiedni dział i to nie jest ten w którym piszemy. A w tamtym za takie pytanie jakie jest w tym temacie albo by Cię wyśmiano, albo zjechano za brak znajomości elementarnych podstaw.

EDIT: Żebyś nie myślał, że traktuję Cię ja lub ktokolwiek z wyższością. Większość (jeśli nie wszyscy), nawet moderatorzy i administratorzy mają w zakładkach strony z manualami, tutorialami, kursami i ciekawymi przykładami dla wielu technologii jakich na codzień używamy. Ja mam (i zapewne nie tylko ja) odnośniki do specyfikacji html czy css, by w razie wątpliwości zerknąć i upewnić się, że to co mówimy jest prawidłowe. Nikt tu nie jest alfą i omegą i mamy prawo się mylić. Różnica polega na tym, że nam się chce w porównaniu do innych i mamy solidne podstawy by chociaż wiedzieć gdzie szukać rozwiązań zamiast lecieć z błahymi problemami na forum. Jeśli byś zerknął dokładnie to nawet dziś jeden z moderatorów miał problem i założył temat odpowiedni, gdzie osoba już w pierwszym poście dała mu prawidłową podpowiedź. Czy to sprawia, ze jest gorszym programistą niż inni tu piszący? Wątpię.



ok, więc w pierwszej kolejności spróbuje usunąć z style.css tagi html

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


index.html

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


dopatrzyliście się jeszcze jakiś błędów ? (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował sYa_TPS 19.09.2009, 12:26:16
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: 12.10.2025 - 22:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn