Help with a Navigation Bar
Posted: Thu Oct 20, 2011 9:22 am
I got a navigation bar template offline. and just wondering how am I able to make just 1 of those a drop down box????
thanks
thanks
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
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-image: url(background1.png);
background-repeat: repeat-x;
background-color: #00b3ff;
}
body,td,th {
color: #FFF;
}
</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><a href="media.html"><span>Media</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
<h2>Lastest Updates</h2>
</body>
</html>
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}
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{
position:relative;
height:56px;
color:#E0E0E0;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#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 ---------------------- */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;
}
body,td,th
{
color: #FFF;
}
.parentmenu
{
position: relative;
}
.submenu
{
display: none;
margin: 0;
padding: 0;
}
.parentmenu:hover .submenu
{
display: block;
position: absolute;
top: 30px;
left: 0;
}
</style>
</head>
<body>
<IMG class="logo" src="Szerykblue_sm.png" alt=".." />
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li class="parentmenu">
<a><span>Home</span></a>
<ul class="submenu">
<li>Whatever</li>
<li>Whatever</li>
<li>Whatever</li>
</ul>
</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><a href="media.html"><span>Media</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
<h2>Lastest Updates</h2>
</body>
</html>Can't post what CSS in what HTML? More importantly, why not?ebgames56 wrote:i cant post that css in the html
I don't understand what this means.ebgames56 wrote:but it adds another box because the media it doesnt do a drop