|
CSS - Css <a> Inheritance
Here's the page: www.rodenator.com/index2.html
Theoretically, I need all of the links on the entire site (save for the ones in the left hand nav bar (i.e. navlinks) to be similar EXCEPT in the horizontal top and footer bars where I need the <a>'s need to be white. Code:
a {color:blue;}
#navbar a {color:white;}
#footer a {color:white;}
a:hover {color:orange;}
a:active {color:grey;}
The trouble I'm running into is inheritance. I would like to set all a{}, a:hover{}, and a:active{} the same, and then simply change a{} on #navbar and #footer. But when I specify #navbar a{} and #footer a{}, those rules override the a:hover{} and a:active{}. (even if I put those rules higher in the ss) ?!?!?! TIA (and I hope I was clear enough in the explanation) Similar TutorialsHi, Okej I searched on the internet about this, and did not find what I was really searching for. What I found on the net is that the css code set for one div is inherited by the div's inside it. This is not what I mean by this. I come from the Object Oriented programming world, a place where inheritance allows to remove a lot of duplicated code. I was wondering wheather there is something like that in CSS. For example imagine I have a CSS block that just defines the color of the text, is there a way where I can make another block inherit from the previos CSS block? example: Code: .parent {
color: #cc0000;
}
.child {
/* This would extend the parent block. */
}
That means if I have a div and set the class as being child then the text of that class would be #000000. Is this somehow possible in CSS? thanks and regards, sim085 I am wondering if it is possible to use previously defined CSS variables in later css definitions? I currently have a font type css variable called "texto1" that I would like to use in conjuction with an "input" variable that defines positioning and the size of my input types. Is this possible?? Code:
--both of the following need the previously specified font called "texto1"--
input.addRemoveButton {width:75px;}
input.inputBox {width:150px;}
Thanks for any help I have this CSS: .navcontainer li { margin:0; height:26px; } .navcontainer li#2row { height:52px; } Applying to this HTML: <div class="navcontainer"> <ul id="navlist"> <li id="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Printable Menus</a></li> <li><a href="#">Catering</a></li> <li><a href="#">Gift Certificates</a></li> <li><a href="#">Contact</a></li> <li id="2row"><a href="#">Franchise</a></li> </ul> </div> It seems like the id="2row" on the last link should make the second selector overwrite the first and display a different height for it. But for some reason it doesn't. This combination makes the most sense but i've tried moving thigns around and switching classes to ids, etc. to no avail. Any Ideas? P.S. I can get it to work if i use an inline style instead, but that would prohibit me from using a psuedo class i need later. Everything else in this same css file works, so it doesn't seem like it could be a problem with importing the external file or anything. I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system. Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up? I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible. Surely there must be a way to disable inheritance for a block...? I'm trying to override an invisible <hr /> tag that I'm using to stretch my overall container to fit whatever content goes in. It works fine, but I want to also use a visible <hr /> within the content. I've tried giving it it's own class, but no dice. How can I override my container hr so I can see the hr in the content? First, my CSS: Code:
div#container hr {
display: block;
clear: both;
padding: 20px 0 0 0;
visibility: hidden;
}
.show hr {
display: block;
clear: both;
padding: 5px 0 0 0;
}
And now my HTML: Code: <div id="container"> <p>Some text</p> <hr class="show" /> <hr /> </div> this code inherits properly in FF, but not in IE. any workarounds? Code: .red
{
background:red;
}
.yellow
{
background:yellow;
}
.red.yellow
{
background:purple;
}
Code: <table border=1> <tr class="red"><td>red</td></tr> <tr class="yellow"><td>yellow</td></tr> <tr class="red yellow"><td>red yellow</td></tr> </table> I might have asked this before, but I can't remember. I have my base class .baseClass { width: 100% } how can I inherit that into other classes? Like maybe: .childClass#baseClass { height: 200px; } .biggerChild#baseClass { height: 400px; } now all three classes would have a width of 100% If I google this all I get are pages telling me <p> will inherit from <html> Also, I know I could do like this: .childClass, .biggerChild { width: 100%; } but I have a pretty big .css file, and it really bugs me to find the base class and add the derived class to it. Also, my base class can have a short name, and my derived class can have a long name, so this saves me some typing. ^^. Thanks for your time, CJB Look at this page - http://www.pacunionsonoma.com/real-estate-agent.asp See the links under each agent, one for Profile, one for Email. No matter how I try specify a new attribute in the page top, such as color, size, etc. it will not work unless I hard code it into each element. I tried the !important quality but no dice, unless I hard code it into the element it is useless... Hi There - Am having some confusion with CSS inheritance. I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms. I have a large container div with id=forum. Nested inside a table inside that div are more divs. Inside of that I have links inside a div that has class=name. Like this: Code: <div id="forum"> <ul> </ul> <table> <thead> </thead> <tbody> <tr class="odd"> <td class="container" colspan="4"> <div style="margin-left: 0px;"> <div class="name"> </div> <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div> </div> </td> </tr> <tr class="even"> <td class="forum"> <div style="margin-left: 30px;"> <div class="name"> <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a> </div> How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this. Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above. Here's what I was trying to use: Code:
#forum .name a:link, a:visited, a:hover {
color:#F79239;
}
I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this. I have a table that uses style sheets: <table class="Border"> but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this? Thanks! Scott. Please look at this page - http://swansonre.tmhdesign.com In the top right of the header I have this code Code: <table id="call2action" cellpadding="0" cellspacing="0"> <tr><td><a href="" title="">Search MLS Listings</a></td></tr> <tr><td><a href="" title="">FREE Property Evaluation</a></td></tr> <tr><td style="height:51px;"><a href="" title="">Sign Up For Email Property Updates</a></td></tr> </table> Here is my styles for that code Code:
table#call2action{
z-index:10000;
margin:0;
padding:0;
position:absolute;
top:40px;
right:20px;
border-collapse: collapse;
}
table#call2action td{
filter:alpha(opacity=30); /* Internet Explorer */
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer Mozilla and CSS-3 */
border:2px solid #edf7e3;
line-height:1 !important;
margin:-1px 0 0 0;
background-color:#000;
width:148px;
text-align:center;
vertical-align:middle;
height:53px;
}
table#call2action td a{
color:#fff !important;
font-weight:bold;
filter:alpha(opacity=1 !important); /* Internet Explorer */
-moz-opacity:1 !important; /* Mozilla 1.6 and below */
opacity: 1 !important; /* newer Mozilla and CSS-3 */
font-size:12px !important;
padding:0;
margin:0;
}
I tried doing this in a <ul> element but was not able to get the desired size and alignment so I went to a table. I am having two issues. First is that I do not want the text in the <a> element to inherit the opacity from the td element. I want the text to be solid white. Next is there seems to be an issue with the height of the table or cells. I have it so it looks "almost" the same in IE7 and FF but not exactly. Any help sure would be appreciated. Tom Greetings, I'm encountering a challenge I can't seem to figure though... could someone kindly assist? I'm writing a page with the following structu =====HTML==== <div id=#boxClear> <table> <tr> <td>somedata</td> </tr> </table> </div> ====== CSS===== #boxClear { settings } #boxClear table { settings } #boxClear tr.heading { settings } For some reason, the following seem to be true: A) Styling set at the DIV level don't carry down to the TD level. B) Styling set at the table level doesn't carry down to the TD level B) Classes set at the TR level don't work; only settings within the TD actually work. What's up with my structure?? It seems like it should all work? Thanks for your suggestions! --Dave Hi all, wondering if anyone can help. I'm trying to add multiple backgrounds to a table header, but using two separate elements. Below is the code I have Code: <style>
table.blockListing tr.header{
text-align:left;
background-color:#dad2c9;
padding:10px;
background-image:url(images/blockTop.gif);
background-position:top;
background-repeat:repeat-x;
}
table.blockListing tr.header th {
background-color:transparent;
background-image:url(images/blockBottom.gif);
background-repeat:repeat-x;
background-position:bottom;
}
</style>
<table cellpadding="0" cellspacing="0" class="blockListing">
<tr class="header">
<th colspan="2">Tagging<br /><br /><br /></th>
</tr>
<tr>
<td>Meta title</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Description</td>
<td><textarea cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td>Other Text</td>
<td>Test test test test</td>
</tr>
</table>
Now in Firefox I receive the expected result. An image appears at the top of the TR and another images appears at the bottom of the TH. However in IE only the bottom image is shown. The top image is removed. If I remove the styling for the bottom image, then the top appears. Any anyone encountered this? Hi all, I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below. Code: .left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}
Inside this I now want to place another div with a different color background, so i created another class selector: Code: .pdfdownload {
background-color: white;
}
When a div is nested as follows: Code: <div class='left_float_column'> <div class='pdfdownload'>Hello</div> </div> The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before. I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places. I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs. I just don't understand Hi I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? Please look at this page http://www.acemarine.biz/gallery2.asp?subject=16 See the links for Thumbnail Sets under the thumbnails. For the life of me I can not figure out why they are not all on one line. When I border them their width is the width of the containing element. When I set the width to say 10px they still do not appear on the same line. For some reason they are "floating" so to speak. I am using IE7 to look at these 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. So I've got this XHTML: Code: <div class="mainNav"> <ul class="mainNavUL"> <li><a class="empty" href="#"></a> <a href="#">Home</a></li> <li> <a class="unselected" href="#"></a> <a href="#">News</a> <ul class="subNavUL" id="menu_news"> <li><a href="#">Agriculture</a></li> <li><a href="#">Business</a></li> <li><a href="#">Education</a></li> <li><a href="#">Environment</a></li> <li><a href="#">Politics</a></li> <li><a href="#">Special Reports</a></li> <li><a href="#">Transportation</a></li> </ul> </li> </ul> </div> What I'm attempting to do through CSS, is control the styling of the anchor classes 'unselected' and 'selected' through inheritance only. The reason I'm doing this is because I'll have other UL's with different classes, which will have the same structure as above. I've tried everything I can think of, but am clearly hitting a brick wall. Any ideas? I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly. The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use <a> tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children <a> tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them. A simplied example of the problem that I have run into is this: Code:
<!--- CSS --->
.tableinfo {
width: 200px;
padding: 0px;
margin: 0px;
}
.tableinfo .menuitem {
background-color:#666666;
color:#FFFFFF;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem a {
color:#FFFFFF;
text-decoration:none;
}
.tableinfo .menuitem_highlighted {
background-color:#FFFFFF;
color:#666666;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem_highlighted a {
color:#666666;
}
Code:
<!--- HTML --->
<table class="tableinfo">
<tr>
<td class="menuitem_highlighted">
<a href="index.html">Text</a>
<table class="tableinfo">
<tr>
<td class="menuitem">
<a href="index.html">Text</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck. If you need any further informatoin, please let me know. Thanks for your help! Mitchell Killian (II Cor. 12:9) Integrity Design and Coding http://www.integritydc.net "Except a man be born again, he cannot enter into the kingdom of heaven." John 3:3 If I have <div class="menu"> <table> <tr> <td>Home page</td> </tr> and in my style sheet td.menu { color:red; } then too bad for me. I have to put class=menu in every <td> tag. There must be a better way. |
|||||||