I made it and I cant fix the drop down box problem. The text shows its all good but the background image behind the drop down box doesnt work. like it shows a image though it is weird i can t explain it
Code: Select all
<!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>
<title>The Guitar Manifesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
body {
background-color: #00b3ff;
background-image: url(background1.png);
background-repeat: repeat-x;
}
body
{
background-color: #00b3ff;
}
body,td,th
{
color: #FFF;
}
.parentmenu
{
position: relative;
}
.submenu
{
display: none;
margin: 0;
padding: 0;
background-color: #82c7ea;
}
.parentmenu:hover .submenu
{
display: block;
position: absolute;
top: 30px;
left: 0;
text-align: center ;
}
#dolphincontainer #dolphinnav ul .parentmenu .submenu {
color: #FFFFFF;
}
</style>
</head>
<body>
<img class="logo" src="Szerykblue_sm.png" alt=".." />
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href=""class="current"><span>Home</span></a></li>
<li><a href="tour.html"><span>Tour</span></a></li>
<li><a href="album.html"><span>Album</span></a></li>
<li><a href="band.html"><span>Band</span></a></li>
<li class="parentmenu">
<a><span>Media</span></a>
<ul class="submenu">
<li><a href="media.html"><span>Photos</span></a></li>
<li><a href="media.html"><span>Videos</span></a></li>
</ul>
</li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
<iframe src="frame.html" frameborder="0"
width="100%" height="350">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
<div align="center" id="footer"><hr />Site Design by: Matt Brown</div>
</html>Code: Select all
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
IMG.logo {
display: block;
margin-left: auto;
margin-right: auto
}
h2 {text-align:center}
h4 {text-align:center}
p {text-align:center}
#footer {
position: absolute;
bottom: 0px;
width: 99%;
}
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{
position:relative;
height:56px;
color:#E0E0E0;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#parentmenu{
position: center;
}
#dolphinnav{
position:relative;
height:33px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background: url(dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 425px;
}
#dolphinnav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#dolphinnav ul li{
display:block;
float:left;
margin:0 1px;
}
#dolphinnav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
}
#dolphinnav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;
}
#dolphinnav ul li a:hover{
color:#fff;
background:transparent url(dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
color:#fff;
background:#1D6893 url(dolphin_left-ON.gif) no-repeat top left;
line-height:275%;
}
#dolphinnav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#1D6893 url(dolphin_right-ON.gif) no-repeat top right;
height:33px;
}
/* ---------------------- END Dolphin nav ---------------------- */