Вход | Регистрация | FAQ
Anonymous

Смещение текста на кнопке при наведении мыши

+ Ответить

Сообщений: 2 Страница 1 из 1


Смещение текста на кнопке при наведении мыши

c3po » Пн мар 17, 2014 6:25 am

Здравстуйте, товарищи!
Уже нет сил, помоги кто может.
Почему принаведении стрелки мышки на ссылку меню текст уезжает. Должен увеличиваться шрифт, но текст должен оставаться по центру.
Подскажите, пожалста!!!

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background-color:#4F2D3B;
margin:0;
padding:0;
}

#wrapper{
background: #292929 url(../images/background-m.jpg) top no-repeat;
background-size: 100% auto;
background-position:center;
width:900px;
height:685px;
margin:0 auto;
padding:0;
}


#nav {
outline:1px solid #cccccc;
width: 880px;
height: 37px;
font-size: 12px;
float:left;
}

#nav ul {
margin:40px 0px 0px 400px;
list-style:none;
}

#nav li {
display:inline;
}

#nav a {
outline:1px solid #cccccc;
float:left;
display:block;
width: 79px;
height: 37px;
line-height: 37px;
text-align:center;
text-decoration: none;
padding:2px 2px 2px 2px;
color:#FFF;
}

#nav a:hover {
color:#fff;
text-align:center;
background-image:url(../images/bg_blue.png);
padding: 5px 25px;
font-size: 18px;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/styleB.css" type="text/css" rel="stylesheet">
<title>Sky&Beauty</title>
</head>
<body>

<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">О НАС</a></li>
<li><a href="#">УСЛУГИ</a></li>
<li><a href="#">ГАЛЕРЕЯ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</div>

</body>
</html>
Аватара пользователя

c3po

  • Сообщения: 1
  • Зарегистрирован: Пн мар 17, 2014 6:09 am

Re: Смещение текста на кнопке при наведении мыши

XainPro » Пн мар 17, 2014 12:25 pm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background-color:#4F2D3B;
margin:0;
padding:0;
}

#wrapper{
background: #292929 url(../images/background-m.jpg) top no-repeat;
background-size: 100% auto;
background-position:center;
width:900px;
height:685px;
margin:0 auto;
padding:0;
}


#nav {
outline:1px solid #cccccc;
width: 880px;
height: 37px;
font-size: 12px;
float:left;
}

#nav ul {
margin:40px 0px 0px 400px;
list-style:none;
}

#nav li {
display:inline;
}

#nav a {
outline:1px solid #cccccc;
float:left;
display:block;
width: 79px;
height: 37px;
line-height: 37px;
text-align:center;
text-decoration: none;
padding:2px 2px 2px 2px;
color:#FFF;
}

#nav a:hover {
color:#fff;
text-align:center;
background-image:url(../images/bg_blue.png);
font-size: 18px;
}</style>
<title>Sky&Beauty</title>
</head>
<body>

<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">О НАС</a></li>
<li><a href="#">УСЛУГИ</a></li>
<li><a href="#">ГАЛЕРЕЯ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</div>

</body>
</html>
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm


+ Ответить

Страница 1 из 1