|
CSS - Background Img On Nested Lists - If Parent Is Acticve - No Image On Child - How?
Hi
I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> Similar Tutorialshttp://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised. The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he I can't post an image of the menu as it won't let me, being a new poster, which is a pain... Code: #horiz-menu a:hover {
display: block;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
margin-bottom:-3px;
}
To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding. However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over. I've achieved this with: Code: #horiz-menu li.parent.active a {
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
}
The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left... I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too. I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do? If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it. Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated. http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? I have like this psudo-code: Code: <div id=parent position: absolute> <div id=child1 position: relative> </div> <div id=child2 position: absolute> </div> </div> As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code: Code: <div style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px"> <div style="border: solid green; position: relative; width: 150px"> <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. </div> <div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;"> </div> <div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;"> </div> </div> I also have a test page here This pretty much does what I would expect(or what I want) in FF, but not IE or Opera. I would like this to be dynamic and not use any javascript. Does anyone have any suggestions? Thanks for your time, CJB I have elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have ul.parent ul { top: <bottom of parent> } How do I refre to it? I'm looking to use lists to create 2 columns of info: Info 1 Info A Info 2 Info B Presumably I would do this like (excuse the inline style): Code:
<ul style="display:inline">
<li style="display:inline">
<ul style="display:inline">
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li style="display:inline">
<ul style="display:inline">
<li>Info A</li>
<li>Info B</li>
</ul>
</li>
</ul>
This outputs: Info 1 Info 2 Info A Info B I'm also looking to do a mix of images and text in a list, but have alignment issues. Code: <ul style="display:inline;list-style:none"> <li style="display:inline">Some</li> <li style="display:inline">random</li> <li style="display:inline">words</li> <li style="display:inline">with</li> <li style="display:inline">an</li> <li style="display:inline"><img src="mypic.jpg"></li> <li style="display:inline">mixed</li> <li style="display:inline">in</li> </ul> Is this bad practice? Should I just make a table, or a seperate div to contain the images and text apart from each other? Tia! PS. Hi Kravvitz :P OK i have a nested list: PHP Code: <div id="sideMenu"> <ul> <li><a href="">Menswear</a> <ul> <li><a href="">Shalwar</a></li> <li><a href="">Shalwar2</a></li> </ul> </li> <li><a href="">Womenswear</a></li> <li><a href="">Jewelry</a></li> </ul> </div> i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis? http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"? Hello all. I want to hide everything in a div with a particular id except for a specific tag. In other words, I want to be able to do the following: Code:
<style type="text/css">
#outer { display: none; }
#outer p { display: block; }
</style>
<div id="outer">
<p>This is text. </p>
<h1>This is more text. </h1>
</div>
Where "This is text. " would appear but "This is more text. " would not appear? Is this possible? I understand the inheritance that #outer p is getting the display: none property from the parent but does not mean I cannot override it? Please look at this page - http://www.soarminden.com/glider-soaring-gallery.asp I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s) innerLeftColumn or LeftColumn Code: <div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4> </div> </div> A minimal example is easier than trying to describe the problem: analogdawn.com/test/overlap.html I understand what the problem is, the children are set to fill 100% of the parent, and that doesn't include the padding and border widths. My question is: How can I fix that easily, while still using padding and borders? I need to have a liquid width, so the DIV widths need to stay percentage based. Any help will be appreciated. Here is the code: Code: <html>
<head>
<style>
body {
background-color: grey;
}
#wrap {
width: 75%;
border: 2px solid red;
}
.border {
width: 100%;
border: 2px solid yellow;
padding: 2px;
background-color: orange;
}
.text {
color: white;
width: 100%;
border: 2px solid lightgreen;
padding: 2px;
background-color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pellentesque. Curabitur lectus. Etiam pellentesque, nunc et fringilla lacinia, ante velit blandit libero, nec sollicitudin nisl nunc eu dui. Duis eu sapien. Proin justo magna, fermentum quis, scelerisque eu, commodo et, quam. Pellentesque tortor nulla, auctor in, feugiat tempus, tempus vel, eros. Quisque elit. Aliquam quam orci, sagittis a, laoreet sit amet, euismod non, pede. Donec a lacus. Nullam porta, nibh eget sagittis volutpat, sapien nibh porttitor arcu, ut aliquam turpis justo ut erat. Integer ut velit. Mauris scelerisque bibendum sapien. Nulla imperdiet tincidunt urna. Praesent sollicitudin dolor pharetra mauris. In hac habitasse platea dictumst. Vestibulum at sapien nec justo egestas sollicitudin. </div>
</div>
</div>
</body>
</html>
Hello All... I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer. My confusion arise as IE and FF doesn't treat equally (again!) FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF. Here is the code related : CSS Code: Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }
.all2 {
The HTML : Code: <div class="all2"> <div class="leftpanel"> ..... Left Panel Text </div> <div class="mainpanel"> .... Main Body Text </div> </div> The Doc Type is XHTML 1.0 Transitional Many thanks in advanced Is there a way of changing a parent class based on a child class like. ../[class=child]{ } This way i can change a parent class if it has this child Any ideas? Hi guys wonder if i could get a hand, I have a problem with an applet from the bbcnews website - essentially my portal has dynamic content, and sometimes this is pushed against the menu bar. It works fine, until used in IE6/7, when you roll over the parent on the menu bar, the child goes under the applet, again only in IE. I have tried every type of z-index trick going to no avail - is it an issue with the JScript or css, and more to the point is there a fix? Thanks a million for you help in advance, as theres no upload script here and this portal is in a secure location i'll copy the test code below for you to generate an htm with. <--------> CODE <--------> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
z-index:5;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul></td>
<td><!-- BBCi Syndication --><noscript><a href="http://www.bbc.co.uk/news" target="_BBC"><img src="http://newsimg.bbc.co.uk/shared/bsp/hi/services/htmlsyndication/img/synd_js_error_js-inactive.gif" width="165" height="200" border="0" alt="BBCi: Javascript is not available on this browser"/></a></noscript><script src="http://www.bbc.co.uk/syndication/html/jsserver/1096038497229" language="JavaScript" style="z-index:1;" type="text/javascript"></script><!-- /BBCi Syndication --></td>
</tr>
</table>
</body>
</html>
Here's my situation... I have a div, that's a child to a div. I want the child to be behind the parent, but a part of it sticking out from the side and people can click on the child. Because of the cms\framework I'm working with, the div i want to click needs to stay a child of this particular parent. I can get it working in IE, but that's it. Also, the parent div MUST be set to overflow:visible, for other misc reasons. Take a look at the attached image for a visual of what I mean. i have a <div> inside another <div> I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top. But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge. Example of what is happening is he http://www.eionbryant.com/test.html I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down. I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around. cheers Code: <body> <div id="strip"> </div> <div id="wrap"> <div id="boxes"> </div> </div> </body> </html> Code:
body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative; }
#strip {background:#663366; width:100%; height:10px; padding:0; border:0;}
#wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }
#boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}
hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. |
|||||||