Вопрос Подскажите как выровнять по центру тулбар

Пользователь · Регистрация: 17.02.2012

http://pcvector.net/scripts/menu_and...yy-tulbar.html

Вот собственно CCS код этого тулбара подскажите как выровнять его по центру странички???

PHP код:



@keyframes slide{
            0%{top:-50px; opacity:0;}
            100%{top:0; opacity:1.0;}
        }
        @-moz-keyframes slide{
            0%{top:-50px; opacity:0;}
            100%{top:0; opacity:1.0;}
        }
        @-webkit-keyframes slide{
            0%{top:-50px; opacity:0;}
            100%{top:0; opacity:1.0;}
        }
           
        @keyframes word{
            0%{top:20px; opacity:0.5;}
            80%{top:55px;}
            100%{top:50px; opacity:1.0;}
        }
        @-moz-keyframes word{
            0%{top:20px; opacity:0.5;}
            80%{top:55px;}
            100%{top:50px; opacity:1.0;}
        }
        @-webkit-keyframes word{
            0%{top:20px; opacity:0.5;}
            80%{top:55px;}
            100%{top:50px; opacity:1.0;}
        }
                 
        #toolbar{
            background-color:#000; /*Fallback background color for IE since it doesn't render rgba*/
            background-color:rgba(0, 0, 0, 0.85);
            color:#FFF;
            font-family:sans-serif;
            clear:both;
            position:fixed;
            z-index:99;
            top:0;
            right:20px;
            border-bottom:1px solid #000;
            box-shadow:0 0 5px #000, 0 0 5px #000;
            text-shadow:-1px -1px 0 #000;
            font-weight:bold;
             
            -moz-animation-name: slide;
            -moz-animation-timing-function: ease-in;
            -moz-animation-iteration-count: 1;
            -moz-animation-duration: 1s;
                  
            -webkit-animation-name: slide;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-duration: 1s;
                     
            animation-name: slide;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-duration: 1s;
        }
                 
        #toolbar .title a{float:left; padding:10px; min-width:200px; text-align:center; color:#FFF; text-decoration:none;}
        #toolbar ul{float:right; list-style-type:none; margin:0; padding:0;}
        #toolbar li{display:inline;}
        #toolbar li a{color:#FFF; text-decoration:none; position:relative; border-left:1px solid #444; border-right:1px solid #000; padding:10px; margin:0; display:inline-block; float:left;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
        }
        #toolbar li a:hover{background:#CCC; color:#000; text-shadow:1px 1px 0 #FFF;}
                 
        #toolbar li span{display:none;}
        #toolbar li:hover > span{display:block; position:absolute; top:50px; left:0; float:left; width:100%; text-align:center; text-shadow:none; color:#000; 
            -moz-animation-name: word;
            -moz-animation-timing-function: ease-in;
            -moz-animation-iteration-count: 1;
            -moz-animation-duration: 0.5s;
             
            -webkit-animation-name: word;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-duration: 0.5s;
                     
            animation-name: word;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-duration: 0.5s;
        }

Администратор · Регистрация: 27.02.2009

Замените идентификатор toolbar на такой:

PHP код:



         #toolbar{
            background-color:#000; /*Fallback background color for IE since it doesn't render rgba*/
            background-color:rgba(0, 0, 0, 0.85);
            color:#FFF;
            font-family:sans-serif;
            clear:both;
            position:fixed;
            z-index:99;
            top:0;
            width:600px;
            margin-left:-300px;
            left:50%;
            border-bottom:1px solid #000;
            box-shadow:0 0 5px #000, 0 0 5px #000;
            text-shadow:-1px -1px 0 #000;
            font-weight:bold;
             
            -moz-animation-name: slide;
            -moz-animation-timing-function: ease-in;
            -moz-animation-iteration-count: 1;
            -moz-animation-duration: 1s;
                  
            -webkit-animation-name: slide;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-duration: 1s;
                     
            animation-name: slide;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-duration: 1s;
        }

Обратите внимание!
Вам нужно задать ширину этого тулбара
В данном случае я сделал 600px (width:600px;)
установить параметр left:50%;
И установить параметр margin-left:-300px; (число -300px вычисляется, как половина ширины width, то есть 600/2=300 )

Пользователь · Регистрация: 17.02.2012

Цитата:

Сообщение от Vector

Обратите внимание!
Вам нужно задать ширину этого тулбара
В данном случае я сделал 600px (width:600px

установить параметр left:50%;
И установить параметр margin-left:-300px; (число -300px вычисляется, как половина ширины width, то есть 600/2=300 )

Огромное спасибо!!!!!!!! Самый лучший в мире форум

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вопрос подскажите бесплатный хостинг с доменом	HaSp	Хостинг	18	23.03.2013 22:18
Вопрос Подскажите дистрибутив линукса.	legioner	Дистрибутивы	11	19.02.2013 13:49
FAQ Выравниваем ник, статус и аватар по центру.	noname	Темы и сообщения (postbit и т.д.)	11	08.04.2012 15:48
Вопрос Срочно,подскажите где найти?!	Sabrina	Вопросы по vBulletin 3.х	12	25.10.2011 17:44
Проблема В ЛС аватар по центру	Gunnerss	Вопросы по vBulletin 4.х	4	22.08.2011 10:50