Side indikator
Hej.Jeg er ved at lave et skoleprojekt. Se www.viviv.dk
Jeg vil gerne have tilføjet en sideindikator uden at skulle ændre opbygningen af min menu. Er det muligt?
Jeg håber I kan hjælpe hurtigt da jeg er lidt i tidsnød. Kom endelig med andre gode råd hvis I falder over noget besynderligt i koderne.
På forhånd mange tak!
Her er min "home" side i HTML:
<!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>home</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
img
{
position:absolute;
left:-115px;
top:109px;
z-index:-1;
}
</style>
</head>
<body class="home">
<ul id="menu">
<li></li>
<li ><a href="index.html" target="_self" title="home">home</a></li>
<li><a href="about.html" target="_self" title="about">about</a></li>
<li><a href="music.html" target="_self" title="music">music</a></li>
<li><a href="lyrics.html" target="_self" title="lyrics">lyrics</a></li>
<li><a href="mystory.html" target="_self" title="my story">my story</a></li>
<li><a href="gallery.html" target="_self" title="gallery">gallery</a></li>
<li><a href="contact.html" target="_self" title="contact">contact</a></li>
</ul>
<div id="wood">
<img src="images/home.png" width="956" height="542" alt="home" /></div>
</body>
</html>
Her er CSS'en:
/* CSS Document */
body {
background-color:#D1D1D1;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#wood{
width:956px;
height:542px;
position:relative;
top:-70px;
left:290px;
}
html,body{margin:0;padding:0}
p {margin:0 0 1em 0;padding:0}
h1{
margin:0 0 .7em 0;
padding:0;
font-size: 18px;
}
form {margin:0;padding:0}
a{
color:#FFF;
text-decoration:none;
}
a:link{
color:#FFF;
text-decoration:none;
}
a:visited{
color:#FFF;
text-decoration:none;
}
a:hover {
color:#CCC;
}
ul#menu{
position:relative;
float:left;
left:180px;
top:90px;
width:800px;
display:block;
height:40px;
font-size:17px;
font-family:"Century Gothic", Calibri;
z-index:1;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
display:block;
float:left;
color:#8B6A6A;
text-decoration:none;
padding:3px 10px 0 10px;
height:30px;
}
ul#menu li a:hover{
color:#FFF;
background-color:#950019;
}
#logo-zone {
position: absolute;
top: 156px;
left: 311px;
height: 328px;
width: 328px;
background-color:#F0C;
z-index:100;
}
.lyricmenu {
top:184px;
left:706px;
width:194px;
height:102px;
font-family:"Century Gothic", Calibri;
line-height:25px;
font-size:16px;
color: #FFF;
z-index:2;
}
.lyrics {
position:absolute;
top:165px;
left:700px;
width:325px;
height:280px;
font-family:"Century Gothic", Calibri;
font-style:normal;
line-height:20px;
font-size:12px;
overflow:auto;
color: #FFF;
z-index:2;
}
.contact {
left: 731px;
top: 280px;
}
.music {
position:absolute;
height:186px;
width:317px;
left: 701px;
top: 209px;
line-height:40px;
}
