|
CSS - Help Understand These Css Selectors Pls
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? Similar TutorialsHi 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 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> 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 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? 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. 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 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 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. 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? Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics. Anyway, as such I need to find out a few things I know but don't know if you know what I mean. Where can I find out the official definitions of CSS operators... * html for example..what the * does. class1>class2...what the > does...stuff like that. http://www.tonglebeak.com/test.html Why in the world does IE completely mess up the hover effects on the anchor tag whenever first-letter is being applied to the tag? View the source, save and remove the first-letter section, watch hovering work in IE then, etc.., I don't care, I'd just like to know what hack can be applied to make IE work here. okay, so i was trying to accomplish the same thing as the website www.alistapart.com I wanted the same thing for the links up at the top, i achieved this by looking at this websites CSS file. this was teh relevant CSS code: PHP Code: #menu UL { BORDER-TOP-WIDTH: 0px; CLEAR: left; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px } #menu UL LI { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } #menu UL LI A { PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: x-small; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 118px; COLOR: #c30; LINE-HEIGHT: 2em; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BORDER-RIGHT-STYLE: none; LETTER-SPACING: 1px; HEIGHT: 2em; TEXT-ALIGN: center; TEXT-DECORATION: none; voice-family: inherit; } lol so it accomplishes what im looking for but i don't understand WHY it does this. Any help would be great! thanks. I just started trying to use CSS and I wanted to use a div layout instead of a table layout. The problem I'm having is that the separate divs don't want to sit one on top of the other. They like to have gaps. What do I need to change. I have been looking everywhere. Code:
.color1 {background-color: #411063;}
.color1 a:link {color: #CC9900;}
.color1 a:visited {color: #FFFFFF;}
.color1 a:active {color: #FFFFFF;}
.color1 a:hover {color: #FFFFFF; text-decoration: none;}
.color2 {background-color: #B39FC2;}
.color2 a:link {color: #CC9900;}
.color2 a:visited {color: #FFFFFF;}
.color2 a:active {color: #FFFFFF;}
.color2 a:hover {color: #FFFFFF; text-decoration: none;}
.color3 {background-color: #E6E8EE;}
.color3 a:link {color: #CC9900;}
.color3 a:visited {color: #FFFFFF;}
.color3 a:active {color: #FFFFFF;}
.color3 a:hover {color: #FFFFFF; text-decoration: none;}
body
{
text-align: center;
}
div#document_border
{
margin-right: auto;
margin-left: auto;
padding: 2px;
width: 762px;
background-color: #FFFFFF;
}
Code:
<html>
<head>
<title>Print Shop Template</title>
<link rel="stylesheet" type="text/css" href="print_shop.css"></link>
</head>
<body class="color1">
<div id="document_border">
<div id="title" class="color2">
<h1>McKendree Print Shop</h1>
</div>
<div id="header" class="color1">
<a href="template.html">Links</a>
</div>
<div id="content" class="color3">
<!-- Content Start -->
<p>Template Content</p>
<!-- Content End -->
</div>
<div id="footer" class="color1">
<a href="template.html">Links</a>
</div>
<div id="footer_spacer" class="color2">
<p> </p>
</div>
</div>
</body>
</html>
Hi, I was learning CSS and it didn't quite explain what the second img does. Code:
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
Also on some sites i noticed it would have more than one tag: Code:
div.img img img img img {}
or Code:
div div div div {}
if you could help, thank you HI guys I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu Can someone please help me understand float! I want the layout as shown on the picture. What is wrong in my HTML/CSS code? [img]picture.gif[/img] Code: <body> <div id="container"> <div id="heading">heading</div> <div id="picture"><img src="" /></div> <div id="description">description</div> <div id="b1">b1</div> <div id="b2">b2</div> <div id="b3">b3</div> <div id="foot">foot</div> </div> </body> Code:
div {
border:1px solid silver;
}
#container {
width:300px;
}
#heading {
}
#picture {
float:left;
width:200px;
height:200px;
}
#description {
float:left;
width:100px;
}
#b1 {
float:left;
width:50px;
}
#b2 {
float:left;
width:50px;
}
#b3 {
float:left;
width:50px;
}
#foot {
}
Hi, I'm trying to understand background image use on digg.com. I have Firefox and web developer plugin fired up and looking at the css for the navigation. The link "all" for example has digg[dot]com/img/menu-current.gif image as background, but there's not much positioning in the css... I don't understand how they use this image portions.. Can someone explain? Thanks! |
|||||||