|
CSS - Avoiding Repetions In Defining Css Classes
Hi to all, & this is my question:
say I have a css class such as: .classA1 { color: RED; font-weight: bold; font-size: 11px } Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example: .classA2 = { color: GREEN; rest same as A1 } .classA3 = { color: BLUE; rest same as A1 } .classA4 = { color: YELLOW; rest same as A1 } How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this... Thanks a lot for your help, Luca Similar Tutorialshi.. i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... Hey everyone, I'm working on developing a small CMS, as a project to help push myself into actually completing something and would jsut love some insight into how to clean up some of my CSS. At the moment im not satisfied how im formating the CSS stylesheet. For example Im working with nested divs, in this case for one component of the site, and I find I'm repeating certain perameters that could be avoided, but I'm unsure how to do that. Example Code: PHP Code: echo '<div id="article">'; echo '<div id="article_header">'; echo $row['news_title']; echo '</div>'; echo '<div id="article_content">'; echo $row['news_content']; echo '</div>'; echo '<div id="article_footer">'; echo 'Add Comment'; echo '</div>'; echo '</div>'; CSS: Code:
#article {
margin-bottom: 8px;
border: 1px #1D1D1D solid;
padding: 5px 5px 5px 5px;
background-color: #4C4C4C;
}
#article_header {
padding: 5px 5px 5px 5px;
background-color: #1D1D1D;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_content {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_footer {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
}
To summarize my question, is there a better way of formating my CSS and how would I do so? I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. Is it possible to define the size of a DIV, by distance to the edges? Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help very simple. this may sound strange, but i figured css would be the easiest solution. i simply have one of 2 characters that will display in each TD of a table. either Y or N. is there anyway to specify the color of the background, or TD, depending on the character within? if its Y, make it red, and if its N, make it blue. that all. any ideas??? Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content. Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD I have some CSS for forms as seen below. (depreciated version) Code:
<div class="item">
<div class="text">Your Name:</div>
<div class="field"><input type="text" /></div>
</div>
...
form .text {
float: left;
width: 75px;
}
form .field {
float: left;
}
Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use? how do you define the the color of a hyperlink before it has been clicked and after it has been clicked? Thanks. i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added. Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) Hello. I'm trying to avoid using the <div style="clear:both"> fix for keeping elements from floating outside of their containers in IE7. Here's the code that's working with that fix. I'd like to have a way to adjust the CSS so I can take that out. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/.css" rel="stylesheet" type="text/css" /> <title>A Beautiful Smile</title> </head> <body> <div id="wrapper"> <div id="banner"> <ul id="navigation"> <li><a href="">Home</a></li> <li><a href="">Help</a></li> <li><a href="">Contacts</a></li> </ul> <img id="logo" src="images/global/logo.jpg" alt="Company Logo" /> <div style="clear:both"></div><!--Prevents img changesmile.jpg from going outside banner in IE7 --> <img id="changesmile" src="images/global/changesmile.jpg" alt="Learn how we can change your smile." /> </div> <div id="footer"> </div> </div> </body> </html> CSS Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* End CSS Reset, Begin Styling */
#wrapper{
margin: 10px auto;
width: 735px;}
#banner{
width: 100%;
height: 279px;
margin: 0px auto;
background: URL('../images/global/banner.jpg') no-repeat;}
#navigation{
width: 200px;
margin: 50px 0px 0px 330px;
float: left;
}
#navigation li{
display: inline;
list-style-type: none;
float: left;
margin-left: 20px;}
#navigation li a{
color: #CCCCCC;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: .70em;
text-decoration: none;}
#navigation li a:hover{text-decoration: underline;}
#logo{
display: block;
width: 180px;
height: 82px;
float: right;
margin: 0px;
}
#changesmile{
display: block;
width: 228px;
height: 75px;
float: right;
clear: both;
margin: 100px 60px 0px 0px;
}
I appreciate your help! Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg main.css .main-header-back { background-repeat: no-repeat; background-position: 793px 0px; overflow: hidden; } index.php .main-header-back { background-image:url('/images/main/image.gif'); } I am very confused how best to define my style sheet for a given goal. Here is what I need to do: I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc). I just don't know how to proceed. It seems that I would do something like Code:
TD.centered {
text-align: center;
}
TD.left{
text-align: left;
}
But then I don't know how to define the link colors. Would I have to do something like Code:
.centered a:link {
color: #000000;
}
Isn't there a way I can create one selector that contains everything without having to have all these separate entries? Any help is vastly appreciated! Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag? thanks, brian www. cooperworkskilns.com/kilns.html Two things: The .section classes (images and borders in the middle) are not stretching the width of the parent <div> in IE. Do I have to specify a width with IE? The margin below the images in the .section classes is greater than what it should be. (noticeable when compared to FF) CSS: #subnav { margin: 15px 0px 0px 10px; padding:0px; } .section { width: 51em; border: solid #999999 1px; padding: 10px; margin: 0 0 10px 0; overflow:hidden; text-align:left; } .section img, img a { float: left; border: solid #999999 1px; margin: 0 10px 0 0; } |
|||||||