1 Тема від A.N.Onim Востаннє редагувалося Chemist-i (22.12.2014 22:44:39)

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

Доброго дня!
Почав робити шаблон. Потрібні кнопки навігації зверху що при наведенні на них трішки опускаються донизу.
Ось код 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 Востаннє редагувалося A.N.Onim (23.12.2014 00:30:06)

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

А в мене не працює:
http://f5.s.сайт-злодій/I0RrekzL.png
http://f5.s.сайт-злодій/I0RrekzO.png



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

4 Відповідь від Chemist-i

  • Chemist-i
  • Chemist-i
  • Replace Team
  • Поза форумом
  • Звідки: world wide web
  • Дата реєстрації: 31.10.2012
  • Повідомлень: 3 800
    • Репутація: 2394

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

а так?
сss

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

Chemist-i вебсайт

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

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

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

6 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

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 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

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

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

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

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

задай

z-index

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

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

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

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

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

Post's attachments

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

10 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

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

Другий.

Post's attachments

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