Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [HTML][CSS]Błąd w szkielecie strony w HTML & CSS
Mody23
post
Post #1





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Witam!

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

(IMG:http://forum.creamsoft.com.pl/images/articles/scorpion/layout/zrzut-31.png)


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ł.

Ten post edytował Mody23 5.07.2010, 21:11:03
Go to the top of the page
+Quote Post
Pawel_W
post
Post #2





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

[HTML] pobierz, plaintext 
  1. visibility: hidden;
[HTML] pobierz, plaintext

wywal to z div#naglowek

EDIT:
i ogarnij ten kod, nawiasy klamrowe przemieszane (IMG:style_emoticons/default/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


Ten post edytował Pawel_W 5.07.2010, 21:17:23
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

ustalaj szerokość i wysokość dla danych grafik dla niektórych daj atrybut overflow: hidden;
Go to the top of the page
+Quote Post
Mody23
post
Post #4





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Pawel_W czyli jak ma wyglądać ten kod z tymi nawiasami? Mógłbyś mi powiedzieć?
Go to the top of the page
+Quote Post
Pawel_W
post
Post #5





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

[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
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Bo masz wpisane dwa razy nagłówek (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mody23
post
Post #9





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

To jak to zrobić żeby raz był?
Go to the top of the page
+Quote Post
gigzorr
post
Post #10





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

e czegos nie rozumiem , czemu nadajesz elementom hidden?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #11





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Usunąć linijkę powtarzającą się 

[HTML] pobierz, plaintext 
  1. <h1>Nagłówek</h1>
  2. <p>Paragraf paragraf paragraf (...)</p>
  3.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Pawel_W
post
Post #12





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

Cytat(krzysztof_kf @ 5.07.2010, 22:27:40 ) *
Bo masz wpisane dwa razy nagłówek (IMG:style_emoticons/default/biggrin.gif)

i 2x <div id="menu"></div> ;D
Go to the top of the page
+Quote Post
Mody23
post
Post #13





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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


Ten post edytował Mody23 5.07.2010, 21:34:03
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #14





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
Mody23
post
Post #15





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Trochę źle ale jest lepiej - menu zostało do poprawy - www.design.faja-wodna.xaa.pl
Go to the top of the page
+Quote Post
Pawel_W
post
Post #16





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

w dalszym ciągu masz 2x div id="naglowek" (IMG:style_emoticons/default/winksmiley.jpg)

nie wiem jak teraz ;D

Ten post edytował Pawel_W 5.07.2010, 21:39:33
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #17





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
Mody23
post
Post #18





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Czyli co źle to jest zrobione?

Nie chodzi o nagłówek. Tylko to menu dać pod niego (nagłówek) i potem sobie poradzę.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #19





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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ć (IMG:style_emoticons/default/biggrin.gif) może Pawel_W ci wyjaśni bo ja już wymiękam (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mody23
post
Post #20





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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ę(IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
Pawel_W
post
Post #21





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

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ć (IMG:style_emoticons/default/biggrin.gif) może Pawel_W ci wyjaśni bo ja już wymiękam (IMG:style_emoticons/default/biggrin.gif)

pas... (IMG:style_emoticons/default/winksmiley.jpg)

chyba najprościej będzie, jak wejdziesz jeszcze raz na tą stronę z kursem i skopiujesz kod linijka po linijce (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
Mody23
post
Post #22





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #23





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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


(IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mody23
post
Post #24





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Teraz nie ma tła znów - zobacz sam.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #25





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

usuń z 


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

Go to the top of the page
+Quote Post
Mody23
post
Post #26





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Teraz znowu się to rozpiepszyło ;/ Ale męczarnia
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #27





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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 (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mody23
post
Post #28





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Możesz mi pomóc damć menu pod samiutki nagłówek a nagłówek dokładnie na samą górę? (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #29





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Okej jeszcze raz co chcesz jeszcze ?
Go to the top of the page
+Quote Post
Mody23
post
Post #30





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Nagłówek na samej górze a menu pod samiutkim nagłówkiem (żeby się stykały) - może dodam align="top" (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #31





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
Mody23
post
Post #32





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

I ostatnie pytanie - jak ten plik html obrócić na .php (IMG:style_emoticons/default/questionmark.gif) Bo chcę za pomocą funkcji GET zrobić w jednym pliku kilka stron - chyba że w htmlu też się tak da? (wątpię (IMG:style_emoticons/default/biggrin.gif) )
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #33





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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 (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował krzysztof_kf 5.07.2010, 22:08:53
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 6.10.2025 - 09:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn