просто быстрый простой вопрос HTML/CSS я уверен, что кто-то сможет ответить легко. Я начинающий программист, поэтому я спрашиваю :)
Так что я делаю панель навигации, сделанную из неупорядоченного списка, обернутого в тег div с переворачиванием, чтобы изменить цвет фона каждой ссылки. (Я надеюсь, что мой язык программирования имеет смысл) Вот мой код:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thomson Automotive Ebay Store</title>
<style type="text/css">
#navbar ul {
background-color: #000;
text-align: center;
padding: 10px;
}
#navbar ul li {
display: inline;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
}
#navbar ul li a {
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
}
#navbar ul li a:hover {
background-color: #0085D7;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">ADD TO FAVORITES</a></li>
<li><a href="#">DELIVERY & RETURNS</a></li>
<li><a href="#">FEEDBACK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
Поэтому моя единственная проблема заключается в том, что при предварительном просмотре в Firefox, когда я переворачиваю ссылку, изменение цвета фона, кажется, не заполняет мою навигационную панель должным образом, оставляя 1-2 пиксельный разрыв внизу, как показано здесь: http://i.imgur.com/OvpXdiQ.jpg
Незначительно, я знаю, но просто хотел знать, была ли проблема с моим кодированием, или это просто проблема браузера.
Спасибо :)
Удалите прокладку из #navbar ul
.
Добавьте эти свойства #navbar ul li a
:
{line-height: 40px; display: inline-block; padding: 0px 10px;}
Line-height определяет высоту вашего навигатора и вертикально центрирует ваш текст! Inline-Block дает высоту, поэтому вам не нужны никакие прокладки сверху или снизу, только стороны.