Here is the code of HTML file and under is CSS code:
<!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>Figaro</title>
<style type="text/css">
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="figaro">
</div>
<div id="nav1">
<ul>
<li><a href="#">Par FIGARO</a></li>
<li><a href="#">Kontakti</a></li>
<li><a href="#">Draugi</a></li>
<li><a href="#">Atbalstītāji</a></li>
<li><a href="#">Reklāmas iespējas</a></li>
</ul>
</div><!--Vertikala navigacija --><!--vertikala navigacija -->
<div id="nav">
<ul>
<li id="aktualitates"><a href="#">AKTUALITĀTES</a></li>
<li id="diskusijas"><a href="#">Diskusijas/viedokļi</a></li>
<li id="galerija"><a href="#">Galerija</a></li>
<li id="abonet"><a href="#">Abonēt</a></li>
<li id="arhivs"><a href="#">Arhīvs</a></li>
</ul>
</div>
</body>
</html>
CSS Code:
#figaro {
background-image: url(images/figaro.jpg);
background-repeat: no-repeat;
display: block;
position: relative;
height: 169px;
width: 517px;
top: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
left: -167px;
}
#nav1 ul li a:hover {
background-image: url(images/navigacija_figaro_hover.gif);
color: #000;
}
#nav1 ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav1 ul li a {
display: block;
height: 25px;
width: 180px;
line-height: 10px;
text-decoration: none;
text-indent: 5px;
background-image: url(images/navigacija_figaro.gif);
color: #FFF;
font-style: normal;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
background-repeat: no-repeat;
z-index: 6;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
top: 230px;
left: -330px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul #aktualitates {
background-image: url(images/horizontal_nav/nav_aktualitates.jpg);
display: block;
position: relative;
height: 36px;
width: 168px;
left: -359px;
background-repeat: no-repeat;
top: -180px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#lapa {
background-image: url(images/pianobackground.jpg);
background-repeat: no-repeat;
height: 1000px;
width: 1000px;
}
#nav ul #aktualitates:hover {
background-image: url(images/horizontal_nav/nav_aktualitates_hover.jpg);
background-repeat: no-repeat;
}
#nav ul #diskusijas {
background-image: url(images/horizontal_nav/nav_diskusijas.jpg);
background-repeat: no-repeat;
display: block;
position: relative;
height: 36px;
width: 193px;
left: -172px;
top: -216px;
padding-left: 12px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul #galerija {
background-image: url(images/horizontal_nav/nav_galerija.jpg);
background-repeat: no-repeat;
display: block;
position: relative;
height: 36px;
width: 128px;
left: -10px;
top: -252px;
padding-left: 13px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul #abonet {
background-image: url(images/horizontal_nav/nav_abonet.jpg);
background-repeat: no-repeat;
position: relative;
height: 36px;
width: 129px;
left: 121px;
top: -288px;
padding-left: 15px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
}
#nav ul #arhivs {
background-image: url(images/horizontal_nav/nav_arhivs.jpg);
background-repeat: no-repeat;
display: block;
position: relative;
height: 36px;
width: 158px;
left: 272px;
top: -324px;
padding-left: 28px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul {
list-style-type: none;
mi
}
#nav ul li a
{
font-family: "Times New Roman", Times, serif;
font-size: 15px;
line-height: 36px;
text-decoration: none;
color: #000;
font-weight: 200;
padding-left: 25px;
}
#nav ul #diskusijas:hover {
background-image: url(images/horizontal_nav/nav_diskusijas_hover.jpg);
}
#nav ul #galerija:hover {
background-image: url(images/horizontal_nav/nav_galerija_hover.jpg);
}
#nav ul #abonet:hover {
background-image: url(images/horizontal_nav/nav_abonet_hover.jpg);
}
#nav ul #arhivs:hover {
background-image: url(images/horizontal_nav/nav_arhivs_hover.jpg);
}
HOW THE WEB ACTUALLY LOOKS, LOOK IN THE PICTURE.
Thanks!
