|
CSS - Adjacent Selectors P+p.. Css Of First P Affecting Second P?
i 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? Similar TutorialsHi 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 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 Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly. The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs. This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium. Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#ffffff;
font: 12px Verdana;
}
.container {
border: 1px solid #000;
padding: 5px;
background-color: #eee;
width: 500px;
}
.button_holder {
float: left;
margin: 1px;
/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}
.top_button_left {
/* background-image: url(../images/top_button_left.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: left;
cursor: pointer;
}
.top_button_right {
/* background-image: url(../images/top_button_right.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */
cursor: pointer;
}
.top_button_mid {
/* background-image: url(../images/top_button_mid.png); */
background-repeat: repeat-x;
background-color: #ccc;
height: 31px;
cursor: pointer;
float: left;
}
.top_button_link {
padding-top: 7px;
padding-left: 13px;
padding-right: 13px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<b>Three buttons, the sides of which float to the right extreme in IE7</b>
<br />
<br />
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="index.html" title="Home">Home</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="other.html" title="Home">Other</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="weather.html" title="Home">Weather</a>
</div>
</div>
</div>
<br style="clear: both;" />
</div>
</body>
</html>
Hey everyone, I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover. PHP Code: <div id="footer" style=""> <div id="foot-left" style=""> <div id="cedia"> <a id="cedia-link" href="http://www.cedia.net/"> <img src="images/cedia.png"> </a> <p id="cedia-info"> Custom<br> Electronic<br> Design &<br> Installation<br> Association </p> </div> <div id="ochba"> <a id="ochba-link" href="http://www.gohba.ca/"> <img src="images/ochba.png"> </a> <p id="ochba-info"> Ottowa-Carleton<br> Home<br> Builders<br> Association </p> </div> </div> <div id="foot-right" style=""> <p>To contact us:</p> <address> Phone: 613-838-4800<br> Fax: 613-838-3800<br> Email: info@moorhousecabling.ca<br> 9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0 </address> </div> </div> Code: css
#footer{
float:left;
clear:both;
width:800px;
overflow:hidden;
height:140px;
}
#foot-left{
float:left;
clear:none;
width:216px;
height:100%;
}
#cedia{
font-size:small;
width:50%;
float:left;
clear:none;
}
#cedia-link:hover + #cedia-info{
display:block;
}
#cedia img{
margin-left:40px;
float:left;
clear:none;
border:0;
}
#cedia-info{
margin:0 0 0 40px;
padding:0;
display:none;
float:left;
clear:both;
}
#ochba{
font-size:small;
width:50%;
float:left;
clear:none;
}
#ochba-link:hover + #ochba-info{
display:block;
}
#ochba img{
margin-right:40px;
float:right;
clear:none;
border:0;
}
#ochba-info{
margin:0;
padding:0;
display:none;
float:left;
clear:both;
}
#foot-right{
float:left;
clear:none;
background-color:#e6232b;
font-size:x-small;
padding:20px 0 0 20px;
height:100%;
width:563px;
color:#ffffff;
font-weight:bold;
}
Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site. Any ideas or help would be greatly appreciated. So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down). <table> <tr> <td background="images/shadow.gif"><img src="images/spacer.gif"></td> <td>My content here<br /><br /><br />etc.</td> <td background="images/shadow_r.gif"><img src="images/spacer.gif"></td> </tr> </table> In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter. Now, this is how I'm seeing DIVs would work. <div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> <div style="float:left">My content here<br /><br /><br />etc.</div> <div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells". Is there a way to use CSS and still do this? Thanks, JBL I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! Hi, So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this: Code:
<div id="menu">
<div class="option">1</div
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks. --Surgery Hi All, A seemingly simple problem which has me pulling my (already thinning) hair out: I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right. I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right. Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it. I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can. It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle. Thanks, all. rjgfx I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. 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 ? 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;
}
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 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'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'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom 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, 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 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. Hi all Code: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh |
|||||||