|
CSS - Style And Css Which One Overwrites Which?
So for an example: if I have this in the html:
Code: <div id="box" style="width:100px;">123</div> and this is the CSS Code: #box{width: 200px;}
What is the outcome? Will it always use the css or always use the style element? Or does it depend? Similar TutorialsI am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I have a very simple question: I have this html code: Code: <div id="text"> <p><a>text</a></p> <p><a class="red">text</a></p> <p><a>text</a></p> </div> And this CSS style: Code: .red { color: red; }
#text a{ color: blue; }
I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side. How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I want to apply this style to a Table TD cell: Code: border-bottom: 1px solid #D2D7DD; It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with? Thanks. notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference: Code:
<html>
<head>
<style>
.boxA { background-color:#CCCCCC; }
.boxB { background-color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text3">
<br><br>
<script>
function makeLight(obj){
obj.className="boxA";
}
function makeDark(obj){
obj.className="boxB";
}
</script>
</body>
</html>
Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? Hi, I'm new to CSS and am trying to design my blog template. For the styles, I have this so far: Code: <style type="text/css">
#navbar-iframe{display: none;height: 0;}
body{background: #FFFFFF; font: 13px arial;color: #999;line-height: 150%;}
.left { width: 460px; text-align:justify; }
.right { width: 180px;font: bold 11px arial;color: #c8c8c8; }
.navigations{
background: #6a6a6a; text-decoration: blur; padding-top: 1px; border-bottom: 3px solid #666 ;float: right; width: 190px; font: 28px arial; color: #aaa; line-height: 200%;text-transform: lowercase; letter-spacing: -2px; }
.navigations :hover{
font: 28px arial; text-decoration: none; padding-top: 1 px; border-bottom: 3px solid #666; float: right; width: 190px; color: #F2EAEA;
background: #777; line-height: 200%;text-transform: lowercase; letter-spacing: -2px;
cursor: crosshair }
.cloud { font: 26px georgia;letter-spacing: 1px;color: #BDA28F }
.icon {border: 20px solid #eee; width:100px; height:100px;}
.h1 { font: 20px times new roman;color: #FD0479; letter-spacing: 0px; line-height:18px;text-transform:uppercase}
.h2 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; text-transform: lowercase;padding:4px;background: url((URL address blocked: See forum rules)); }
.h3 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; font-weight:bold;padding:4px;}
a:link,a:active,a:visited {font: 12px arial; color: #aaa; border-bottom: 1px solid #6a6a6a; text-decoration: none;text-transform: none;letter-spacing: 0px; }
a:hover { color: #8BC4C4; border-bottom: 1px solid #e8e8e8;background: #f2f2f2; text-decoration: none; cursor: crosshair}
b { color: #BE0304;font-weight:bold; }
i { color: #FA727C; }
s { color: #ddd; }
em {font-family: georgia}
blockquote{ color: #999; background: #f5f5f5;padding: 8px; }
</style>
But I can't seem to get the hover navigations to change background colour and text colour. What am I doing wrong? Thanks! I'm having a perplexing problem. Why isn't the Test 2 Cell Red? Shouldn't the Red Table Row override the table color, just as the table data overrides the table row and table? BTW, I'm using IE the display of this code is probally different in different browsers. PHP Code: <style> table.information td { background-color: #EEEEEE; } </style> <Table class="information"><tr><td> <Table style="background-color: #0000AA;"> <tr style="background-color: #AA0000;"> <td style="background-color: #00AA00;">Test</td> <td style="background-color: transparent;">Test 2</td> <td style="background-color: transparent;">Test 3</td> </tr> <tr style="background-color: #AA0000;"> <td style="background-color: transparent;">Rest</td> <td style="background-color: transparent;">Rest 2</td> <td style="background-color: transparent;">Rest 3</td> </tr> <tr> <td>Best</td> <td>Best 2</td> <td>Best 3</td> </tr> </Table> </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 hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles. Code: <style type="text/css">
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;
width: 200px;
display:block;
}
a:visited
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:hover
{
text-decoration:none;
color:#000000;
width: 200px;
background: #A2D389;
display:block;
}
</style>
Any ideas? I know how to use the class etc but i can't get he link part right. Thanks I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> Hi all, I was wondering if anyone could help me create a new bar similar to that on DeviantArt. I've had a shot at it, but mine shifts when you put the mouse over it and I don't know why. There seems to be enough room for it etc. Here's my homepage so you can see what I mean - http://www.ltheobald.co.uk Here's what I have so far... Code:
HTML (cut down version - just one button):
<table height="100%" width="100%" cellspacing="1" cellpadding="0">
<tr height="34px">
<td class="NavHolder">
<div class="NavButton" onmouseover="this.className = 'NavButtonOver';" onmouseout="this.className = 'NavButton';">
<table class="NavButtonTable">
<tr>
<td class="NavButtonPic">
<a href="index.php"><img src="images/home.gif" alt="Home"></a>
</td>
<td class="NavButtonText">
<a href="index.php">Home</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS:
.NavHolder {
padding: 3px;
background-color: #AACCFF;
}
.NavButton {
float: left;
}
.NavButtonOver {
float: left;
background-color: #8CAAD4;
border: 1px solid black;
}
.NavButtonTable {
padding: 0px 5px;
}
.NavButtonPic {
}
.NavButtonText {
vertical-align: middle;
Font-Size: 11px;
}
No idea why NavButtonPic is there. I'll remove that later. Anyway, can anyone see from this why the buttons are shifting? Also if anyone can tell me how to get a rounded rectangle border like on DeviantArt (http://www.DeviantArt.com), I'd like to know. Thanks, Lee Hi, just writing to get peoples oppinions. i have created a template for standardising the way my collegues at work layout their style sheets. any feedback will be welcome; PHP Code: /* ==== General Rules ==== */ body { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } p { } a:link, a:visited { } a:hover { } img { } th { } td { } dt { } li { } /* ==== Layout Rules ==== */ #topBar { } /* ==== Specific Rules ==== */ #topBar h1 { } #topBar h2 { } #topBar h3 { } #topBar h4 { } #topBar h5 { } #topBar h6 { } #topBar p { } #topBar a:link, #topBar a:visited { } #topBar a:hover { } #topBar img { } #topBar th { } #topBar td { } #topBar dt { } #topBar li { } #leftBar { } /* ==== Specific Rules ==== */ #leftBar h1 { } #leftBar h2 { } #leftBar h3 { } #leftBar h4 { } #leftBar h5 { } #leftBar h6 { } #leftBar p { } #leftBar a:link, #leftBar a:visited { } #leftBar a:hover { } #leftBar img { } #leftBar th { } #leftBar td { } #leftBar dt { } #leftBar li { } #rightBar { } /* ==== Specific Rules ==== */ #rightBar h1 { } #rightBar h2 { } #rightBar h3 { } #rightBar h4 { } #rightBar h5 { } #rightBar h6 { } #rightBar p { } #rightBar a:link, #rightBar a:visited { } #rightBar a:hover { } #rightBar img { } #rightBar th { } #rightBar td { } #rightBar dt { } #rightBar li { } #mainContent { } /* ==== Specific Rules ==== */ #mainContent h1 { } #mainContent h2 { } #mainContent h3 { } #mainContent h4 { } #mainContent h5 { } #mainContent h6 { } #mainContent p { } #mainContent a:link, #mainContent a:visited { } #mainContent a:hover { } #mainContent img { } #mainContent th { } #mainContent td { } #mainContent dt { } #mainContent li { } #bottomBar { } /* ==== Specific Rules ==== */ #bottomBar h1 { } #bottomBar h2 { } #bottomBar h3 { } #bottomBar h4 { } #bottomBar h5 { } #bottomBar h6 { } #bottomBar p { } #bottomBar a:link, #bottomBar a:visited { } #bottomBar a:hover { } #bottomBar img { } #bottomBar th { } #bottomBar td { } #bottomBar dt { } #bottomBar li { } #vNav { } /* ==== Specific Rules ==== */ #vNav h1 { } #vNav h2 { } #vNav h3 { } #vNav h4 { } #vNav h5 { } #vNav h6 { } #vNav p { } #vNav a:link, #vNav a:visited { } #vNav a:hover { } #vNav img { } #vNav th { } #vNav td { } #vNav dt { } #vNav li { } #hNav { } /* ==== Specific Rules ==== */ #hNav h1 { } #hNav h2 { } #hNav h3 { } #hNav h4 { } #hNav h5 { } #hNav h6 { } #hNav p { } #hNav a:link, #hNav a:visited { } #hNav a:hover { } #hNav img { } #hNav th { } #hNav td { } #hNav dt { } #hNav li { } /* ==== Custom Rules ==== */ .imgLeft { margin: 2px; float: left; } .imgRight { margin: 2px; float: right; } Could someone please help me work this one out, been at it from last night and still can't figure it out? I have 2 styles, button and tips. I have 5 buttons total and the first 4 are fine as is opening a linked page. I need help to make the last one which uses the tips style to open a mouse-over message to also be displayed with the same button style. Thanks a bunch, the forum won't let me post the text so here is a link to it. lastborns.tripod.com |
|||||||