CSS Problem link(a) attribute controlling text color [closed]
I have a problem with my CSS. Here it is:
The CSS for Div main:
.main {background: #E6E6E6; padding: 2em; heigh:100%;}
The CSS for links:
a { color: #8D0D19; }
The HTML for main:
<div class="main">
<h3>Welcome</h3><br /> ...More Content Here....
<h3><a href="new.php">New</a></h3>
The color for the link is burgundy. When a link is present on the page, the whole text on the page becomes burgundy.
I also added color attribute to .main but it didn't work. Also I tried making a, .main a but that also didn't work.
So what should i do to keep my text black and only the links burgundy?
BTW I dont know CSS very well. If you can reccomend me some website, training or book for beginning CSS, that would be great.
Thanks.
Update: Heres the whole CSS code:
* { margin: 0; }
html { height: 100%; width: 100%; }
body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #E6E6E6; font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -42px; }
.header { height: 70px; text-align: left; background: #1A446C; colo开发者_C百科r: #D4E6F4; }
.header h1 { padding: 1em; margin: 0;} .header a {position: absolute; right:0; top: 0px; text-align: right; padding: 1.25em; margin: 0; color: >#D4E6F4; text-decoration:none;}
.main {color: #000000; background: #E6E6E6; padding: 2em; heigh:100%;} .main a {color: #8D0D19;}
.footer { height:10px; text-align: center; padding: 7px; background: #1A446C; color: #D4E6F4; position:absolute; bottom:0; right:0; left:0; }
img { border: none; }
table, tr, td, tr { border-collapse: collapse; vertical-align: top; text-align: left; font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
table.bordered tr th, table.bordered tr td { border: 1px solid #000000; }
And Here's the HTML Code:
<html> <head>
<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>
<div class="wrapper">
<div class="header">
<h1>Header</h1><h2><a href="login.php?logout=1">Logout<a/></h2>
</div>
<div class="main"><h3>HTML Text Here....</h3><br /><br /> <h3><a href="new.php" >New</a></h3> </div> </div> <div class="footer">
<p>Copyright © 2011</p>
</div> </body> </html>
Update: Test it here: http://jsfiddle.net/hhgGE/
Update:
The bug was caused by a typo in the .header <a/> closing tag - should have been </a>.
Here is a live link: http://jsfiddle.net/RF9cC/1/
Previous:
Sounds like the color is being inherited from somewhere else or your not closing the </a> tag properly? You could do something like:
.main{
color:#000;
}
.main a:link{
color:#8D0D19;
}
That should style all the text in the DIV .main as black but any link as the burgundy.
A good (and in-depth) reference to building websites is this e-book by Robert Schifreen: http://www.the-web-book.com/browse/index.html
It has detailed information on pretty much all there is to know regarding web design.
From what little you've posted, I cant see anything that could be wrong with the css. I'd double check the html to make sure you're properly closing your tags.
EDIT : looking at your update, there's a closing a tag in there that looks like <a/> (line 5, the logout link). it should be </a>. This fixes the problem.
As for learning CSS, I can't go past W3 Schools. Basically tells you everything every CSS element does, what attributes they have, what browsers it works with, etc. And some nice tutorials, too.
加载中,请稍侯......
精彩评论