CS-bg.info - форумът на CS-bg :: Counter-Strike фен сайт

Центриране на меню.

PHP, MySQL, Javascript, XHTML и др.

Центриране на меню.

Мнениеот The Voyager » 02 Апр 2021, 00:28

Здравейте имам нужда от помощ, опитвам се да центрирам едно меню, какво имам в предвид, самите бутони да са в средата, опитах чрез CSS да го направя, но поради кофти умения с CSS така и не успях. Ще бъда много благодарен, ако някой по опитен се опита да помогна.

Не става чрез: … float:left > float: center; …
демо:
Изображение


HTML:
Код: Избери целия код
 <ul class="ml-navigation-bar-4">
   <li class="active"><a href="#">Начало<br/><em>Начална страница</em></a></li>
   <li><a href="#">За нас<br/><em>Кои сме ние?</em></a>

   </li>
   <li><a href="#">Услуги<br/><em>Предложения</em></a>
   </li>
   <li><a href="#">Цени<br/><em>Ценообразуване</em></a></li>
   <li><a href="#">Контакт<br/><em>Напишете ни съобщение</em></a></li>
</ul>


CSS:
Код: Избери целия код
ul.ml-navigation-bar-4{
   width: 100%;
   display: block;
   height: 70px;
   background-color: #61666d;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
   box-shadow: 0 1px 2px rgba(0,0,0,.25);
   background-image: -webkit-linear-gradient(bottom, #54585f, #70747b);
   background-image: -moz-linear-gradient(bottom, #54585f, #70747b);
   background-image: -o-linear-gradient(bottom, #54585f, #70747b);
   background-image: -ms-linear-gradient(bottom, #54585f, #70747b);
   background-image: linear-gradient(to top, #54585f, #70747b);
}


/*List Items*/
ul.ml-navigation-bar-4 li{
   display:block;
    float:left;
   border-right: 1px solid #555;
   -webkit-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
   -moz-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
   box-shadow: 1px 0px 0px rgba(255,255,255,.15);
}

ul.ml-navigation-bar-4 ul li {
   float:none;
   margin: 5px 0;
   
}

/* Regular Links*/
ul.ml-navigation-bar-4 a:active, ul.ml-navigation-bar-4 a:focus {
   outline-style:none;
}

ul.ml-navigation-bar-4 a {
   height: 70px;
   display:block;
   line-height: 59px;
   background: none;
   text-shadow: 0 1px 0 rgba(0,0,0,.50);
   padding: 0px 16px;
   text-decoration: none;
   color: #fff;   
   margin: 0px;
   font-weight: bold;
   font-size: 30px;
   text-transform: uppercase;
   font-weight: condensed;
   font-family: 'Open Sans Condensed', "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul.ml-navigation-bar-4 a em {
   font-size: 15px;
   display: block;
   margin-top: -38px;
   text-shadow: none;
   color: #ааа;
   opacity: 0.50;
   text-transform: lowercase;
   font-style: italic;
   font-weight: bold;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*Multi-level Links*/

ul.ml-navigation-bar-4 ul a {
   margin: 0px;
   height: 40px;
   line-height: 40px;
   font-size: 14px;
}
ul.ml-navigation-bar-4 span{
   overflow:hidden;
}

ul.ml-navigation-bar-4 ul a {
   text-align:left;
   white-space:nowrap;
}

ul.ml-navigation-bar-4 li:hover{
   position:relative;
}

/*Active State*/
ul.ml-navigation-bar-4 li.active a, ul.ml-navigation-bar-4 li.active:hover a {
   background-color: #e4ac35;
   background-image: -webkit-linear-gradient(bottom, #de9f2b, #e7b544);
   background-image: -moz-linear-gradient(bottom, #de9f2b, #e7b544);
   background-image: -o-linear-gradient(bottom, #de9f2b, #e7b544);
   background-image: -ms-linear-gradient(bottom, #de9f2b, #e7b544);
   background-image: linear-gradient(to top, #de9f2b, #e7b544);
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   
}

/*Hover State*/
ul.ml-navigation-bar-4 li:hover>a {
   color: #fff;
   background-color: #52565c;
   -webkit-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
   -moz-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
   box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
   text-decoration:none;
}

ul.ml-navigation-bar-4 ul li:hover>a {
   color: #fff;
   background-color: #52565c;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

ul.ml-navigation-bar-4 li a:hover{
   position:relative;
}

/*Arrow Images*/
ul.ml-navigation-bar-4 span{
   display:block;
   background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
   background-position:right center;
   background-repeat: no-repeat;
   padding-right:30px;}
   
ul.ml-navigation-bar-4 li:hover>a>span{
   background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
}

ul.ml-navigation-bar-4 a:hover span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png)}
ul.ml-navigation-bar-4 ul span,ul.ml-navigation-bar-4 a:hover table span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-2.png)}
ul.ml-navigation-bar-4 ul li:hover > a span{ background-image:url(./https://medialoot.com/preview/navigation-bars/arrow-2a.png);}
ul.ml-navigation-bar-4 table a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover a:hover span{background-image:url(./arrow-1.png)}
ul.ml-navigation-bar-4 table a:hover table span,ul.ml-navigation-bar-4 table a:hover a:hover table span{background-image:url(./arrow-1.png)}
The Voyager

Аватар
Потребител
Потребител
 
Регистриран на: 07 Фев 2016, 20:53
Местоположение: София
[ Профил в сайта ]

Назад към Уеб програмиране

Кой е на линия

Потребители, разглеждащи този форум: 0 регистрирани

Creative Commons License

Valve, Steam, поредицата Counter-Strike и логото на всяко от изброените са търговски марки и/или
регистрирани търговски марки на Valve Corporation. Всички други търговски марки са собственост на съответните им собственици.

Design: iVoka • Special thanks: VaRkOlAKA
За сайта | Екип | За реклама | Карта на сайта | За контакти

Powered by phpBB® Forum Software © phpBB Group | Theme by A1ex, edit by iVoka
Превод: Йоан Арнаудов | Корекции: Ивомир Петров
Условия за ползване | Политика на поверителност