Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Błąd w szkielecie strony w HTML & CSS
Forum PHP.pl > Forum > Przedszkole
Mody23
5.07.2010, 21:09:46
Witam!

Potrzebuję waszej pomocy. Próbowałem wykonać wszystko według TEGO poradnika. Efekt końcowy miał wyglądać mniej więcej tak:




A u mnie wygląda to TAK


Możecie wskazać/poprawić co wykonałem źle? Pliki mojej błędnie wykonanej pracy możecie poprać TUTAJ


Pozdrawiam!

PS. Każda pomoc = pomógł.
Pawel_W
5.07.2010, 21:16:26 
[HTML] pobierz, plaintext 
  1. visibility: hidden;
[HTML] pobierz, plaintext

wywal to z div#naglowek

EDIT:
i ogarnij ten kod, nawiasy klamrowe przemieszane winksmiley.jpg
[HTML] pobierz, plaintext 
  1. div#tresc{
  2. background: transparent url('images/tlo-tresc.png') repeat-y;
  3.  
  4. div#tresc h1{
  5. margin-top: 0px;
  6. padding-top: 15px;
  7. }
  8.  
  9. }
[HTML] pobierz, plaintext
krzysztof_kf
5.07.2010, 21:20:08
ustalaj szerokość i wysokość dla danych grafik dla niektórych daj atrybut overflow: hidden;
Mody23
5.07.2010, 21:23:16
Pawel_W czyli jak ma wyglądać ten kod z tymi nawiasami? Mógłbyś mi powiedzieć?
Pawel_W
5.07.2010, 21:24:17 
[HTML] pobierz, plaintext 
  1. div#tresc{
  2. background: transparent url('images/tlo-tresc.png') repeat-y;
  3. }
  4. div#tresc h1{
  5. margin-top: 0px;
  6. padding-top: 15px;
  7. }
[HTML] pobierz, plaintext
krzysztof_kf
5.07.2010, 21:26:05
Pawel_W

CHodziło mu o to po każdym selektorze trzeba zamknąć klamrą poptarz powyżej dałeś dwa selektory a zamknąłeś dopiero po drugim .
Mody23
5.07.2010, 21:26:20
Ale nadal jest źle - ZOBACZ TUTAJ . Co teraz zrobic? To menu miało być pod nagłówkiem, nagłówek miał występować raz a nie dwa razy.
krzysztof_kf
5.07.2010, 21:27:40
Bo masz wpisane dwa razy nagłówek biggrin.gif
Mody23
5.07.2010, 21:28:13
To jak to zrobić żeby raz był?
gigzorr
5.07.2010, 21:28:21
e czegos nie rozumiem , czemu nadajesz elementom hidden?
krzysztof_kf
5.07.2010, 21:29:07
Usunąć linijkę powtarzającą się 

[HTML] pobierz, plaintext 
  1. <h1>Nagłówek</h1>
  2. <p>Paragraf paragraf paragraf (...)</p>
  3.  
[HTML] pobierz, plaintext
Pawel_W
5.07.2010, 21:29:55
Cytat(krzysztof_kf @ 5.07.2010, 22:27:40 ) *
Bo masz wpisane dwa razy nagłówek biggrin.gif

i 2x <div id="menu"></div> ;D
Mody23
5.07.2010, 21:33:31
Usunąłem i zero zmian praktycznie...


tak to wygląda teraz:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link rel="Stylesheet" href="style.css" type="text/css" />
  6. <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  7. <meta http-equiv="Content-Language" content="pl" />
  8. <title>Tytuł strony</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="kontener">
  13.  
  14. <div id="naglowek">
  15. <h1>Nazwa firmy</h1>
  16. </div>
  17.  
  18. <div id="tresc">
  19.  
  20. <h1>Nagłówek</h1>
  21. <p>Paragraf paragraf paragraf (...)</p>
  22.  
  23. (...)
  24.  
  25. </div>
  26.  
  27. <div id="naglowek">
  28. <h1>Nazwa firmy</h1>
  29.  
  30. <div id="menu">
  31. <ul>
  32.     <li><a href="index.php" title="Strona główna">Strona główna</a></li>
  33.     <li><a href="index.php?go=oferta" title="Oferta">Oferta</a></li>
  34.     <li><a href="index.php?go=kontakt" title="Kontakt">Kontakt</a></li>
  35. </ul>
  36. </div>
  37.  
  38. </div>
  39.  
  40.  
  41. <div id="stopka">
  42. <p>Valid XHTML 1.1 | Valid CSS 3 | Created &amp;amp; Copyright by Patryk Jaworski</p>
  43. </div>
  44.  
  45. </div>
  46.  
  47. </body>
  48. </html>
[HTML] pobierz, plaintext
krzysztof_kf
5.07.2010, 21:36:02
plik CSS

[CSS] pobierz, plaintext 
  1. body{
  2. margin: 0px;
  3. padding: 0px;
  4. text-align: center;
  5. }
  6.  
  7. div#kontener{
  8. width: 730px;
  9. border: 1px dashed #CCCCCC;
  10. margin: 0px auto;
  11. text-align: justify;
  12. }
  13.  
  14. div#naglowek{
  15. background: transparent url('naglowek.png') no-repeat;
  16. width: 700px;
  17. height: 165px;
  18. margin: 0px;
  19. float: left;
  20.  
  21. }
  22.  
  23. div#menu ul{
  24.  
  25. margin: 0px;
  26. padding: 0px;
  27. list-style-type: none;
  28. height: 20px;
  29. background: transparent url('tlo-menu.png') no-repeat;
  30. text-align: center;
  31. font-size: 8pt;
  32. font-family: Verdana;
  33.  
  34. }
  35.  
  36. div#menu ul li{
  37. display: inline;
  38.  
  39. }
  40.  
  41. div#menu ul li a{
  42. text-decoration: none;
  43. color: #A4BFE0;
  44. padding: 0px 5px;
  45. line-height: 1.6em;
  46.  
  47. }
  48.  
  49. div#menu ul li a:hover{
  50. color: #F4F7FC;
  51. font-weight: bold;
  52.  
  53. }
  54.  
  55. div#tresc{
  56. background: transparent url('tlo-tresc.png') repeat-y;
  57. }
  58.  
  59. div#tresc h1{
  60. margin-top: 0px;
  61. padding-top: 15px;
  62. }
  63.  
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link rel="Stylesheet" href="style.css" type="text/css" />
  6. <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  7. <meta http-equiv="Content-Language" content="pl" />
  8. <title>Tytuł strony</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="kontener">
  13.  
  14. <div id="naglowek">
  15. <h1>Nazwa firmy</h1>
  16. </div>
  17.  
  18. <div id="tresc">
  19.  
  20. <h1>Nagłówek</h1>
  21. <p>Paragraf paragraf paragraf (...)</p>
  22.  
  23. (...)
  24.  
  25. </div>
  26.  
  27. <div id="menu">
  28. <ul>
  29.     <li><a href="index.php" title="Strona główna">Strona główna</a></li>
  30.     <li><a href="index.php?go=oferta" title="Oferta">Oferta</a></li>
  31.     <li><a href="index.php?go=kontakt" title="Kontakt">Kontakt</a></li>
  32. </ul>
  33. </div>
  34.  
  35. </div>
  36.  
  37.  
  38. <div id="stopka">
  39. <p>Valid XHTML 1.1 | Valid CSS 3 | Created &amp;amp; Copyright by Patryk Jaworski</p>
  40. </div>
  41.  
  42. </div>
  43.  
  44. </body>
  45. </html>
[HTML] pobierz, plaintext
Mody23
5.07.2010, 21:38:01
Trochę źle ale jest lepiej - menu zostało do poprawy - www.design.faja-wodna.xaa.pl
Pawel_W
5.07.2010, 21:38:40
w dalszym ciągu masz 2x div id="naglowek" winksmiley.jpg

nie wiem jak teraz ;D
krzysztof_kf
5.07.2010, 21:42:23
Trochę kupy nic się tu nie trzyma mogę ci tylko polecić Kurs html dobry kurs dla początkujących .

Wiesz główny selektor ustawiłeś na 730px nagłówek masz na 700px co oczekujesz po tym ? wycentrowania
Mody23
5.07.2010, 21:43:54
Czyli co źle to jest zrobione?

Nie chodzi o nagłówek. Tylko to menu dać pod niego (nagłówek) i potem sobie poradzę.
krzysztof_kf
5.07.2010, 21:45:16
eh sprecyzuj dokładnie pytanie co oczekujesz bo to co widzę że masz nagłówek stopka a tło to jest białe żaden gradient ...

sam nie wiem jak ci to wytłumaczyć biggrin.gif może Pawel_W ci wyjaśni bo ja już wymiękam biggrin.gif
Mody23
5.07.2010, 21:48:00
Ehh...Piepszyć to co tam pisze. Chcę mieć to w tak:

Nagłówek
Menu
Treść
Stopka

A nie tak:

Nagłówek
Treść
Menu
Stopka

Widzisz różnicęquestionmark.gif?


EDIT: Jaki ja jestem tępy ja to mam na localhoscie a wam mowie o mojej stronie...Już aktualizuje strone - www.design.faja-wodna.xaa.pl
Pawel_W
5.07.2010, 21:48:13
Cytat(krzysztof_kf @ 5.07.2010, 22:45:16 ) *
eh sprecyzuj dokładnie pytanie co oczekujesz bo to co widzę że masz nagłówek stopka a tło to jest białe żaden gradient ...

sam nie wiem jak ci to wytłumaczyć biggrin.gif może Pawel_W ci wyjaśni bo ja już wymiękam biggrin.gif

pas... winksmiley.jpg

chyba najprościej będzie, jak wejdziesz jeszcze raz na tą stronę z kursem i skopiujesz kod linijka po linijce winksmiley.jpg
Mody23
5.07.2010, 21:50:33
Nie mówię wam że ja to na localu odtwarzałem a wam kazałem na moją stronę wbijac...Moja wina - teraz zaktualizowalem - www.design.faja-wodna.xaa.pl - widzicie gdzie jest menu?? Jak dać je pod nagłówek?
krzysztof_kf
5.07.2010, 21:51:25
servus 

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link rel="Stylesheet" href="style.css" type="text/css" />
  6. <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  7. <meta http-equiv="Content-Language" content="pl" />
  8. <title>Tytuł strony</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="kontener">
  13.  
  14. <div id="naglowek">
  15. <h1>Nazwa firmy</h1>
  16. </div>
  17.  
  18. <div id="menu">
  19. <ul>
  20.     <li><a href="index.php" title="Strona główna">Strona główna</a></li>
  21.     <li><a href="index.php?go=oferta" title="Oferta">Oferta</a></li>
  22.     <li><a href="index.php?go=kontakt" title="Kontakt">Kontakt</a></li>
  23. </ul>
  24. </div>
  25.  
  26. <div id="tresc">
  27.  
  28. <h1>Nagłówek</h1>
  29. <p>Paragraf paragraf paragraf (...)</p>
  30.  
  31. (...)
  32.  
  33. </div>
  34.  
  35.  
  36. <div id="stopka">
  37. <p>Valid XHTML 1.1 | Valid CSS 3 | Created &amp;amp; Copyright by Patryk Jaworski</p>
  38. </div>
  39.  
  40. </div>
  41.  
  42. </body>
  43. </html>
  44.  
[HTML] pobierz, plaintext


biggrin.gif
Mody23
5.07.2010, 21:53:43
Teraz nie ma tła znów - zobacz sam.
krzysztof_kf
5.07.2010, 21:54:39
usuń z 


[CSS] pobierz, plaintext 
  1.  
  2. #naglowek {
  3.  
  4. float: left;
[CSS] pobierz, plaintext

Mody23
5.07.2010, 21:56:23
Teraz znowu się to rozpiepszyło ;/ Ale męczarnia
krzysztof_kf
5.07.2010, 21:56:35
Cytat(Mody23 @ 5.07.2010, 22:48:00 ) *
EDIT: Jaki ja jestem tępy ja to mam na localhoscie a wam mowie o mojej stronie...Już aktualizuje strone - www.design.faja-wodna.xaa.pl



Coś mi tu śmierdziało biggrin.gif
Mody23
5.07.2010, 21:58:05
Możesz mi pomóc damć menu pod samiutki nagłówek a nagłówek dokładnie na samą górę? biggrin.gif
krzysztof_kf
5.07.2010, 21:58:19
Okej jeszcze raz co chcesz jeszcze ?
Mody23
5.07.2010, 22:00:12
Nagłówek na samej górze a menu pod samiutkim nagłówkiem (żeby się stykały) - może dodam align="top" questionmark.gif
krzysztof_kf
5.07.2010, 22:02:23
Servus


[CSS] pobierz, plaintext 
  1. body{
  2. margin: 0px;
  3. padding: 0px;
  4. text-align: center;
  5. }
  6.  
  7. div#kontener{
  8. width: 730px;
  9. border: 1px dashed #CCCCCC;
  10. margin: 0px auto;
  11. text-align: justify;
  12. }
  13.  
  14. div#naglowek{
  15. background: transparent url('naglowek.png') no-repeat;
  16. width: 700px;
  17. height: 150px;
  18. float: left;
  19. margin: 0px 0 0 15px;
  20.  
  21. }
  22.  
  23. div#menu {
  24. width: 100%;
  25. float: left;
  26. }
  27.  
  28. div#menu ul{
  29. margin: 0px;
  30. padding: 0px;
  31. list-style-type: none;
  32. height: 20px;
  33. background: transparent url('tlo-menu.png') no-repeat;
  34. text-align: center;
  35. font-size: 8pt;
  36. font-family: Verdana;
  37.  
  38. }
  39.  
  40. div#menu ul li{
  41. display: inline;
  42.  
  43. }
  44.  
  45. div#menu ul li a{
  46. text-decoration: none;
  47. color: #A4BFE0;
  48. padding: 0px 5px;
  49. line-height: 1.6em;
  50.  
  51. }
  52.  
  53. div#menu ul li a:hover{
  54. color: #F4F7FC;
  55. font-weight: bold;
  56.  
  57. }
  58.  
  59. div#tresc{
  60. height: 100%;
  61. background: transparent url('tlo-tresc.png') repeat-y;
  62. }
  63.  
  64. div#tresc h1{
  65. margin-top: 0px;
  66. padding-top: 15px;
  67. }
[CSS] pobierz, plaintext
Mody23
5.07.2010, 22:05:09
I ostatnie pytanie - jak ten plik html obrócić na .php questionmark.gif Bo chcę za pomocą funkcji GET zrobić w jednym pliku kilka stron - chyba że w htmlu też się tak da? (wątpię biggrin.gif)
krzysztof_kf
5.07.2010, 22:07:09
Zróbmy tak że jak ci teraz pomogę to pójdziesz i poczytasz kurs i wrócisz następnym razem z wiedzą co najmniej typu co to jest <br /> ok ?


najłatwiej to prawy klawisz myszy zmień nazwe na nazwapliku.php biggrin.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.