Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Stronka na informatyke
Forum PHP.pl > Forum > Przedszkole
zelooo
11.05.2013, 21:20:45
Witam. Robię stronę na lekcje informatyki na ocene ze wzoru.

Interesuje mnie generalnie pomoc tylko w usunięciu jednego paska (raczej odstęu) między menu a headerem.


link do strony: http://zelo.cba.pl/strona/


kod html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <link rel="Stylesheet" type="text/css" href="style.css">
  5. </head>
  6. <body>
  7. <div id="container">
  8. <div id="header">
  9. 	<div id="header_1">YOURSITE.COM</div>
  10. 	<div id="header2"><img src="images/img_02.gif" height="113" width="900"></div>
  11. </div>
  12. <div id="menu">
  13. <ul>
  14. <li><a href="#">home</a></li>
  15. <li><a href="#">products</a></li>
  16. <li><a href="#">services</a></li>
  17. <li><a href="#">careers</a></li>
  18. <li><a href="#">about us</a></li>
  19. <li><a href="#">contact us</a></li>
  20. </ul>
  21. </div>
  22. <div id="pasek">
  23. <img src="images/img_04.png">
  24. </div>
  25. <div id="main">
  26. 	<div id="main_l">main_l</div>
  27. 	<div id="main_c">main_c</div>
  28. 	</div>
  29. </div>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext


kod css:
[HTML] pobierz, plaintext 
  1. body{
  2. background-color:#f5f6f5;
  3. text-align:center;
  4. margin:0;
  5. padding:0;
  6. }
  7. #container{
  8. width:900px;
  9. margin:0 auto;
  10. }
  11. #menu{
  12. background-image:url(images/img_03.gif);
  13. padding:0px;
  14. width:900px;
  15. height:25px;
  16. border:0px; 
  17. background-repeat:no-repeat;
  18. border-left:0px solid #ffffff;
  19. border-right:0px solid #ffffff;
  20. min-height:25px;
  21. max-height:25px;
  22. }
  23. #menu ul{
  24. background-color:#FF0000;
  25. list-style:none;
  26. }
  27. #menu ul li{
  28. float:left;
  29. border-right:0px solid #ffffff;'
  30. }
  31. #menu ul li:last-child{
  32. border:0;
  33. }
  34. #menu ul li a{
  35. padding:0px 10px 0px 10px;
  36. display:block;
  37. max-height:25px;
  38. color:#ffffff;
  39. font-variant:small-caps;
  40. text-decoration:none;
  41. font-weight:bold;
  42. }
  43. #menu ul li a:hover{
  44. color:#800000;
  45. }
  46.  
  47. #header{
  48. padding:0px;
  49. }
  50. #header_1{
  51. background-image:url(images/img_01.gif);
  52. padding:0px;
  53. width:900px;
  54. height:81px
  55. border:0px; 
  56. background-repeat:no-repeat;
  57. border-left:0px solid #ffffff;
  58. border-right:0px solid #ffffff;
  59. border-bottom:0px solid #e5e5e5;
  60. min-height:81px;
  61. max-height:81px;
  62. float:left;
  63. }
  64. }
  65. #header2{
  66. width:900px;
  67. height:113px
  68. padding:0px;
  69. border:0px; 
  70. border-left:0px solid #ffffff;
  71. border-right:0px solid #ffffff;
  72. border-bottom:0px solid #FF0000;
  73. float:left;
  74. }
  75. #pasek{
  76. padding:0px;
  77. width:900px;
  78. height:39px
  79. border:0px; 
  80. border-left:0px solid #ffffff;
  81. border-right:0px solid #ffffff;
  82. border-bottom:0px solid #FF0000;
  83. min-height:39px;
  84. max-height:39px;
  85. float:left;
  86. }
  87.  
  88. #main{
  89. min-height:400px;
  90. }
  91.  
  92. #main_l{
  93. min-height:400px;
  94. background-color:#b9ac07;
  95. width:250px;
  96. float:left;
  97. }
  98.  
  99. #main_c{
  100. min-height:400px;
  101. background-color:#00aaff;
  102. width:650px;
  103. float:left;
  104. }
[HTML] pobierz, plaintext
matiit
11.05.2013, 21:31:18
Usuń diva o id pasek.
zelooo
11.05.2013, 21:34:14
No ale to nie to, chodzi mi o pusta przestrzen nad menu (home itp.) a pod tym logo z renderem c4d.

Szukam w kodzie i już nie wiem co mogłem zrobić źle. Po porostu jest tam pusta przestrzeń w kolorze backgounda.
Kshyhoo
11.05.2013, 21:41:54
Cytat(matiit @ 11.05.2013, 21:31:18 ) *
Usuń diva o id pasek.

Bzdura. To menu dodaje ten odstęp...

Ściśle ujmując, lista smile.gif
zelooo
11.05.2013, 21:44:11
Dobrze tak myślałem ale czy moglbys wskazac mi dokładną linie?
matiit
11.05.2013, 21:49:17
Pomyślałem o całkiem innej przestrzeni smile.gif sory
thek
11.05.2013, 21:49:38
Problemem jest to, że nie stosujesz plików pokroju reset.css by zniwelować różnice w wyświetlaniu między przeglądarkami dla "gołego" kodu. Samo
body {margin: 0; padding: 0;} nie rozwiąże Ci problemu. Inne elementy blokowe nadal mogą mieć marginesy i dopełnienia. Najlepiej wrzuć do kodu css stąd: http://meyerweb.com/eric/tools/css/reset/ i dopiero jako drugi plik css własny. Wtedy sam zauważysz, że coś nie grało od początku.
matiit
11.05.2013, 21:51:48
A na szybko to #menu ul {margin:0;}
Ale jeśl najpoprawniej będzie używać jakiegoś pliku reset jak napisali wyżej smile.gif
zelooo
11.05.2013, 22:04:21
dzieki bardzo
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.