|
CSS - Css Class Inheritence
Trying 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? Similar TutorialsBelow 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{
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;
}
hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class. #nav { padding: 0; clear: both; } body.main #nav, body.blogger #nav { float:right; width: 220px; \width: 250px; w\idth: 220px; margin: 10px 10px 0 0; padding: 0; } body.second #nav { float:left; width: 200px; \width: 210px; w\idth: 200px; padding:0 0 20px; margin: 0; } body.second #nav img { padding-bottom: 10px; } #nav a { color: #006; } body.second #nav ul { list-style: none; padding: 0 0 0 5px; margin: 0; } body.second #nav ul li { margin: 0 0 7px 0; font-size: 11px; } body.second #nav ul li ul li { margin: 0 0 5px 15px; } .skip { display:none; } /* end #nav */ #content p, #nav p { padding: 0; margin-top: 0; margin-bottom: 10px; line-height: 140%; } #content li, #content ol { margin-top: 0; line-height: 140%; } code, pre { font-family:"Courier New", Courier, mono, monospace; } /* definition lists, all that and a bag of chips! */ #content dl { margin:0px; padding:0; } #content dt { font-weight: bold; } #content dd { margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding: 0 5px 0 0; } /* end definition list*/ Any help is appreciated. I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header" and divs also class. thank you in advance When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour? Problem solved. Hi, I have apage where the div only works on the bottom on the page. I am trying to place it also in the center to divide content. Here is the CSS code: Code: .doubleLine{
clear:both;
position:relative;
float:left;
width:1172px;
height:6px;
background-image: url(images/common/double_line.gif);
background-repeat: no-repeat;
margin-left:37px;
margin-right:0px;
margin-top:6px;
margin-bottom:6px;
padding:6px 0px 6px 0px;
}
can anyone tell me why this div with an image won't appear between content? I havetried everything I could think of. thanks Hi all. Code from the php file: PHP Code: <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <p class="browsing">You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives.</p> <?php } ?> Page is at http://www.bartlett-family.net/chri...tt/blog2/?cat=1 You can see on the right where the text is right below the blog search. Why is the text not formatted to the left? CSS code: Code:
.browsing {
text-align: left;
}
Simple enough. I've put in other CSS attributes just to test. Absurd things like font-family: Arial, Helvetica, Sans-Serif; & font-size: 8em; just to see if I was missing something small. Nothing, the class just isn't working. Huh? Chris hi there trying to create a overlapping div but this wouldn't work Code:
#overlapBar {
position:absolute;
width: 250px;
height: 270px;
z-index: 2;
top: 10px;
left: 600px;
}
but with a layer it does work Code: <div id="overlapBar" style="position:absolute; left:600px; top:5px; width:250px; height:270px; z-index:1 "> I like to have all my css in one file, so how can I overlap and position with <div> thnks in advance I am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/ #footer { width:800px; font-size:10px; color:#aaaaaa; } #footer .navigation{ width:800px; background:#aaaaaa; } #footer .navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #footer .navigation li a{ display:block; padding:0 5px; font-size:12px; text-transform:uppercase; color: #FFFFFF; } #footer p { padding:0; margin:0; text-align:center; } Hi all, I am using <tr class="caption"> in order to control the properites of a line in a table. The problem is: this will not work. Nothing that is written in this CSS tag will work my CSS tag: Code: tr.caption {
font-weight: bold;
font-size: 14px;
text-decoration: none;
background-color: #000000;
color: #FFFFFF;
}
any idea why?? I am greateful for any answer! Dekers Hi .. Im still new to all of this (Web and CSS in general) but would like to know if the following is a possiblity... assuming the CSS Below ... div#item{ width: 200px; height:100px; } div#item_image{ width:50px; height:100px; background-image:url(blahblah); } div#item_text{ width: 140px; height:100px; (...other properties) } then when I create an instance of this i use the following HTML <div id = "item"> <div id = "item_image> </div> <div id = "item_text> </div> </div> I know its maybe not the best way to do it .. but im trying to illustrate a point ... each time I create an "item" I am required to redeclare or redefine the child divs ... is there any way I can "embed" (for lack of a better word !) the children so that everytime I create an "item" it automatically creates the "item_image" and "item_text" so basically .. my HTML will just be <div id = "item"></div> and nothing else ?? Thanks for any guidance ... |
|||||||