|
CSS - Extending A Style Rule From A Previously Defined Style?
I 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 Similar TutorialsFor reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g.
Code:
<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt;
font-family:serif; font-weight:normal; color:#000000;
font-size:10pt; text-align:left; font-style:normal;
line-height:12pt; background-color:#FFFFFF;" >text </p>
don't get me started on how rediculous this is). Its stupid, but it works. What I can't figure out is how to apply something like Code: <style type="text/css" media="print">
hr {visibility:hidden}
</style>
to <hr style" ??? "/> any suggestions would be much appreciated -LG 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! 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 ;
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 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? 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;
}
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?) Or can it be within the body tag? What is the standard? TIA 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? hi friends, i have a table with two columns.I have a designed td in stylesheet but it is not take effect.In the normal design view,style is effected but when runtime the changes will not take effect. And also if apply css "class" for td it wont accept instead it accept only property which are given in in style property i.e <td style="bgcolor:blue......"> My CSS is... Code:
.left_column
{
background-color:#d29b28;
width:2000px;
}
.content
{
background-color:#cccccc;
vertical-align:top;
padding-top:10px;
padding-left:10px;
line-height:5pt;
font-family:Tahoma;
}
.caption
{
background-color:Black;
color:White;
}
div.content
{
background-color:Lime;
float:left;
text-align:left;
font-size:20px;
line-height:3px;
font-family: Arial, Helvetica, sans-serif,Tahoma;
}
and my Source Code is...(Which is not take effect) Code:
<td class="left_column">
..............................................
</td>
<td class="content">
<div class="content"><%# Server.HtmlEncode(Eval("question").ToString())%></div>
</td>
If i give the above code <tr> is divided into two <td> with equal width. This code only take effect... Code:
<td width="200" style="background-color:#d29b28;border-style:solid; border-right-color:Black; border-width:1px; min-height:250px;">
...........................
</td>
<td class="content">
<div class="content">
<%#Server.HtmlEncode(Eval("question").ToString())%>
</div>
</td>
what can i do for that...I'm designing in Master Page.. I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS? Can anybody solve the mystery of what's going on on this page?: http://www.j-archive.com/showscores.php?game_id=3346 The "Jeopardy! Round" score table and the "Double Jeopardy! Round" score table should look exactly the same, but on my browsers (Chrome 4 and IE6) the "Double Jeopardy! Round" table has a wider td for the first row. It's as if it's "inherited" the width of the tds that follow it (or perhaps came before it?)... I've checked over the markup and the CSS several times and I can't find any errors that would cause this. What's going on? Thanks-- Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one? 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>
Hey Guys, I'm trying to apply a style to all the TD's within a class of TR's. I am having trouble making the changes apply to the TD not the TR. How can I do it? Thanks! Hi, I am developing a website for a charity. They deal with people with sight problems so changable text size and background colour would be good. I change text size by switching between stylesheets e.g. style-small.css, style-medium.css and style-large.css. The background I switched by code like this: Code: <a href="#" onClick="document.bgColor='#FFEA00'" onFocus="document.bgColor='#FFEA00'" >Yellow</a> But I just realised that everytime you click a new link or refresh the page you are going to have to reselect your preffered background colour. Anyway I can use the above method again without messing up the switching process? Any suggestions? Thanks 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 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 Hai guyz!! I've been workin' on this website template since December and I was just wonderin' if you guyz (the pros) would share your opinion on the design -- pretty peasss! http://i898.photobucket.com/albums/ac183/micha8l/web_page.png k thx, Mike quick question: not sure if this is possible. I want to know if it is possible to create one style with set properties. Then a second style, set it equal to the first one, instead of copying the properties to the second. theoretically: .style1 { prop:1; prop:2; prop:3; } .style2 = .style1 if it can't be done, then let me know, I know how to copy and paste. I was just curious it if was |
|||||||