Rambler's Top100

Создание меню для сайта

Создание верхнего меню

В html файле, между открывающим тегом <div id="top_menu"> и закрыващим </div> (между подсвеченными розовым цветом) создадим еще один блок и идентефицируем его как: <div id="top_lnk"> </div>, внутрь этого блока вставим код списка меню

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="top_menu">

     <div id="top_lnk">
<ul id="navCircle">
<li><a class="active" href="index.html"><img src="images/kov.gif" border=0>Главная</a></li>
<li><a href="Products.html"><img src="images/kov.gif" border=0>Ссылка_1</a></li>
<li><a href="Support.html"><img src="images/kov.gif" border=0>Ссылка_2</a></li>
<li><a href="Order.html"><img src="images/kov.gif" border=0>Ссылка 3</a></li>
<li><a href="News.html"><img src="images/kov.gif" border=0>Ссылка_4</a></li>
</ul>
     </div>

</div>

<div id="left"></div>

<div id="right"></div>

<div id="content"></div>

<div id="clear"></div>

<div id="footer"></div>

</div>

 

</body>
</html>

А в файл style.css сразу после записи стилей для #top_menu, добавим стили для блока #top_lnk и самого списка навигационного меню (Просто выделите и скопируйте текст жирным шрифтом ниже и вставте в свой файл style.css)

#top_lnk {
font-family: verdana, sans-serif;
font-size: 11px;
PADDING-top:10px;
PADDING-left:250px;
}

/*верхнее меню */
#navCircle {
margin: 0;
padding: 0 0 20px 10px;
}

#navCircle li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
float: left;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #18820C;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
padding-bottom: 6px;
color: #000;
}


Сейчас наша html страница сайта выглядит ТАК, а запись в файле style.css будет такой

На следующей странице Создание меню в левой колонке сайта, нажмите кнопку 5

 

 

Rambler's Top100 Яндекс цитирования