|
CSS - Affecting Only First-level (parent) Selectors
Hi everyone,
So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example: Code: <form><!-- really doing this basic just to show the point -->
<fieldset>
<!-- inputs here -->
</fieldset>
<fieldset>
<fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
<!-- input bla -->
</fieldset>
</fieldset>
</form>
So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this. Many thanks Similar Tutorialsi have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? Hi all, could someone please explain to me the difference between ID selectors - #idselector {ksjdfkjd} and class selectors - .classselector {askdjfak} ? I am just becoming more familiar with CSS and I'm not sure when I should use which. Thanks Hello, In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it! Quote: /*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;} .qmmc .qmdividery{float:left;width:0px;} .qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;} .qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;} .qmmc {position:relative;zoom:1;z-index:10000;} .qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;} .qmmc div a, .qmmc ul a, .qmmc ul li {float:none;} .qmsh div a {float:left;} .qmmc div{visibility:hidden;position:absolute;} .qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:10000;} .qmmc .qmcbox a{display:inline;} .qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;} .qmmc li {z-index:10000;} .qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;} .qmmc li a {float:none} .qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code:
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>
HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav {
position: relative;
float:left;
width:940px;
height:35px;
z-index: 9;
background: #fff;
}
#menu, #menu ul {
position: relative;
padding:0;
margin:0;
clear:both;
float:left;
width:455px;
z-index: 9;
}
#menu ul.drop {
background:#520006;
/* padding:10px;*/
width:inherit;
clear:both;
float:left;
margin-top:35px;
z-index: 9;
}
#menu ul.drop li {
width: 130px;
clear:both;
padding: 5px;
z-index: 9;
}
#menu ul.drop li:hover {
background: #c10101;
z-index: 9;
}
#menu ul.drop a {
color:#fff;
font-size:11px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
z-index: 9;
}
#menu a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:130px;
}
#menu li {
float: left;
/*width: 10em;*/
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index: 9;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;}
/*SPRITE BACKGROUP POSITIONING*/
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
float:left;
background:url('images/menu.jpg') no-repeat;
height:35px;
text-indent:-999999px;
}
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}
#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}
#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}
#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}
#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}
#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}
ul {list-style: none;}
I am trying to style the <hr> in the following peice of my page using css selectors. I have used,
Code: td div hr {...}
, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name? Thanks. Code:
<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
<p class="side_menu_white"><br>
<a href="In-The-News.htm" style="color: white">in the news...</a> </p>
<p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
<p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
<p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
<p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
<p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
<hr>
<p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
<br>
</span></span></p>
</div></td>
I'm trying to get my head round these ... A) .search input, .search .commonButton { margin-right: 7px; vertical-align: middle; } I know what the style parts do, but I don't understand what the first two lines are doing. I think the second line is saying to apply the style to all .commonButton classes within a .search class ??? Don't know about the first. -------------------------------------- B) .buttons div { white-space: nowrap; } does this mean the style is applied to any div elements within the .buttons class? I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with: #EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno But that styles the combinedno element... Any ideas? Code: <div id="EditMedHistoryDisplay"> <div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div> </div> </div> I am displaying a Google feed on my site through an asp script that converts RSS to HTML. There is no room for images where the feed is, so we just take them out by setting display: none;. That solves one issue, but then the text is way off. I'm having trouble acessing the text after the picture so I can use absolute positioning and keep it left justified. See http://www.lsuhospitals.org/Hospitals/Bogalusa_Med_Center.htm for an example. Here's the RSS to HTML source tabbed out as best I could. This conversion isn't perfect and still needs some work. What's in red is what I need CSS access to, but only when an image is present. Whew! Code: <html><head><title></title><LINK REL="StyleSheet" HREF="../../StyleSheets/HCSD.css" TYPE="text/css" MEDIA="screen"><style>body{margin: 0px; padding:0px; background-color:white;}</style></head><body>
<table width="140px" class="BodyTextHeading1" cellspacing="0" cellpadding="0">
<tr>
<td>
BMC IN THE NEWS
</td>
</tr>
</table>
<table>
<tr>
<td class="rsscontainer">
<br>
<table border=0 width= valign=top cellpadding=2 cellspacing=7>
<tr>
<td valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/0-0&fd=R&url=http://www.edailynews.info/articles/2007/01/04/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">
Two perish in accidents as 2006 comes to close
</a>
<br>
<font size=-1>
<font color=#6f6f6f>
Bogalusa Daily News, LA -
</font>
<nobr>
Jan 4, 2007
</nobr>
</font>
<br>
<font size=-1>
Bonnett said the incident is still being investigated and oxicology tests are still being conducted. The initial 911 call was made to WPSO and came from the LSU-<b>Bogalusa Medical Center</b> where Johnson had been brought by private vehicle.
</font>
<br>
</table>
</td>
</tr>
<tr>
<td class="rsscontainer"><br>
<table border=0 width= valign=top cellpadding=2 cellspacing=7>
<tr>
<td width=80 align=center valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/1i-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">
<img src=http://news.google.com/news?imgefp=lpU8D0_YzTEJ&imgurl=www.edailynews.info/content/articles/2007/01/02/news/news04.jpg width=79 height=37 alt="" border=1>
</a>
</td>
<td valign=top>
<a href="http://news.google.com/news/url?sa=T&ct=us/1-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">Tim Augustine, Regina Runfalo to reign over MCCA XXVII festivities</a>
<br>
<font size=-1>
<font color=#6f6f6f>
Bogalusa Daily News, LA -
</font> <nobr>Jan 2, 2007
</nobr>
</font>
<br>
<font size=-1>Runfalo, a registered nurse, serves as assistant administrator of LSU <b>Bogalusa Medical Center</b>, where she has been employed 26 years.
</font>
<br>
</table>
</td>
</tr>
</table>
And here are the relavent styles that I created. I have consulted my book "The Web Professional's Handbook" by glasshaus publishing. They have a decent CSS section (selectors on pgs. 96-97), but to no avail. Code:
.rsscontainer {
font-family: Verdana;
color: black;
width: 140px;
background-color: white;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.rsscontainer table tr td font{
font-size: 10px;
line-height: 1.3;
}
.rsscontainer table tr td a img {
display:none;
}
.rsscontainer table tr td a {
font-family: Verdana;
font-size: 10px;
color: #461D7C;
text-decoration: underline;
}
.rsscontainer table tr td a:hover {
font-family: Verdana;
font-size: 10px;
color: #7549B1;
}
.rsscontainer table tr td a:visitied {
font-family: Verdana;
font-size: 10px;
color: #7549B1;
text-decoration: underline;
}
It would be a great idea to have some html type viewer, or FF plugin that would show you the slectors of an html document. Does anyone know of something like this ? I'm trying to learn css and if I could just highlite some text in the html document and it would display the possible selectors for that selection I think it would be a great learning aid. Any ideas ? Hi, I'm building a page that imports two blog feeds from feedburner displaying them in separate divs. I'm a beginner at CSS and could use some help manipulating the styles of these blog feeds separately (which are linked to an external style sheet), but I don't know enough about context dependent css and selectors. I've tried researching a solution but haven't found an answer specific to what I'm doing. I've given the divs their own IDs ("newsblog" and "newcontent"). Here's an example of some of Google's css: div.feedBurnerFeedBlock li a:link { font-size: 20px; font-weight: bold; font-color: #9F0; font-family: Verdana, Geneva, sans-serif; text-decoration: none; list-style-type:none; } I need to take that code and make it specific to one div or the other, instead of applying to both. Any help or advice is greatly appreciated. Thanks, Jeff I am using CSS in the context of an SVG document. In SVG, we use element names like 'rect', 'circle', & 'polyline' rather than 'p', 'table' and 'form' as HTML coders are familiar with. I am trying to apply a generic style to all 'rect' elements, and then modify that style with class styles. The styles: Code:
rect{
fill: black;
stroke: yellow;
pointer-events: none;
.... other SVG styles ....
}
.frame{
fill: black;
stroke: magenta;
--- other SVG styles....
}
In the document, I use a 'rect' element, and apply the class style to it: Code: <rect class="frame" height="5088" id="Rect_37" width="6688" x="-1008" y="-1728" /> As you may notice, there appears to be a contradiction in the styles specified by the two selectors: 'rect' and 'frame'. One would have the element rendered with a magenta outline, while the other would outline with yellow. In practice, the stroke rendering seems to inherit from the 'rect' element style, although this seems counter-intuitive to me (class styles seem to be more specific than element styles). In researching this, I have actually found nothing that clarifies the question. Even the W3C site seems to ignore the case, as far as I can tell. Is this even valid CSS? If yes, what rule dictates how the document will get rendered? I have passed the entire SVG doc through the XML validator, but the CSS validator only accepts HTML & raw CSS. What would be the correct method of applying a global per-element-type style, but modifying it for specific instances of such elements? I am trying to keep the document as small as possible, and reduce the need for redundant style information, as this seems to have a significant impact on performance of the rendering (presently only tested using Mozilla Seamonkey) I'm pretty much of a CSS newbie, so feel free to correct whatever jargonology I've mangled. Pointers to definitive references most welcome. Thanks. --- rod. Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. Here's a handy tip for you ... if like me you split your big stylesheet up into smaller ones, put them into a linked stylesheet and import them, like so: PHP Code: <link rel="stylesheet" type="text/css" href="main.css"> and in the CSS file itself ... PHP Code: @import url(css/file1.css); @import url(css/file2.css); @import url(css/file3.css); @import url(css/file4.css); some of you no doubt will already do this. here's the crux tho. if you also have some miscellaneous CSS which doesn't fit in any of the extra files and are going to include them in the linking [main] file, then you must include them after the import statements. if you don't Mozilla will ignore the imports and the extra files will not be included in the rendering. code should be like this: PHP Code: @import url(css/file1.css); @import url(css/file2.css); @import url(css/file3.css); @import url(css/file4.css); body { direction: rtl !important; } IE get's this correct regardless of the order. A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction. Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. I have the following CSS styles: Code:
#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }
Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this: http://www.toprival.com/temp/css_question.gif With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that? After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address: http://www.positioniseverything.net...example/borders I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he http://what-is-what.com/tests/june2007-leftalign.html How can I have the float not affect the rest of the page? I'm currently going through these tutorials to learn more about floats: http://www.brainjar.com/css/positioning/ http://www.westciv.com/style_master...yout/index.html I'm led to believe that I must use "clear", but I'm not sure where. I have a demo page setup. It renders exactly how I want it in Firefox, in regards to position, same for Chrome. With IE, if the page has a .html extension, it also renders correctly. But when I switch it to the .cfm extension, it shifts over to the left. Correct http://66.201.102.200/design/demo.html Incorrect http://66.201.102.200/design/demo.cfm I've looked around, and I'm just not sure what could be breaking it. Any ideas? Nevermind! I figured it out. With Coldfusion, I didn't have it setup to suppress white space. The application.cfm file had all kinds of white space, and when it was included dumped about 100 lines of white space in the rendered file. Once I cleaned that up, it worked. Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas? <code> /* CSS Document */ body { margin: 0; padding: 0; background-color: #000; color: white; font-family: "Lucida Grande"; font-size: x-small; } table.outer { border:1px solid #fff; width: 178px; } /*.left { float: left; } .right { float: right; }*/ table { clear: right; width: 700px; line-height: 1.4em; border-collapse: collapse; border: 1px solid #000; color: white; background: #000; font-family: "Lucida Grande"; font-size: x-small; }</code> I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own: http://www.ukhomefurniture.co.uk/test/mouseovertest.php However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed: http://www.ukhomefurniture.co.uk/test/indextest.php I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet. I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks! Code: <link rel="stylesheet" type="text/css" href="style.css" /> |
|||||||