Whats wrong with this CSS/HTML code? [duplicate]
Possible Duplicate:
CSS not modifying link properties
What's wrong with this code? When I scroll over the navigation, everything pops up. Additionally, I cant get the color of the text to be white (when I scroll over it, its white but when I back off, it stays black. Also, check the bottom of my page, both columns are messed up…both should be equal width and length and should sit right next to each other. Thanks for your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
body html {
margin:0;
padding:0;
color:#101010;
font-family: helvetica;
}
p {
margin:10px 0 0 20px;
font-size: 13px;
line-height: 1.3em;
padding-bottom: 10px;
}
p a{
text-decoration: none;
color: #4e6f8c;
}
#wrapper {
width:960px;
margin:0 auto;
padding: 0px;
background:#fff;
}
#header {
padding:5px 10px;
background:#fff;
height:518px;
}
#nav {
padding:5px 10px;
background:#fff;
width: 960px;
height: 35px;
position: absolute;
top: 370px;
font-size: 18px;
color: #000;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 5px;
}
#nav li {
display:inline;
margin:0;
padding:0;
width:160px;
float:left;
}
#nav li:hover {
background-color: #24389b;
height: 25px;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:link {
color: #000;
text-decoration: none;
}
#nav a:visited{
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
#nav a:focus {
color: #ffffff;
text-decoration: none;
}
#nav a:active {
color: #ffffff;
text-decoration: none;
}
#topcontent p
{
color: #444444;
}
}
#leftcontent {
float:left;
width:480px;
height: 1%;
background:#fff;
}
h2 {
margin:10px 0 0 20px;
color: #24389b;
font-size: 19px;
padding-bottom: 8px;
}
#rightcontent {
float:right;
width:480px;
background:#fff;
height: 1%;
}
#footer {
clear:both;
padding:5px 10px;
background:#fff;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="pold.png" alt="Pold Logo" /></div>
<div id="nav">
<ul>
<li><a href="Research">Research</a></li>
<li><a href="Research">Publications</a></li>
<li><a href="Research">Software</a></li>
<li><a href="Research">People</a></li>
<li><a href="Research">Volunteer</a></li>
<li><a href="Research">Resources</a></li>
</ul>
</div>
<div id="topcontent">
<p>The interests of our lab are generally centered around the study of learning and memory, decision making, and executive control. Much of our work is focused on basic cognitive and neural mechanism, but we are also heavily involved in translational research not the mechanisms of neuropsychiatric disorders. </p>
</div>
<div id="leftcontent">
<h2>Funded Projects</h2>
<p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH RO1MH0822795)<br />The Cognitive Atlas project aims to develop anontology for cognitive processes through social <br />collaborative knowledge building.</p>
</div>
<div id="rightcontent">
<h2>Center Grants</h2>
<p><a href="url">Consortium for Neuropsychiatric Phenomics</a><br />(funded by NIH, PI: R. Bilder)<br />This Roadmap Interdisciplinary Research Consortium is leveraging the new discipline of phonemics to understand neuropsychiatric disorders at multiple levels, from genes to neural systems to </p>
</div>
<div id="fo开发者_如何学Gooter">
</div>
</div>
</body>
</html>
Everything 'pops up' because you've got a height declaration in the hover attribute but not the original li definition:
#nav li:hover {
background-color: #24389b;
height: 25px;
}
The problem with columns is almost certainly because you've got the left to float left and the right hand one to float right - as far as I can remember, it will probably work best if you set them both to float left (there are lots of tutorials on 2 column liquid CSS designs; you should be able to adapt one to your needs)
I agree with @Joseph for your link colour issue - that's simple to fix.
Little hard to tell what's going on... especially without seeing a demo of some kind, but as far as your hover text problem goes, you have the following:
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
The problem is you are not wanting it to change the text when you hover over the link. you want it to change color when you hover over the li like with your other rule. Therefore, it should be like this:
#nav li:hover a {
color: #ffffff;
text-decoration: none;
}
And Like I said, for the other stuff you should provide some kind of demo we can work with (and it might not be a bad idea making it a whole other question.)
EDIT
After seeing sg3s' comment I went back to see if there's a more compatible way and... there is!
#nav a {
color: white;
text-decoration: none;
display:block;
}
that mostly gets it... it's not perfect though.
加载中,请稍侯......
精彩评论