The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS problems
Eddie
post May 9 2017, 11:15 AM
Post #1





Group: Members
Posts: 4
Joined: 4-May 17
Member No.: 26,395



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2017, 08:45 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Eddie
post May 10 2017, 11:21 AM
Post #3





Group: Members
Posts: 4
Joined: 4-May 17
Member No.: 26,395



Pandy,
Thanks for the quick response.
Only the first entry (Active members) should have a different background.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 10 2017, 11:55 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:51 PM