PDA

View Full Version : css navbar - almost done :)


liquidmonkey
04-19-2008, 12:20 PM
a big THANKS for the help i've gotten so far on this site!! i've come a long way :)
have 3 questions left for my navbar...

1) is there a way to turn off the mouse when you hover over the already selected tab?

2) i can't get it to display properly, should be at the bottom left corner of my banner. it looks good in dreamweaver but when viewed in firefox, it looks like this...
http://www.livelifexplore.com/navbartest.html

3) also, there is a margin or something on the left and i can't find where that is coming from, any ideas?

HTML...
</head>
<body id="home">
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul id="mainnav">
<li id="navhome"><a href="index-test2.html">Home</a></li>
<li id="navadv"><a href="adventures.html">Adventures</a></li>
<li id="navpano"><a href="panoramics.html">Panoramics</a></li>
</ul>
</div>
</div>
</div>
</body>



CSS...

@charset "utf-8";
/* CSS Document */

#header {
position: relative;
height: 180px;
width: 900px;
background: url(../assets/dock-jumping-banner.jpg) no-repeat top left;
}

#header ul {
position: absolute;
left: 0;
bottom: 0;
list-style: none;
/* --- the following three lines are used to achieve opacity or transparency in the main nav bar --- */
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
/* -------------------------- */
background-color: #999999;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
padding-top: .3em;
padding-bottom: .3em;
font-weight: bold;
}

#navigation {
float: left;
margin: 0px;
padding: 0px;

}


#mainnav li {
display:inline;
padding:0;
margin:0;
}

#mainnav a:link,
#mainnav a:visited {
color:#FFFFFF;
width: auto;
text-decoration: none;
padding-right: 8px;
padding-left: 8px;
padding-top: 5px;
padding-bottom: 5px;
}

#mainnav a:hover {
color: #000000;
background-color: #CCCCCC;
}

#home #navhome a,
#adv #navadv a,
#pano #navpano a {
color:#000000;
background-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-top-width: 1px;
border-bottom-width: 1px;
padding-top: .3em;
padding-bottom: .3em;
}

#home #navhome a:hover,
#adv #navadv a:hover,
#pano #navpano a:hover {
background-color: #666666;
text-decoration: none;
}

liquidmonkey
04-19-2008, 04:14 PM
hello,
have sorted out questions 2 and 3 but am still looking for help on question 1 :)

liquidmonkey
04-19-2008, 06:59 PM
one more thing...
the spacing on the navbar is a bit messed up.
http://www.livelifexplore.com/adventures2.html

if you hold the mouse over either link to the side of 'adventures' there is some spacing when highlighted and i would like to get rid of that but have tried for an hour and can't :(

any hints??

CSS...

@charset "utf-8";
/* CSS Document */

#header {
position: relative;
height: 180px;
width: 900px;
background: url(../assets/dock-jumping-banner.jpg) no-repeat top left;
}

#header ul {
position: absolute;
left: 0;
bottom: 0;
list-style: none;
/* --- the following three lines are used to achieve opacity or transparency in the main nav bar --- */
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
/* -------------------------- */
background-color: #999999;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
padding-top: 0.3em;
padding-bottom: 0.3em;
}

#navigation {
float: left;
margin: 0px;
padding: 0px;
}

#mainnav li {
display:inline;
padding:0;
margin:0;
}

#mainnav a:link,
#mainnav a:visited {
color:#FFFFFF;
text-decoration: none;
padding: 0.3em;
}

#mainnav a:hover {
color: #000000;
background-color: #CCCCCC;
}

#home #navhome a,
#adv #navadv a,
#pano #navpano a {
color:#000000;
background-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 0.3em;
}

#home #navhome a:hover,
#adv #navadv a:hover,
#pano #navpano a:hover {
background-color: #666666;
text-decoration: none;
padding: 0.3em;
}

Cary
04-19-2008, 09:50 PM
one more thing...
the spacing on the navbar is a bit messed up...any hints??

Does this give you what you're looking for?

#mainnav li {
display:inline;
padding:0;
margin:0;
float:left;
}

Cary
04-19-2008, 09:58 PM
1) is there a way to turn off the mouse when you hover over the already selected tab?

"cursor:default" may give the effect you want.

#home #navhome a:hover,
#adv #navadv a:hover,
#pano #navpano a:hover {
background-color: #666666;
text-decoration: none;
padding: .3em;
cursor: default;
}

liquidmonkey
04-19-2008, 11:01 PM
that totally did the trick with the navbar spacing...THANK YOU!!
funny though, it displays correctly in firefox but dreamweaver renders it stacked on top of one another. well, its... 'home' 'adventures' on the first line then 'panoramics' below it.

any reason why dreamweaver would render that differently than how the browser sees it?


ps, was looking for 'mouse' earlier in the css options and i feel real dumb that its called 'cursor', haha. thanks for that and will mess around with it in the morning, time for bed now.