Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Odstep
Forum PHP.pl > Forum > Przedszkole
pemko11
27.08.2012, 15:48:52
Witam!
Wprowadziłem na stronie kolegi zmiany. Dodałem menu rozwijalne (numizmatykajaslo.pl) i mam pytanie, bo nie mieści się ono w jednym rzędzie.. Przed tekstem np monety i po nim jest kilka px wolne, chciałbym skrócić, aby wyglądało to mniej wiecej tak: przez co bez problemu mieściłoby się w jednym pasku to wszystko.

Kod CSS wygląda tak:

[PHP] pobierz, plaintext 
  1. #cssmenu ul,
  2. #cssmenu li,
  3. #cssmenu span,
  4. #cssmenu a {
  5.   margin: 0;
  6.   padding: 0;
  7.   position: relative;
  8. }
  9. #cssmenu:after,
  10. #cssmenu ul:after {
  11.   content: '';
  12.   display: block;
  13.   clear: both;
  14. }
  15. #cssmenu a {
  16.   color: #ffffff;
  17.   display: inline-block;
  18.   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  19.   font-size: 11px;
  20.   min-width: 10px;
  21.   text-align: center;
  22.   text-decoration: none;
  23.   text-shadow: 0 -1px 0 #333333;
  24. }
  25. #cssmenu ul {
  26.   list-style: none;
  27. }
  28. #cssmenu > ul > li {
  29.   float: left;
  30. }
  31. #cssmenu > ul > li.active a {
  32.   background: #646464 url(grad_dark.png) repeat-x left bottom;
  33.   background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  34.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  35.   background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  36.   background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  37.   background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  38.   background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  39.   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  40.   box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  41.   -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  42.   -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  43.   filter: none;
  44. }
  45. #cssmenu > ul > li.active a:hover {
  46.   background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  47.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  48.   background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  49.   background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  50.   background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  51.   background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  52.   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  53.   filter: none;
  54. }
  55. #cssmenu > ul > li a {
  56.   box-shadow: inset 0 0 0 1px #8a8a8a;
  57.   -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  58.   -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  59.   background: #4a4a4a url(grad_dark.png) repeat-x left top;
  60.   background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  61.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  62.   background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  63.   background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  64.   background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  65.   background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  66.   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  67.   border-bottom: 1px solid #5d5d5d;
  68.   border-top: 1px solid #5d5d5d;
  69.   border-right: 1px solid #5d5d5d;
  70.   line-height: 34px;
  71.   padding: 0 35px;
  72.   filter: none;
  73.  
  74. }
  75. #cssmenu > ul > li a:hover {
  76.   background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
  77.   background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  78.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  79.   background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  80.   background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  81.   background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  82.   background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  83.   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  84.   filter: none;
  85. }
  86. #cssmenu > ul > li:first-child a {
  87.   border-radius: 5px 0 0 5px;
  88.   -moz-border-radius: 5px 0 0 5px;
  89.   -webkit-border-radius: 5px 0 0 5px;
  90.   border-left: 1px solid #5d5d5d;
  91. }
  92. #cssmenu > ul > li:last-child a {
  93.   border-radius: 0 5px 5px 0;
  94.   -moz-border-radius: 0 5px 5px 0;
  95.   -webkit-border-radius: 0 5px 5px 0;
  96. }
  97. #cssmenu .has-sub:hover ul {
  98.   display: block;
  99. }
  100. #cssmenu .has-sub ul {
  101.   display: none;
  102.   position: absolute;
  103.   top: 36px;
  104.   left: -1px;
  105.   min-width: 100%;
  106.   text-align: center;
  107.   /* IE7 */
  108.  
  109.   *width: 100%;
  110. }
  111. #cssmenu .has-sub ul li {
  112.   text-align: center;
  113. }
  114. #cssmenu .has-sub ul li a {
  115.   border-top: 0 none;
  116.   border-left: 1px solid #5d5d5d;
  117.   display: block;
  118.   line-height: 120%;
  119.   padding: 5px 5px;
  120.   text-align: center;
  121. }
[PHP] pobierz, plaintext
b4rt3kk
27.08.2012, 16:52:29
Jeszcze jakbyś dodał kawałek kodu HTML... te nazwy w css kompletnie nic mi nie mówią i nie wiem w jaki sposób odnoszą się do kodu HTML.
Damonsson
27.08.2012, 16:58:24
style.css (wiersz 134)
[CSS] pobierz, plaintext 
  1. #cssmenu > ul > li a {
  2.     background: -moz-linear-gradient(center top , rgb(138, 138, 138) 0%, rgb(112, 112, 112) 50%, rgb(98, 98, 98) 51%, rgb(120, 120, 120) 100%) repeat scroll 0 0 transparent;
  3.     border-bottom: 1px solid rgb(93, 93, 93);
  4.     border-right: 1px solid rgb(93, 93, 93);
  5.     border-top: 1px solid rgb(93, 93, 93);
  6.     box-shadow: 0 0 0 1px rgb(138, 138, 138) inset;
  7.     filter: none;
  8.     line-height: 34px;
  9.     padding: 0 14px;
  10. }
[CSS] pobierz, plaintext
pemko11
27.08.2012, 22:12:33
Witam!
Super działa, ale mam teraz pytanie, jak zwiększyć odstęp pomiędzy tym menu a fotką gabloty na głównej??
Damonsson
27.08.2012, 22:28:29
Dodać margin-bottom: --px dla elementu od którego ma być odstęp.

Jak? Kombinuj. Drugiego gotowca nie dostaniesz.
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.