« назад напред »
Страници: [1]

Автор Тема: Проблем с центрирането  (Прочетена 1341 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

Dimitrov

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 6
Проблем с центрирането
« -: 08 Септември 2015, 12:42:15 »
Здравейте, опитвам се да разделя логото на две части но не мога да ги центрирам

css
Код: CSS
  1. .menumalka{
  2. background: url(img/menumalkaliniq.png);
  3. background-color: #000;
  4. width: 100%;
  5. height: 15px;
  6. font-size: 12px;
  7. font-family: Arial;
  8. color: white;
  9. font-weight: bold;
  10. text-align: left;
  11. margin: 0 auto;
  12. }
  13. .menugolqma{
  14. background: url(img/menugolqmaliniq.png);
  15. background-color: #000;
  16. width: 100%;
  17. height: 78px;
  18. font-size: 12px;
  19. font-family: Arial;
  20. color: white;
  21. font-weight: bold;
  22. text-align: left;
  23. margin: 0 auto;
  24. margin-top:-5px;
  25. }
  26.  
  27.  
  28. #logohealthy {
  29. background: url(img/logotop.png);
  30. width: 445px;
  31. height: 88px;
  32.  
  33. margin-top:-88px;
  34.  
  35. }
  36.  
  37. #logohealthybot {
  38. background: url(img/logobotv2.png);
  39. width: 445px;
  40. height: 152px;
  41. display: block;
  42. }
  43.  
  44.  
  45.  
  46. .allmenu{
  47. width: 100%;
  48. height: 78x;
  49. text-align: left;
  50. font-weight: bold;
  51. font-family: Arial;
  52. font-size: 14px;
  53. line-height: 65px;
  54. padding-top: 6px;
  55. }
  56.  
  57. .allmenu a{
  58. color: #2d2d2d;
  59. text-align: center;
  60. font-weight: bold;
  61. font-family: Arial;
  62. font-size: 16px;
  63. line-height: 65px;
  64. padding-left: 20px;
  65. }
  66.  
  67. .allmenu a:hover{
  68. color: #fff;
  69. text-align: center;
  70. font-weight: bold;
  71. font-family: Arial;
  72. font-size: 16px;
  73. padding-left: 20px;
  74. line-height: 65px;
  75. padding-top:5px;
  76.  
  77. }
  78.  
  79. /* icons */
  80.  
  81. .icons ul li a, .icons ul li a:hover{
  82.  
  83. background-color: #2b2b2b;
  84.  
  85. background-origin: padding-box;
  86.  
  87. background-repeat: no-repeat;
  88.  
  89. background-size: auto auto;
  90.  
  91. border-radius:3px;
  92.  
  93. display: block;
  94.  
  95. height: 32px;
  96.  
  97. overflow-x: hidden;
  98.  
  99. overflow-y: hidden;
  100.  
  101. text-indent: -99px;
  102.  
  103. width: 32px;
  104.  
  105. background-image: url("img/social.png");
  106.  
  107. height: 32px;
  108.  
  109. margin-top: -31px;
  110.  
  111. }
  112.  
  113. .icons ul li.myfacebook a, .icons ul li.myfacebook a:hover {
  114.  
  115. background-position: -64px 0;}
  116.  
  117. .icons ul li.myrss a, .icons ul li.myrss a:hover
  118.  
  119. { background-position: -192px 0;}
  120.  
  121. .icons ul li.mytwitter a, .icons ul li.mytwitter a:hover
  122.  
  123. {background-position: -256px 0;}
  124.  
  125. .icons ul li.mygplus a, .icons ul li.mygplus a:hover
  126.  
  127. {background-position: -96px 0;}
  128.  
  129. .icons ul li.mypinterest a, .icons ul li.mypinterest a:hover
  130.  
  131. {background-position: -160px 0;}
  132.  
  133. .icons ul li.myyoutube a, .icons ul li.myyoutube a:hover
  134.  
  135. {background-position: -288px 0;}
  136.  
  137. .icons ul li a:hover {
  138.  
  139. background-color: #3b3b3b !important;
  140.  
  141. }
  142.  
  143. .icons ul  li {
  144.  
  145. float:right;
  146.  
  147. margin-right: 15px;
  148.  
  149. list-style:none;
  150.  
  151. }
  152. /* icons */
  153.  


html
Код: HTML
  1. <!DOCTYPE html>
  3.     <head>
  4.         <link type="text/css" rel="stylesheet" href="stylehealthy.css" />
  5.         <title>Design</title>
  6. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  7. <script type="application/javascript" src="http://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>
  8. <script type="text/javascript" src="orangebox/js/orangebox.min.js"></script>
  9. <link rel="stylesheet" href="orangebox/css/orangebox.css" type="text/css" />
  10.         <link rel="shortcut icon" href="favicon.ico" type="img/ico" />
  11.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12.     </head>
  13.     <body>
  14.                         <div class="menumalka">
  15.                         </div>
  16.                         <div class="menugolqma">
  17.                             <div class="allmenu">
  18.                                 <a href="#" title="Начало, към главната страница">Начало</a>
  19.                                 <a href="#" title="Обсъждай..">Форум</a>
  20.                                 <a href="#" title="Нашите банери">Упражнения</a>
  21.                                 <a href="#" title="Нашите сървъри">Хранене</a>
  22.                                 <a href="#" title="Екипа на сайта">Съвети</a>
  23.                                 </div>
  24.                                                         <div class="clearfix"></div>
  25.                                 <div class="icons">
  26.                                         <ul class="alignright">
  27.                     <li class="myyoutube"><a href="#" title="Youtube">Youtube</a></li>
  28.                     <li class="myrss"><a href="http://feeds.feedburner.com/kickblogger" title="RSS">RSS</a></li>
  29.                     <li class="mygplus"><a href="#" title="Google+">Google+</a></li>
  30.                     <li class="mytwitter"><a href="http://twitter.com/kickblogger" title="Twitter">Twitter</a></li>
  31.                     <li class="myfacebook"><a href="#" title="Facebook">Facebook</a></li>
  32.                                         </ul>
  33.                                 </div>
  34.                                
  35.                         </div>
  36.                 <div id="logohealthy">
  37.                 </div>
  38.                 <div id="logohealthybot">
  39.                 </div>
така изглежда
« Последна редакция: 08 Септември 2015, 19:01:16 от Avalanche »
Активен

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Проблем с центрирането
« Отговор #1 -: 08 Септември 2015, 19:04:44 »
Малко трудно бихме могли да помогнем без работеща демо версия. Аз залагам че имаш разлика между дължините на снимките, и трябва просто да ги центрираш, пробвай така:

Код: CSS
  1. #logohealthy {
  2.     background-position: center;
  3.     background-repeat: no-repeat;
  4.     background-image: url('img/logotop.png');
  5.  
  6.     width: 445px;
  7.     height: 88px;
  8.     margin-top:-88px;
  9. }
  10.  
  11. #logohealthybot {
  12.     background-position: center;
  13.     background-repeat: no-repeat;
  14.     background-image: url('img/logobotv2.png');
  15.  
  16.     width: 445px;
  17.     height: 152px;
  18.     display: block;
  19. }
Активен
Цитат на: echeveria в 28 Ноември 2010, 22:53:21
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

Dimitrov

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 6
Re: Проблем с центрирането
« Отговор #2 -: 08 Септември 2015, 21:38:56 »
Не помогна, може би е от следващите контейнери.Ето демо testphpbb3.hostoi.com
Активен

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Проблем с центрирането
« Отговор #3 -: 08 Септември 2015, 21:47:22 »
Горната ти снимка не е изрязана както трябва, измърдай я малко вляво

Активен
Цитат на: echeveria в 28 Ноември 2010, 22:53:21
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

Dimitrov

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 6
Re: Проблем с центрирането
« Отговор #4 -: 09 Септември 2015, 08:29:05 »
Страхотен си, мерси за помощта :)
« Последна редакция: 09 Септември 2015, 12:16:54 от Dimitrov »
Активен
Страници: [1]
« назад напред »