Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Podział na 2 kolumny - błąd
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 błąd a mianowicie:

Chciał bym, żeby strona wyglądała tak
(IMG:http://img35.imageshack.us/img35/5351/20090920345.jpg)

A wygląda tak
(IMG:http://img198.imageshack.us/img198/1429/beztytuu22ia.png)

Chodzi o to, że ta tabela 'wżyna' się na tekst (IMG:style_emoticons/default/sad.gif)

Wie ktoś jak temu zaradzić ?
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(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 ..
Go to the top of the page
+Quote Post
qqwwq
post
Post #3





Grupa: Zarejestrowani
Postów: 52
Pomógł: 0
Dołączył: 14.09.2009

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

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.
Go to the top of the page
+Quote Post

Posty w temacie
- sYa_TPS   [CSS]Podział na 2 kolumny - błąd   20.09.2009, 10:06:15
- - Wolfie   Jezeli strona zrobiona jest na divach to ustal sze...   20.09.2009, 10:15:12
- - sYa_TPS   Cytat(Wolfie @ 20.09.2009, 11:15:12 )...   20.09.2009, 10:22:47
- - Wolfie   Poniewaz tresc ktora najezdza na menu czy co to je...   20.09.2009, 10:30:40
- - qqwwq   Ale Ty masz bałagan w tym kodzie. Strony zwyczajow...   20.09.2009, 10:32:33
- - sYa_TPS   Cytat(Wolfie @ 20.09.2009, 11:30:40 )...   20.09.2009, 10:50:15
- - Wolfie   No nie no, dostales jak na tacy co masz wpisac w p...   20.09.2009, 10:52:35
- - sYa_TPS   Cytat(Wolfie @ 20.09.2009, 11:52:35 )...   20.09.2009, 11:12:21
- - qqwwq   Cytat(sYa_TPS @ 20.09.2009, 12:12:21 ...   20.09.2009, 11:21:17

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