|
CSS - Inheritence
Below I'm trying to format li inks, but the CSS styling assigned to the div class="news" does not affect the <a href> links. Is there a way in CSS to assign the formatting below only the a tags within the div news? What I have formats all the a tags in my html doc. I've tried other approaches without any success. Adding id's or glass names to the a tags would not be ideal, I'm using blogger to publish the links, and do not want to have to add them when hyperlinking in blogger.
Thanks! Sean HTML Code: Original - HTML Code <div class="news"> <a href="http://www.theonion.com/content/node/51146">Critics Accuse Joe Biden Of Running For President For Political Reasons</a> <a href="http://www.theonion.com/content/node/51125">Employees Still Have No Idea What's Going On After Attending Meeting</a> <a href="http://www.theonion.com/content/node/51148">Woman In Coffee Shop Judges A Record 147 People</a> </div> <div class="news"> <a href="http://www.theonion.com/content/node/51146">Critics Accuse Joe Biden Of Running For President For Political Reasons</a> <a href="http://www.theonion.com/content/node/51125">Employees Still Have No Idea What's Going On After Attending Meeting</a> <a href="http://www.theonion.com/content/node/51148">Woman In Coffee Shop Judges A Record 147 People</a> </div> CSS Code: Original - CSS Code .news, a{ font-size:8pt; font-weight: bold; font-family: arial; text-decoration: none; color: rgb(61,82,41); } .news, a:visited{ color: green; } .news, a:hover{ color: green; text-decoration: underline; }
.news, a{
Similar TutorialsTrying to migrate vbulletin software to xhtml 1.1 using CSS and I have run into a bit of a problem. It was my understanding that a class can have the same name as another class but behave differently if the parent classes are different. For example: table.main .bigWrap .color { color: blue; } Would be different than: table.sub .bigWrap .color { color: red; } I assumed that .color's parents dictate it's behaviour so main tables and sub tables will display different colors. Is this indeed the case or am I off base? I am trying to create one main box centered on the screen (#wrapper) which will hold one top box (#topcontent) with it's three boxes floated to the right, and one box for content (#bodycontent) which sits below the top box within the wrapper. I thought nesting the DIV's would set the bodycontent below the topcontent but it does not, and I can't seem to figure out what I am missing. To try to help myself I gave the wrapper a RED border, the top box a BLUE border and the body box a GREEN border. I can't seem to get it to work in both browsers though.... Code: HTML:
<div id="wrapper">
<div id="topcontent">
<div id="green2"></div>
<div id="purple2"></div>
<div id="orange2"></div>
</div>
<div id="bodycontent"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center;
background-color:#454444;
}
#wrapper {
width: 700px;
height: 400px;
margin-left:auto;
margin-right:auto;
margin-top:80px;
border:1px solid red;
padding:2px;
}
#topcontent {
width:100%;
height:25px;
float:right;
margin-bottom: 2px;
border:1px solid blue;
}
#bodycontent {
width:100%;
height:100%;
margin-top:10px;
margin-bottom: 2px;
border:1px solid green;
}
#orange2, #purple2, #green2 {
float:right;
width:20px;
height:20px;
border: 1px solid;
border-color:#403C3C;
font-size:9px;
margin-bottom:2px;
}
#orange2 {
background-color:#DB7809;
}
#purple2 {
background-color:#D20EE9;
}
#green2 {
background-color:#00B009;
}
|
|||||||