1 Востаннє редагувалося Chemist-i (22.12.2014 22:44:39)

Тема: Кнопки навігації зрушують, те що не потрібні зрушувати

Доброго дня!
Почав робити шаблон. Потрібні кнопки навігації зверху що при наведенні на них трішки опускаються донизу.
Ось код HTML:

Прихований текст
<!DOCType html>
<html>
    <head>
        <title>Головна</title>
        <meta charset="utf-8">
        <!-- підключаємо CSS-файл Twitter Bootstrap -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <!-- header -->
            <div class="row header_div">
                <ul class="header_list">
                    <li><a href="">Головна</a></li>
                    <li><a href="">Про нас</a></li>
                    <li><a href="">Контакти</a></li>
                </ul>    
            </div>
            <!-- main-content -->
            <div class="row main_content">
                <div class="col-lg-3" style="background: #999999;">
                    Sidebar
                </div>
                <div class="col-lg-9" style="background: #AAAABB;">
                    Content
                </div>
            </div>
            <!-- footer -->
            <div class="row" style="background: #741590;">
            Footer
            </div>    
        </div>
        <!-- JS Twitter Bootstrap -->
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>


CSS:

Прихований текст
.header_div {
    display: block;
    height: 50px;
    background: #68614d;
}

.header_list {
    display: inline-block;
    list-style: none;
    float: right;
}

.header_list li {
    display: inline;
}

.header_list li a {
    display: block;
    text-align: center;
    margin-right: 15px;
    margin-top: 5px;
    padding-top: 7px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #e4decd;
    height: 35px;
    background: #66814d;
}

.header_list li a:hover {
    position: relative;
    margin-top: 25px;
}

.main_content {
    background: #654321;
}

Так от при наведенні вказівника на посилання воно то зміщюється, але заодно і зміщює нижній дів -

<div class="col-lg-9" style="background: #AAAABB;">
    Content
</div>


Як це виправити? Пробував через паддінг - все норм, але фон залишається на місці  :)
Дякую.

2

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

http://jsfiddle.net/cf1zn9pj/
Тут ваш код працює.
Спробуйте не змінювати значення position для .header_list li a:hover

.header_list li a:hover {
    padding-top: 25px;
}

3 Востаннє редагувалося A.N.Onim (23.12.2014 00:30:06)

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

А в мене не працює:
http://f5.s.qip.ru/I0RrekzL.png
http://f5.s.qip.ru/I0RrekzO.png



:(
Що порадите?

4

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

а так?
сss

    .header_list li a:hover {
    position: relative;
    margin-top: 5px;
    }

5 Востаннє редагувалося A.N.Onim (23.12.2014 00:54:14)

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

коли наводжу на посилання:
http://f5.s.qip.ru/I0RrekA8.png
взагалі нічого не змінюється.

6

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

Якщо я все правильно зрозумів

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    ul{
        float: left;
        width: 100%;
        height: 40px;
        background: #f1f1f1;
        padding: 20px 0;
    }
    li{
        float: left;
        list-style: none;
        margin: 0 5px;
    }
    a{
        display: block;
        background: #000;
        color: #fff;
        padding: 10px;
    }
    li:hover{
        border-top: 10px solid transparent;
    }
    a:hover{
        opacity: 0.8;
    }
</style>
<body>
<nav>
    <ul>
        <li><a href="#">lorem</a></li>
        <li><a href="#">lorem</a></li>
        <li><a href="#">lorem</a></li>
    </ul>
</nav>
</body>
</html>

Chemist-i: код слід брати у теґ code

Подякували: Djalin, A.N.Onim2

7

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

Дякую. Кнопки опускаються, але тепер зховуються за нижніми дівами. Потрібно напевне показати, що я хочу. Ось в цьому шаблоні в шапці є такі кнопки: http://html-templates.info/blogs-html-t … -html-blog
Там фоном використовується зображення - намагався і так зробити не виходить. Неначе роблю все як там - код то в мене є) . Але результат - ви знаете.

8 Востаннє редагувалося Key (25.12.2014 18:07:03)

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

задай

z-index

а ще краще скинь архів я подивлюсь і чим зможу
В даній темі все зроблено задопомогою рисунків, не дуже хороший спосіб.

Подякували: A.N.Onim1

9 Востаннє редагувалося A.N.Onim (25.12.2014 19:17:00)

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

Дякую.  :)
Ось два архіви - те над чим я працюю і той готовий шаблон, що скачав.

Post's attachments

140523114755.zip 1 mb, 191 downloads since 2014-12-25 

10

Re: Кнопки навігації зрушують, те що не потрібні зрушувати

Другий.

Post's attachments

pr_№1_blog.rar 135.76 kb, 221 downloads since 2014-12-25