Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ CSS problems

Posted by: Eddie May 9 2017, 11:15 AM

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;
}

Posted by: pandy May 9 2017, 08:45 PM

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?

Posted by: Eddie May 10 2017, 11:21 AM

Pandy,
Thanks for the quick response.
Only the first entry (Active members) should have a different background.

Posted by: pandy May 10 2017, 11:55 AM

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/