Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 09.12.2017, 10:11   #1
DenShpak
Новичок
 
Регистрация: 09.12.2017
Адрес: Казань
Сообщений: 1
Репутация: 10
Восклицание Помогите CSS

При наведении на .menu li a:hovver который имеет border при наведении шрифт увеличиваю на 1px,но при масштабировании вместе начинает двигаться обводка
Цитата:
HTML
Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href=https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">
    <link rel="stylesheet" href="style/main.css" type="text/css">
    <meta charset="UTF-8">
    <title>ОТСЧЁТ ДО НГ</title>
</head>
<body>
<div class="header">
    <div class="menu">
        <ul>
            <li><a href="#">ДОМОЙ</a></li>
            <li><a href="#">О СЕРВИСЕ</a></li>
            <li><a href="#">СПОНСОРЫ</a></li>
        </ul>
    </div>
</div>
</body>
</html>

CSS
Цитата:
Код:

body{
    padding: 0;
}
.header{
    display: flex;
    border: 2px solid black;
    justify-content: center;
    width:100%;
    margin: auto;
    font-family:Open Sans Condensed ,Arial,Tahoma sans-serif;
}
.menu{
    width: 600px;
    border: 1px soli red;
    box-sizing: border-box;
}
.menu ul{
     text-align: right;
}
.menu li{
    font-size: 20px;
    display: inline-block;
    text-decoration: none;
    position:relative;
    margin-right: 20px;
    padding: 3px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
}
.menu li a {
    text-decoration: none;
}
.menu li a:hover{
    font-size:21px;
    transition: 0.5ms;
    padding: 0;
    line-height:21px;
}

САЙТ НА КОТОРОМ МОЖНО ПОСМОТРЕТЬ КАК РАБОТАЕТ.САЙТ ПУСТОЙ ПОЛНОСТЬЮ,ТАК,ЧТО ЭТО НЕ РЕКЛАМАDenShpak
__________________
С Ув.Денис Шпак
DenShpak вне форума   Ответить с цитированием
Старый 11.12.2017, 15:15   #2
AlNick
 
Регистрация: 15.08.2017
Сообщений: 9
Репутация: 10
По умолчанию

При увеличении размера шрифта, увеличивается область, которую занимает текст. Поэтому рамка сдвигается
AlNick вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите (к js не подключается css) Alex-2 JavaScript, Ajax 5 02.05.2017 12:27
[CSS]: Пытаюсь сделать Карусель без JS, но не срабатывает нужное css-свойство. Помогите разобраться. MeriPoppins HTML и CSS 2 10.02.2017 23:50
Помогите с CSS rznasa HTML и CSS 1 19.02.2015 13:51
Помогите с позиционированием блоков CSS Андрей79 HTML и CSS 1 10.04.2009 10:05
Помогите по CSS вроде :) Юрий777 HTML и CSS 4 16.05.2008 23:26


20:38.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru