|
CSS - Any Way To Style An Element's Parent?
Is there a way to style an element's parent with css?
I know something like .div1 p { stuff here } takes care of p's that are inside div1 but is there a way to style say any div1 with a div2 inside? Or a ul with a ul inside? Similar TutorialsI have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! My css is at CSS. The site is at site The problem I am having is that on the .maintextdiv or the .subtextdiv if I add any left or right margin values IE6 in strict mode is adding that value to the parent element, #rightbox. I should clarify that if I add margin values to just one of them it displays fine, but if I add margin values to both of them then I end up with the problem of extra space added to the parent element. More wierdness, if those (maintextdiv and subtextdiv) are not floated then the problem doesn't show up at all. It's only once they got floated did I have problems. This behavior doesn't show up in FF or Safari. Anyone with any ideas? 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> Hi, Is it possible to change the css properties of a parent element without changing the properties of its childreen? That is, in the following code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ccc</title>
</head>
<body>
<ul>
<li>Hello
<ul>
<li>World</li>
</ul>
</li>
</ul>
</body>
</html>
Is it possible to modify the root UL to have font set to 200% without the child UL also being effected?? Thansk and Regards, Sim085 i have a block that i have the opacity set to .80. within this block i have text. The reason i have the opacity set at .80 is to help increase contrast between the background and text. the heading of the page is within the the block and is inheriting the opacity behaviour. Is there a way to turn this off? like a no-inherit? heres the block: #content { width: 470px; height: 380px; background: #fff; padding: 0px 5px 10px 10px; border: 0px solid yellow; overflow: scroll; float: clear; filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; } page titles a .pagetitles { font-size: .8em; font-weight: bold; font-family: verdana, Georgia, Times, serif; color: #ffcc00; line-height: .4em ; } The goal of the following code is to have a search box with several tabs above it to narrow down the search. The issue is that the design calls for a little upside down triangle to appear below the tab and bleed into the text box. The code works great in Firefox and even in IE6 where the Doctype was switched to HTML 3.2. I'm using 4.01 Transitional and noticing that the arrow doesn't center itself below the tab, rather it centers itself in the entire page. If I take out the width: 100% from .searchbox li.active .downarrow, then both browsers behave the same, although the downarrow now appears in the left bottom corner of the tab rather than the center. Note that I've stripped most of the code away to narrow down the issue. Code:
<style>
.searchbox ul { float: left; padding-left: 10px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.searchbox li { float: left; }
.searchbox li .downarrow { display: none; }
.searchbox li a { display: block; float: left; font-size: 12px; padding: 3px; color: #213327; }
.searchbox li.active { position: relative; }
.searchbox li.active a { color: #fff; border: 1px solid #b3b2b0; background: #266d1e url('/c2footsearchbg.jpg') repeat-x scroll top left; }
.searchbox li.active a:hover { text-decoration: none; }
.searchbox li.active .downarrow { display: block; position: absolute; bottom: -9px; width: 100%; height: 10px; text-align: center; margin: auto; }
.searchbox div { clear: both; display: inline-block; }
.searchbox input.txt { border: 2px solid #999; padding: 5px 0 0 3px; width: 305px; height: 30px; }
.searchbox input.submit { font-weight: bold; font-size: 12px; color: #fff; width: 71px; height: 30px; border: 0; background: transparent url('/c2searchbutton.jpg') no-repeat scroll top left; vertical-align: top; cursor: pointer; }
.searchbox input.submit:hover { background-position: 0 -30px; }
</style>
<div class="searchbox">
<h3>Search</h3>
<ul id="c2FootSearch">
<li class="active"><a href="/index.php">Main</a><div class="downarrow">↓</div></li>
<li><a href="/groups/">Groups</a><div class="downarrow">↓</div></li>
<li><a href="/people/">People</a><div class="downarrow">↓</div></li>
<li><a href="/petitions/">Petitions</a><div class="downarrow">↓</div></li>
<li><a href="/news/">News</a><div class="downarrow">↓</div></li>
<li><a href="http://www.google.com">Google</a><div class="downarrow">↓</div></li>
</ul>
<div>
<form action="/searchall.html" method="post">
<input type="hidden" name="search" value="main" />
<input type="text" name="q" class="txt" />
<input type="submit" value="Search" class="submit" />
</form>
</div>
</div>
Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? Hi guys, I'm changing a simple page from a table style layout to CSS Positioning style. Here's a common line...it's working fine in IE, but not in Firefox (which immediately tells me there's something wrong with my coding). The code is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Overflowing Box</title>
<style type="text/css">
div.row{
padding-top : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
.image{
float : left;
font-weight : bold;
width : 210px;
}
.description{
float : right;
width : 235px;
}
</style>
</head>
<body>
<div style="width: 450px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto">
<div class="row">
<div class="image">An image will go here</div>
<div class="description">
<strong>Heading:</strong> Text <br>
<a href="http://www.somesite.com" target="_blank">http://www.somesite.com</a><br>
<br>
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. <br>
<br>
</div>
</div>
</div>
</body>
</html>
It's a very simple example, but for some reason, the container doesn't "expand" in Firefox as I'd expect. I've hunted around the web, played around and tried some of my other code to no avail. Am I missing the simplest of attributes? Any help would be GREATLY appreciated. Thanks in advance! Hi all! Hope you are well! Anyway, I have the following in my style sheet.... should this work? PHP Code: td { text-align: centre; } or not? Hopefully that is a descriptive enough title. Basically what I'm looking for is a straight-forward guide to which styles will apply to an element type - by html element. For example, suppose I have this brain-dead simple table: <table id="first-table" class="page-table"> ... </table> Is there a simple guide that shows which style elements apply to that table? Something along the lines of the Bare Bones Guide to HTML . The problem I have is that everything I can find is backwards to my needs. They typically list a style element, and then list the html elements which the style will apply to. So for my dumb example above, I'd have to wade through a bunch of interesting looking style elements trying to see whether I can use it to affect that table. TIA can I apply more than one style to an element? Or do they overwrite each other? thanks This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hey AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference. You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me. - Jacenta Here is the page: tri-m.com/index_newlayout.html Here is the css that only corresponds to the middle to make things easier for you to see: Code:
div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px;
height:19px;
padding:0;
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8;
width:540px;
height:76px;
padding:0;
margin:0;
}
Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> |
|||||||