Help - Search - Members - Calendar
Full Version: CSS problems
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Eddie
Hi Y'All,
I am trying my teeth at a CSS nav bar and I have two questions:
1. How can I spread the nav bar across the entire width of the page?
2. Can I have different background colors for the lines "Active Members" and any of the "Name" lines?
Thanks,
Ed

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Main Nav Bar</title>
<link href="../resources/navmain.css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href="../index.html">The Club</a></li>
<li><a href="../chefs.htm">The Chefs</a>
<ul>
<li><a href="../chefs.htm">Active Members</a></li>
<li><a href="../chefs/name1.htm">Name1</a></li>
<li><a href="../chefs/name2.htm">Name2</a></li>
</ul>
</li>
<li><a href="../index.html">Menus</a></li>
<li><a href="../recipes.htm">Recipes</a>
<ul>
<li><a href="../recipes/appetizers/appetizers.htm">Appetizers</a></li>
<li><a href="../recipes/salads/salads.htm">Salads</a></li>
</ul>
</li>
<li><a href="../index.html">Pictures</a></li>
<li><a href="../index.html">Links</a></li>
</ul>
</nav>
</body>
</html>

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #909eab url(bg.png);
font-family: Verdana, sans-serif; font-size: 11px; line-height: 12px;
}
nav {
margin: 10px auto;
text-align: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 50px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}

/* nav bar */
nav ul li a {
display: block; padding: 5px 5px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 5px 5px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
pandy
1. Make nav ul 100% wide. That causes a problem though. Together width the 50px horizontal padding you have it causes the UL to be wider than the page (100% + 2*50px). I'd remove the padding and instead give the first LI 50px left margin.

2. Sure. Just find a way to create a selector that matches the element that you are after. The easiest way is to just plug IDs in where you need them (or classes if you want something similar for another submenu). I think it would also be possible with some fancy CSS3 selectors, without the need to add anything, or very little, to the HTML.

I didn't follow exactly how you want it though. Should all three menu items have different backgrounds?
Eddie
Pandy,
Thanks for the quick response.
Only the first entry (Active members) should have a different background.
pandy
You can give that LI an id and use that as the selector.

You could use a more advanced CSS3 selector like :first-child, but it would require that you use an id or class somewhere anyway to distinguish between the lists, so not much point.
https://css-tricks.com/almanac/selectors/f/first-child/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.