Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Podział na dwie kolumny
Forum PHP.pl > Forum > Przedszkole
sYa_TPS
17.09.2009, 15:53:03
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 sad.gif

Z góry dziękuje smile.gif
Void
17.09.2009, 16: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)
sYa_TPS
17.09.2009, 16:45:06
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 sad.gif

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

Void
17.09.2009, 17:00:18
Ale chodzi ci o to, żeby mieć te divy "nawigacja" i "zawartosc" obok siebie? Jeśli tak, no to sprawdziłem u siebie i są smile.gif Chyba że masz inną ideę, której nie rozumiem tongue.gif

btw. Ty masz te tagi HTML w arkuszu stylów?

edit: pisałem posta jeszcze przed tym jak dodałeś obrazek.
Taki efekt jak na obrazku powinieneś osiągnąć właśnie za pomocą float. Pokombinuj trochę z tym, a jak nie dasz rady to pokaż HTML

I napisz jeszcze, czemu masz html w pliku ze stylem tongue.gif
sYa_TPS
17.09.2009, 17:02:34
Cytat(Void @ 17.09.2009, 18:00:18 ) *
Ale chodzi ci o to, żeby mieć te divy "nawigacja" i "zawartosc" obok siebie? Jeśli tak, no to sprawdziłem u siebie i są smile.gif Chyba że masz inną ideę, której nie rozumiem tongue.gif

btw. Ty masz te tagi HTML w arkuszu stylów?


Chciał bym mieć tak jak na ss którego dałem. Jestem totalny amator :<

To jest mój pierwszy 'projekt' pisany przy pomocy książki..

e/ pokombinuje pokombinuje smile.gif

A mam jeszcze takie pytanie, udzielasz pomocy via @gg ? tongue.gif
black_alexis
17.09.2009, 17:10:52
czesc smile.gif

zrób to po prostu tak:
a) ustal szerokości dla tych divów i każdemu wsadz: float: left;

Prosty sposob. Szybko i widać efekt. Jesli nie będzie Ci pozniej pasowało, to poszperasz po necie i znajdziesz odpowiedz smile.gif

Pozdrawiam.

Jeśli pomogłam to klinij na "Pomógł" smile.gif
sYa_TPS
17.09.2009, 17:15:45
Cytat(black_alexis @ 17.09.2009, 18:10:52 ) *
czesc smile.gif

zrób to po prostu tak:
a) ustal szerokości dla tych divów i każdemu wsadz: float: left;

Prosty sposob. Szybko i widać efekt. Jesli nie będzie Ci pozniej pasowało, to poszperasz po necie i znajdziesz odpowiedz smile.gif

Pozdrawiam.

Jeśli pomogłam to klinij na "Pomógł" smile.gif


Mógłbyś mi to jakoś dogłębniej wytłumaczyć ?
black_alexis
17.09.2009, 17:27:21
jestem dziewczynką smile.gif

CSS:
Kod
div.page_container{
width: 600px;
}
div.menu_boczne {
width: 200px;
float: left;
}
div.zawartosc{
width: 400px;
float: left;
}


Czy teraz wyraziłam sie jaśniej? smile.gif
sYa_TPS
17.09.2009, 17:34:56
Cytat(black_alexis @ 17.09.2009, 18:27:21 ) *
jestem dziewczynką smile.gif

CSS:
Kod
div.page_container{
width: 600px;
}
div.menu_boczne {
width: 200px;
float: left;
}
div.zawartosc{
width: 400px;
float: left;
}


Czy teraz wyraziłam sie jaśniej? smile.gif



Sry w takim razie, nie patrzyłem na nick biggrin.gif

Tak. Myślę, że teraz już jaśniej. Ale mam pewien dylemat. W tej książce jest tak

[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


Co o tym sądzicie ?
qqwwq
18.09.2009, 14:12:59
Nie wiem co to za książka, ale bez sensu jest stosować position:absolute; jeśli można bez problemu to zrobić np. za pomocą float - jak podała koleżanka wyżej.
Sprawdziłeś to już? I działa jak należy?
sYa_TPS
18.09.2009, 14:56:54
Cytat(qqwwq @ 18.09.2009, 15:12:59 ) *
Nie wiem co to za książka, ale bez sensu jest stosować position:absolute; jeśli można bez problemu to zrobić np. za pomocą float - jak podała koleżanka wyżej.
Sprawdziłeś to już? I działa jak należy?


Bartosz Danowski 'Tworzenie stron WWW w praktyce'

Właśnie tak zrobiłem, ale nie działa sad.gif
qqwwq
18.09.2009, 17:07:22
To pokaż kod jaki dokładnie nie działa, html oraz css do tego.
sYa_TPS
18.09.2009, 20:30:46
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

thek
18.09.2009, 21:44:18
W pliku css nie występują znaki html i nie powinny wystąpić(*) a zobacz co masz w liniach 8, 85-89. Do tego masę niepozamykanych apostrofów, nieznane tagi (niech mi ktoś wyjaśni od kiedy w html istnieje <right> blinksmiley.gif ), brak jakiegokolwiek otwarcia pliku sekcją <body> o <html> nawet nie wspominając, brak sekcji <head>, literówki w tagach (<from> zamiast <form>), wywoływanie <img> z pustym src... Oj jest tutaj taka masa byków, że po kilkunastu linijkach zwątpiłem czy właściwie wiesz co to jest html lub css i przypadkiem nie tworzysz własnego standardu lub zdajesz się na radosną twórczość laugh.gif

EDIT:
(*) Wyjątkiem są przykładowo :before :after, ale najpierw poznaj podstawy i pisz porządny kod zanim się weźmiesz za coś ponad standardowy html i podstawowy css bo zaczynać od czegoś ciut bardzie skomplikowanego bez absolutnych podstaw to bezsens, podobny do pakowania się w php bez znajomości html. Niby można, ale po co tworzyć potwory biggrin.gif
sYa_TPS
18.09.2009, 22:22:05
Cytat(thek @ 18.09.2009, 22:44:18 ) *
W pliku css nie występują znaki html i nie powinny wystąpić(*) a zobacz co masz w liniach 8, 85-89. Do tego masę niepozamykanych apostrofów, nieznane tagi (niech mi ktoś wyjaśni od kiedy w html istnieje <right> blinksmiley.gif ), brak jakiegokolwiek otwarcia pliku sekcją <body> o <html> nawet nie wspominając, brak sekcji <head>, literówki w tagach (<from> zamiast <form>), wywoływanie <img> z pustym src... Oj jest tutaj taka masa byków, że po kilkunastu linijkach zwątpiłem czy właściwie wiesz co to jest html lub css i przypadkiem nie tworzysz własnego standardu lub zdajesz się na radosną twórczość laugh.gif

EDIT:
(*) Wyjątkiem są przykładowo :before :after, ale najpierw poznaj podstawy i pisz porządny kod zanim się weźmiesz za coś ponad standardowy html i podstawowy css bo zaczynać od czegoś ciut bardzie skomplikowanego bez absolutnych podstaw to bezsens, podobny do pakowania się w php bez znajomości html. Niby można, ale po co tworzyć potwory biggrin.gif


Każdy od czegoś zaczynał smile.gif
thek
18.09.2009, 22:51:23
Nom... Ja zaczynałem od AC LOGO ( żółwik rulez 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 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ę.
sYa_TPS
19.09.2009, 11:58:50
Cytat(thek @ 18.09.2009, 23:51:23 ) *
Nom... Ja zaczynałem od AC LOGO ( żółwik rulez 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 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 ? biggrin.gif
thek
19.09.2009, 13:37:01
Jest jeszcze dużo w index. Już od pierwszej linijki:
->
1) <rigt<link rel="Stylesheet" type="text/css" href="style.css" /> - co to jest <rigt, a te <right> jako znacznik NIE ISTNIEJE w html
16) from... już o tym pisałem.. nie from tylko form.
46) i 48) podwójne <body> a brak <html> jak nie było tak nie ma. Sekcji head także brak.
poza tym ciągle zrąbane linki w znacznikach i walnięte, zgubione apostrofy. Myślisz, że kolorowanie składni to niepotrzebny bajer na forum?Ja dzięki niemu w lot widzę gdzie są byki. Ty też naucz z tego korzystać zanim wkleisz kod na forum. Zainstaluj choćby Notepad++ by Ci też tak pokazywał.
sYa_TPS
19.09.2009, 14:05:14
Cytat(thek @ 19.09.2009, 14:37:01 ) *
Jest jeszcze dużo w index. Już od pierwszej linijki:
->
1) <rigt<link rel="Stylesheet" type="text/css" href="style.css" /> - co to jest <rigt, a te <right> jako znacznik NIE ISTNIEJE w html
16) from... już o tym pisałem.. nie from tylko form.
46) i 48) podwójne <body> a brak <html> jak nie było tak nie ma. Sekcji head także brak.
poza tym ciągle zrąbane linki w znacznikach i walnięte, zgubione apostrofy. Myślisz, że kolorowanie składni to niepotrzebny bajer na forum?Ja dzięki niemu w lot widzę gdzie są byki. Ty też naucz z tego korzystać zanim wkleisz kod na forum. Zainstaluj choćby Notepad++ by Ci też tak pokazywał.


Dziękuje smile.gif poprawiłem ( chyba ) wszystko i działa. Jeszcze trochę muszę to dopracować.

/ Temat do zamknięcia smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.