Hi, I am having issues with selecting specific elements. In summary, styles are not applied to classes as per my understanding… I am doing something wrong and would greatly appreciate some help.
I am planning to apply the class showDiv dynamically to the <li><a> element via jquery (using the hoverIntent lib for on-hover for any <a.tab> element in the list - I have got this working but the CSS is wrong!).
I wish to appy the class showDiv to the <a> element and the DIV will be shown. Removing the class showDiv should also hide the DIV. When testing the code below I want the DIV to be shown as the adjacent A element has the class showDiv applied to it, but alas it does not.
Hi, since the <div> is an adjacent element to the <a> (and not a c hild, which would be invalid anyway) you will need to select it with the adjacent child selecftor)
ul#mainNav a.showDiv + div
{
display: block;
}
ul#mainNav a.tab + div
{
width: 200px;
border: 1px black #00F;
}
Oh dear… how embarrasing here i am doing jquery and cant even get borders showing!! That will teach me for posting after a few cans of Fosters larger. Bit of a headache this morning i might like to add.
Selectors is one thing I have struggled with a little, especially when wanting to overide inherited attributes for elements contained within a div.
Firstly, I positioned the menu li elements instead of floating them. Unfortunatly if i dont set a specific width, i.e. li#link1 a, the text wraps around and goes onto two lines - I cant find where the width is being set. Not so much of an issue as I will replace the link text with background images, but would be good for my understanding if i knew why.
Secondly I am having issues with removing inherited attributes. The ‘li.menuLink a’ elements should look like normal links, but they are inheriting the ‘box style’ with image look that is defined for ‘ul.mainMenu ul a’. I have removed a lot of the attributes but cant make it look like a normal link - in particular removing the width, the current ‘li.menuLink a’ elements are floating or appearing two on a line .
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Mega Menu Example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// If no JS CSS menu will still work
$("#menu2").removeClass("cssonly");
// Find subnav menus and slide them down
$("#menu2 li a").hover(function(){
$(this).parent().find("ul.subnav").slideDown(100);
$(this).parent().hover(function() {
}, function() {
// On hovering out slide subnav menus back up
$(this).parent().find("ul.subnav").slideUp(100);
})
});
});
</script>
<style media="screen" type="text/css">
* { margin: 0; padding: 0; }
body {
background: #000;
font: 14px Arial, Helvetica, sans-serif;
}
p { margin: 15px 0; color: #333; font-size: 13px; line-height: 18px; }
#menu
{
width: 800px;
position: relative;
}
li#link1
{
position: absolute;
top: 0px;
left: 15px;
}
li#link2
{
position: absolute;
top: 0px;
left: 120px;
}
li#link3
{
position: absolute;
top: 0px;
left: 250px;
}
li#link4
{
position: absolute;
top: 0px;
left: 500px;
}
li#link1 a { width: 80px; }
li#link2 a { width: 70px; }
li#link3 a { width: 180px; }
li#link4 a { width: 100px; }
/* Style the menu and position list items */
ul.mainMenu {
position: relative;
height: 35px;
padding: 0 8px;
background: #fff;
clear: both;
}
ul.mainMenu li { list-style: none; }
/* Style and position links i.e top level links Link1, Link2 etc */
ul.mainMenu li a {
position: absolute;
display: block;
text-align: center;
height: 19px;
padding: 8px 12px;
text-decoration: none;
color: #666;
}
ul.mainMenu li a:hover {
color: #222;
font-weight: bold;
}
/* When hovering over main list items, show second level lists */
ul.cssonly li:hover ul { display: block; }
/* rolldown menu item attributes */
ul.mainMenu ul {
position: absolute; /* absolute to take out of LI flow otherwise LI expands for jquery rollover */
top: 35px;
padding-top: 5px;
background: #fdfdfd url(images/shadow.png) repeat-x;
display: none; /* Hide until parent list item is hovered on */
width: 400px; /* default drop down width */
}
/* set specific width for each drop down if different from default*/
li#link2 ul
{
width: 200px;
background-color:#FFC;
border-left: 1px solid orange;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
}
li#link4 ul
{
right: -240px;
width: 447px;
}
ul.mainMenu ul li { padding: 8px; border-right: dashed 1px #f4f4f4; float: left; }
ul.mainMenu ul li:last-child { border: 0; }
/*specific li classes*/
ul.mainMenu ul li.title {
float: none; /* Remove parent float setting */
padding: 6px 10px;
border: 0; /* Remove parent border setting */
border-bottom: solid 1px #090;
font-size: 11px;
font-weight: bold;
}
/* ************************************** */
/* how to make these look like normal links :( */
/* ************************************** */
ul.mainMenu ul li.menuLink a, ul.mainMenu ul li.title a {
float: none; /* Remove parent float setting */
padding: 6px 10px;
border: 0; /* Remove parent border setting */
border-bottom: dashed 1px #f4f4f4;
font-size: 11px;
font-weight: normal;
padding: 0;
margin: 0;
height: 11px;
border: none;
text-align: left;
display: block;
width: 100%;
}
ul.mainMenu ul li.title a { font-weight: bold; }
ul.mainMenu ul img { height: 64px; width: 64px; }
ul.mainMenu ul span { display: block; }
ul.mainMenu ul a {
height: 80px;
text-align: center;
font-size: 12px;
font-weight: bold;
border: solid 1px #ebebeb;
background: #fff;
position: relative;
}
ul.mainMenu ul a:hover { background: #f4f7fa; }
ul.mainMenu ul a img { opacity: .7; border: 0; }
ul.mainMenu ul a:hover img { opacity: 1; }
/* When hovering over a list item link show the more info div */
ul.mainMenu ul a:hover span.moreinfo { display: block; }
/* Position and style the more info div */
ul.mainMenu ul span.moreinfo {
display: none;
width: 275px;
position: absolute;
bottom: -25px;
left: 12px;
padding: 6px 10px;
background: #fff;
text-align: left;
font-weight: normal;
}
</style>
</head>
<body>
<ul class="mainMenu cssonly" id="menu">
<li id="link1"><a href="#">Link 1 »</a>
<ul class="subnav">
<li class="title">This is the Link 1 title</li>
<li>
<a href="#"><img src="images/icons/firefox-bag.png" alt="Firefox Bag" />
<span>Link 1a</span>
<span class="moreinfo">More info about list item and image could go here</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/fixit-bag.png" alt="Fix It Bag" />
<span>Link 1b</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/globe.png" alt="Globe & Bag" />
<span>Link 1c</span>
<span class="moreinfo">More info about list item and image could go here</span>
</a>
</li>
</ul>
</li>
<li id="link2"><a href="#">Link 2 »</a>
<ul class="subnav">
<li class="title"><h1>title - no link</h1></li>
<li class="title"><h1><a href="#">title - with link</a></h1></li>
<li class="menuLink"><a href="#">Link 2-1</a></li>
<li class="menuLink"><a href="#">Link 2-2</a></li>
</ul>
</li>
<li id="link3"><a href="#">Link 3 Without Submenu</a></li>
<li id="link4"><a href="#">Link 4 »</a>
<ul class="subnav">
<li class="title">This is the Link 5 title</li>
<li>
<a href="#"><img src="images/icons/firefox-bag.png" alt="Firefox Bag" />
<span>Link 3a</span>
<span class="moreinfo">More info about list item and image could go here</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/fixit-bag.png" alt="Fix It Bag" />
<span>Link 3b</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/globe.png" alt="Globe & Bag" />
<span>Link 3c</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/lock.png" alt="Lock & Bag" />
<span>Link 3d</span>
<span class="moreinfo">More info about list item and image could go here</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/safety.png" alt="Safety & Bag" />
<span>Link 3e</span>
</a>
</li>
<li>
<a href="#"><img src="images/icons/music-bag.png" alt="Music & Bag" />
<span>Link 3e</span>
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Any comments on the above, selector targeting, efficiency etc would be much appreciated. What should i be doing better and what standard css practice am i missing out on?
Elements with position absolute work on a shrink to fit basis. Therefore the parent’s width is dictated by its content.
However you have absolutely placed the content and as you know absolute elements are removed from the flow and therefore the parent assumes it has no content and the width is zero. This causes the text to break at the first opportunity it can.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<style>
div, p {
position:absolute;
}
</style>
</head>
<body>
<div>
<p>This text will break onto multiple lines in all but ie7 and under</p>
</div>
</body>
</html>
Note that IE7 and IE6 will not break the text and let it flow along one line all though that is incorrect behaviour.
You could force the issue by setting the content to white-space:nowrap but that would still mean elements would overlap if you didn’t set a width.
On the other hand if you float the children (as you should have done from the start) then the absolute container will expand with the floated content as although floats are also removed from the flow an absolute element will always encompass floated children.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
position:absolute;
}
p{float:left}
</style>
</head>
<body>
<div>
<p>This text will not break onto multiple lines</p>
</div>
</body>
</html>
Thanks for the info. Great explanation, yep makes sense now
Reason for absolute positioning is to allow (at least in the future if i wanted) different positioning of the menu items as per http://www.webdesignerwall.com/tutorials/advanced-css-menu/ (staggered menu items at different heights)… if i had floated the child items is it still possible to stagger them in this manner?
If i have defned the width of each link item, and wish to replace the text anyways with an image, is the way i have done it bad or likely to cause issues?
If you are able to advise on resetting the inherited styles that would also be great, or is it related to the same issue above? In particular the “title - with linkLink 2”, “Link 2-1” and “Link 2-2” items dont show properly or at least remain inheriting styles of the default ‘Li a’ items.
Hope not too snowy in Hamshire, my parents are snowed-in in Sussex, good job im here where its 20 degrees at the moment!
If you design with widths then it should be fine. Just remember that absolute elements are removed from the flow so you will just need to make sure other content is out of the way.
If you are able to advise on resetting the inherited styles that would also be great, or is it related to the same issue above? In particular the “title - with linkLink 2”, “Link 2-1” and “Link 2-2” items dont show properly or at least remain inheriting styles of the default ‘Li a’ items.
With nested lists it’s just a matter of over-riding what was set on the parent. I’d need to know what styles you want on the nested list as when I looked last time each of the sublists was styled differently and I wasn’t sure what you wanted exactly.
There is nothing difficult about it but you just need to keep track of what was set and then over-ride it with similar weight.
e.g.
ul li a{float:left:width:100px;background:red}
ul li li a{float:none;width:auto;background:#fff}
ul li li li a{float:right;width:200px;background:blue}
etc…
The same would apply to the nested “li” elements also.
You need to over-ride them with equal or greater weight.
It’s just the normal rules of the cascade and the most difficult part is just to remember what you set. You can always use firebug to see what styles are applied if you can’t see where you are going wrong.
I’m offline for a couple of hours now but if you are still struggling then post again and I (or someone else) will have a more detailed look later.
Off Topic:
Hope not too snowy in Hamshire, my parents are snowed-in in Sussex, good job im here where its 20 degrees at the moment!
Many thanks,
Chris
Yes we’re on the West Sussex Hampshire border and our village has been virtually cut off since Tuesday. The main road out is still blocked and the other roads are only passable if you have a good 4x4. My little Peugeot 206 is under 16 inches of snow and can’t even get out of the driveway.
We also lost power for 24 hours which was very uncomfortable. More snow forecast for tonight as well.
Everything looks beautiful but its a real pain as its a 4 mile walk to the nearest shop. The dog’s happy though
Cheers, yep i found that width after using firebug. In the end i went back to the original and stayed with floating of the parent elements. It got around strange styling and positioning issues i couldnt figure out. Final code is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Mega Menu Example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// If no JS CSS menu will still work
$("#menu").removeClass("cssonly");
// Find subnav menus and slide them down
$("#menu li a").hover(function(){
$(this).parent().find("ul.subnav").slideDown(100);
$(this).parent().hover(function() {
}, function() {
// On hovering out slide subnav menus back up
$(this).parent().find("ul.subnav").slideUp(100);
})
});
});
</script>
<style media="screen" type="text/css">
/* BASIC PAGE STYLES */
* { margin: 0; padding: 0; }
body {
background-color:#666;
font: 14px Arial, Helvetica, sans-serif;
}
p { margin: 15px 0; color: #333; font-size: 13px; line-height: 18px; }
h1 { margin: 15px 0; font-size: 16px; }
/* Style the menu and position list items */
ul.mainMenu {
position: relative;
height: 35px;
padding: 0 8px;
background: #fff url(images/menubg.png) repeat-x;
clear: both;
}
ul.mainMenu li { float: left; list-style: none; position: relative;}
ul.mainMenu li ul.subnav li { float: none; list-style: none;}
ul.mainMenu li ul.subnav li.imageLink { float: none; list-style: none;}
ul.mainMenu li ul.subnav li.imageLink li { float: left; list-style: none;}
/* Style and position links and images in second level list items */
ul.mainMenu li a {
display: block;
height: 19px;
padding: 8px 12px;
text-decoration: none;
color: #666;
}
ul.mainMenu li a:hover {
color: #222;
background: url(images/menubg-hover.png) repeat-x;
}
/* When hovering over main list items, show second level lists */
/* This is only for #menu1 */
ul.cssonly li:hover ul { display: block; }
/* Position and style second level lists and items */
ul.mainMenu ul {
position: absolute;
top: 35px;
padding-top: 5px;
/* background: #fdfdfd url(images/shadow.png) repeat-x;*/
background-color:#E8E8E8;
display: none; /* Hide until parent list item is hovered on */
}
ul.mainMenu ul li { padding: 8px; /*border-right: dashed 1px #f4f4f4;*/ }
ul.mainMenu ul li:last-child { border: 0; }
ul.mainMenu ul li.title, ul.mainMenu ul li.title a {
margin: 0;
padding: 0;
height: 100%;
border: none;
text-align: left;
float: none; /* Remove parent float setting */
/*padding: 6px 10px;*/
border: 0; /* Remove parent border setting */
border-bottom: solid 1px #096;
font-size: 11px;
font-weight: bold;
}
ul.mainMenu ul li.title div
{
border: 1px solid black;
}
ul.mainMenu ul li.title a {
padding: 0;
border: none;
padding: 10px;
}
ul.mainMenu ul img { height: 64px; width: 64px; }
ul.mainMenu ul span { display: block; }
ul.mainMenu ul li.imageLink a {
height: 80px;
text-align: center;
font-size: 12px;
font-weight: bold;
border: solid 1px #ebebeb;
background: #fff;
}
ul.mainMenu ul a:hover { background: #f4f7fa; }
ul.mainMenu ul a img { opacity: .7; border: 0; }
ul.mainMenu ul a:hover img { opacity: 1; }
a#link1 + ul
{
width: 500px;
}
a#link2 + ul
{
/*width: 250px;*/
}
a#link3 + ul
{
left: -50px;
width: 225px;
}
ul.mainMenu li ul.subnav li.imageLink ul, ul.mainMenu li ul.subnav li.listLink ul
{
display: block;
position: relative; /*override inherited from parent*/
background: none;
top:0;
padding:0;
margin:0;
}
ul.mainMenu li ul.subnav li.listLink ul a
{
margin: 0;
padding: 0;
color: green;
}
/* list of links */
ul.mainMenu ul li.listLink
{
margin: 0;
padding: 0;
height: 100%;
border: none;
text-align: left;
float: none; /* Remove parent float setting */
padding: 6px 10px;
border: 0; /* Remove parent border setting */
font-size: 11px;
font-weight: bold;
color: #F00;
}
ul.mainMenu li ul.subnav li.listLink ul li.title
{
display: block;
border: none;
padding-bottom: 8px;
}
ul.mainMenu li ul.subnav li.listLink ul li.title:after { content: ""; }
ul.mainMenu li ul.subnav li.listLink ul li { padding:0; margin:0; display: inline; color: brown; }
ul.mainMenu li ul.subnav li.listLink ul li:after { content: ","; }
ul.mainMenu li ul.subnav li.listLink li:last-child:after { content: ""; }
ul.mainMenu li ul.subnav li.listLink ul li a { margin: 0; padding: 0; display: inline; border-bottom: dotted 1px #003;}
ul.mainMenu li ul.subnav li.listLink ul li.title a
{
border-bottom: none;
font-weight: bold;
font-size: larger;
}
ul.mainMenu ul li.listLink
{
background-color: #CCC;
border-bottom: 1px solid green;
}
ul.mainMenu ul h1 { float: none; list-style: none; position: relative;}
ul.mainMenu ul ul a
{
margin: 0;
padding: 0;
height: 100%;
border: none;
text-align: left;
float: none; /* Remove parent float setting */
padding: 6px 10px;
border: 0; /* Remove parent border setting */
font-size: 11px;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="mainMenu cssonly" id="menu">
<li><a id="link1" href="#">Link 1 »</a>
<ul class="subnav">
<li class="title">This is the Link 1 title</li>
<li class="title"><a href="#">This is the Link 1 title</a></li>
<li class="title"><a href="#">This is the Link 2 title</a></li>
<li class="title"><a href="#">This is the Link 3 title</a></li>
<li class="imageLink">
<ul>
<li><a href="#"><img src="images/icons/firefox-bag.png" alt="Firefox Bag" /><span>Link 1a</span></a></li>
<li><a href="#"><img src="images/icons/fixit-bag.png" alt="Fix It Bag" /><span>Link 1b</span></a></li>
<li><a href="#"><img src="images/icons/globe.png" alt="Globe & Bag" /><span>Link 1c</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a id="link2" href="#">Link 2 (Images Only) »</a>
<ul class="subnav">
<li class="imageLink">
<ul>
<li><a href="#"><img src="images/icons/firefox-bag.png" alt="Firefox Bag" /><span>Link 2a</span></a></li>
<li><a href="#"><img src="images/icons/fixit-bag.png" alt="Fix It Bag" /><span>Link 2b</span></a></li>
<li><a href="#"><img src="images/icons/globe.png" alt="Globe & Bag" /><span>Link 2c</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a id="link3" href="#">Link 3 »</a>
<ul class="subnav">
<li class="title">This is the Link 3 title</li>
<li class="listLink">
<ul>
<li class="title"><a href="#">This is the listLink title</a></li>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
<li class="imageLink">
<ul>
<li><a href="#"><img src="images/icons/firefox-bag.png" alt="Firefox Bag" /><span>Link 3a</span></a></li>
<li><a href="#"><img src="images/icons/fixit-bag.png" alt="Fix It Bag" /><span>Link 3b</span></a></li>
<li><a href="#"><img src="images/icons/globe.png" alt="Globe & Bag" /><span>Link 3c</span></a></li>
</ul>
</ul>
</li>
<li><a id="link4" href="#">Link 4 (Plain Link, no dropdown)</a></li>
</ul>
</body>
</html>
I wanted to modify the original code to give a mega-menu capability, can also be used as a standard drop down list also. Thanks for the help, if you have any comments as to howto make life easier would be appreciated… as you can see on a lot of the cascade selectors i was very specific! Not sure if needs to be that specific.
Hi again, just now I applied the background-image property to the LIs. For the most part it works, except for the floated image elements. I am stabbing in the dark here but is this because the float is not cleared after the list?
Hi, I haven’t looked at the code but from the looks of things, whatever the direct parent of the “floated image elements are” give that overflow:hidden;
For the most part it works, except for the floated image elements. I am stabbing in the dark here but is this because the float is not cleared after the list?
Ye you need to clear any floats before the closing tag of the parent assuming the parent is not floated (because floated parents always contain their floated children anyway.
That’s the reason in these lists it’s best to float them.
You would need a clearing mechanism (see faq on floats). You could possibly use overflow:hidden as a clearer depending on your structure.
ul.mainMenu li ul.subnav li.imageLink {overflow:hidden}
Many thanks!!
