Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Podział na 2 kolumny - błąd
Forum PHP.pl > Forum > Przedszkole
sYa_TPS
20.09.2009, 10:06:15
Witam. Mam pewien błąd a mianowicie:

Chciał bym, żeby strona wyglądała tak


A wygląda tak


Chodzi o to, że ta tabela 'wżyna' się na tekst sad.gif

Wie ktoś jak temu zaradzić ?
Wolfie
20.09.2009, 10:15:12
Jezeli strona zrobiona jest na divach to ustal szerokosc danego div'a w css i po srpawie
sYa_TPS
20.09.2009, 10:22:47
Cytat(Wolfie @ 20.09.2009, 11:15:12 ) *
Jezeli strona zrobiona jest na divach to ustal szerokosc danego div'a w css i po srpawie


tak, na divach. A mozna jasniej ?

Moj 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. <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. <form method="get"  id="searchfrom" action="">
  17. </form>
  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.  
  47. <body>
  48. <div>
  49. <div id="zawartość">
  50. </div>
  51. <div id="nawigacja">
  52. <h3>Artykuły</h3>
  53. <ul>
  54. <li><a href="artykuly/baterie">Baterie - prawda i mity</a></li>
  55. <li><a href="artykuly/recovery">Partycje i nośniki recovery</a></li>
  56. <li><a href="artykuly/nLite">nLite - integracja sterowników</a></li>
  57. </ul>
  58. <h3>Testy</h3>
  59. <ul>
  60. <li><a href="testy/imbt42">IBM ThinkPad T42</a></li>
  61. <li><a href="testy/ibmt60">IBM ThinkPad T60</a></li>
  62. <li><a href="testy/imbx60">IBM ThinkPad X60</a></li>
  63. </ul>
  64. </body>
  65. </div>
  66.  
  67.  
  68. </html>
[HTML] pobierz, plaintext


style.css

[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. max-widyj:300px;
  118. background-image:url(0brazki/tło1.png);
  119. background-repeat:no-repeat;
  120. padding:0;
  121. margin:0;
  122. }
  123.  
  124. div#zawartosc
  125. {
  126. margin-right:20em;
  127. margin-left:1em;
  128. }
  129.  
  130. div#nawigacja h3
  131. {
  132. margin:0;
  133. padding:0;
  134. font-weight:bold;
  135. }
  136. div#nawigacja ul
  137. {
  138. margin:3px;
  139. }
[HTML] pobierz, plaintext
Wolfie
20.09.2009, 10:30:40
Poniewaz tresc ktora najezdza na menu czy co to jest to nie wiem, nie chce mi sie analizowac znajduje sie w div o id="wpis" to w stylach dajesz cos takiego :

[CSS] pobierz, plaintext 
  1. #wpis {
  2.      width:800px;
  3. }
[CSS] pobierz, plaintext




Gdzie '#' oznacza w css id danego elementu

Oczywiscie wartosc 800px dalem dla przykladu

Ewentualnie mozesz podac ta wartosc w procentach lub innych jednostkach.....przeczytaj sobie jakis kurs.....
qqwwq
20.09.2009, 10:32:33
Ale Ty masz bałagan w tym kodzie. Strony zwyczajowo wyglądają tak:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. - tutaj się ładuje jakieś pliki css, js itp
  4. </head>
  5. <body>
  6. - tutaj treść strony
  7. </body>
  8. </html>
[HTML] pobierz, plaintext


Dla div'a menusrodek dodaj jakąś szerokość, oraz dla div'a wpis dodaj klasę, i w niej także ustal szerokość ( chyba że już w pliku css jest taka klasa - ale jakoś jej nie znalazłem ). Chociaż ja bym jeszcze spróbował pokombinować z float: left oraz right - w poprzednim temacie o tym miałeś napisane.
sYa_TPS
20.09.2009, 10:50:15
Cytat(Wolfie @ 20.09.2009, 11:30:40 ) *
Poniewaz tresc ktora najezdza na menu czy co to jest to nie wiem, nie chce mi sie analizowac znajduje sie w div o id="wpis" to w stylach dajesz cos takiego :

[CSS] pobierz, plaintext 
  1. #wpis {
  2.      width:800px;
  3. }
[CSS] pobierz, plaintext




Gdzie '#' oznacza w css id danego elementu

Oczywiscie wartosc 800px dalem dla przykladu

Ewentualnie mozesz podac ta wartosc w procentach lub innych jednostkach.....przeczytaj sobie jakis kurs.....


Dziękuje smile.gif ale można by trochę jaśniej ?
Wolfie
20.09.2009, 10:52:35
No nie no, dostales jak na tacy co masz wpisac w plik style.css !

Ja Ci nie bede tlumaczyl od podstaw, od tego sa kursy ktorych multum w internecie.....
sYa_TPS
20.09.2009, 11:12:21
Cytat(Wolfie @ 20.09.2009, 11:52:35 ) *
No nie no, dostales jak na tacy co masz wpisac w plik style.css !

Ja Ci nie bede tlumaczyl od podstaw, od tego sa kursy ktorych multum w internecie.....


Wiem, że to trzeba wpisać do style.css. Tylko nie wiem za bardzo w którym miejscu ..
qqwwq
20.09.2009, 11:21:17
Cytat(sYa_TPS @ 20.09.2009, 12:12:21 ) *
Wiem, że to trzeba wpisać do style.css. Tylko nie wiem za bardzo w którym miejscu ..

Obojętnie w którym, możesz dopisać na początku, na końcu - dodajesz po prostu nową klasę, których masz już pełno - jedynie Twój problem się później w tym połapać, więc powinieneś rozsądnie dopisywać nowe rzeczy.

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


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


Pewnie nie wszystko wyłapałem - ale to sobie sam poprawisz.
Teraz rada dla Ciebie. Ściągnij sobie program notepad++, w nim edytuj pliki, i edytując je, możesz z menu wybrać język > css albo html - wtedy składnia będzie Ci się ładnie kolorować - i szybko Twoje oczy się przyzwyczają do poprawnie pokolrowanego kodu, jeśli gdzieś coś będzie niedomknięte, bez jakiegoś cudzysłowia itp, to zaraz po kolorach to zobaczysz. I jeszcze druga rada - w pliku css miałeś klasę zawartosc - a w html się odwoływałeś do klasy zawartość - staraj się nie używać polskich znaków przy takim nazewnictwie.

No i ten kod:
[HTML] pobierz, plaintext 
  1. #
  2. <div>
  3. <div id="zawartosc">
  4. </div>
[HTML] pobierz, plaintext


Nie wiem co chciałeś nim osiągnąć - otwierasz div'a którego potem nie zamykasz, oraz otwierasz div'a o id zawartosc i go z kolei zaraz zamykasz - div'a który w sobie nie ma nic szczególnego.
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.