2011-09-25 6 views
-2

무엇을하려고하든 링크의 색상을 수정할 수 없습니다 (색상 롤오버 효과를 만들려고합니다). 그들은 밑줄 효과가있는 동일한 기본 파란색을 유지합니다. 나는 잘못한 것을 아주 사소한 것으로 알고 있지만 아무도 말해 줄 수 없습니까?CSS가 링크 속성을 수정하지 않습니다.

<!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; 

} 


#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: #faffd8; 
    border-color: #004f7b; 


} 

#nav a { 

    color: #000; 
    text-decoration: none; 
} 


#nav a:link { 
    color: #333333; 
    text-indent: -9999px; 
    text-decoration: none; 


} 

#nav a:hover { 
    color: #000000; 
    text-decoration: none; 



} 

#nav a:visited{ 
    color: #999999; 
    text-decoration: none; 


} 

#nav a:active { 
    color: #000000; 
    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....</p> 
</div> 
<div id="leftcontent"> 
    <h2>Funded Projects</h2> 
     <p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH)<br />The Cognitive Atlas project aims to develop an ontology for cognitive processes through social 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)<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="footer"> 
</div> 
</div> 
</body> 
</html> 

새로운 편집 9월 27일 :

모든. 두 번 게시하는 것에 대해 사과드립니다. 새 소식을 전하고이 글에서 계속하지 않을 생각입니다. 내 게시물 (Sparky672의 링크 참조)에 나와 있듯이 필자는 열과 내비게이션에 문제가있어 원하는 방식을 찾고 있습니다. 데모를 보려면 http://rich2233.host22.com/pold.html 링크를 참조하십시오. 브라우저에서 코드를 가져올 수 있습니다. 귀하의 도움에 감사드립니다

+0

당신이 질문을 편집하여 수정 한 중괄호 '}'를 놓쳤습니다. 당신의 코드에서 또 다른 이슈는 특별 주문에서'A'에 대한 CSS를 만들어야합니다. 건배. –

+2

@ Javad_Amiry,보고 된 문제의 가능한 원인을 제거하는 OP 코드를 편집해서는 안됩니다. 그것은 질문을 렌더링하고 대답은 (당신을 제외하고) 무의미합니다. 나는 그것을 뒤로 굴렸다. – Sparky

답변

7
**#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    float:left;** 


#nav li:hover { 
    background-color: #faffd8; 
    border-color: #004f7b; 


} 

#nav a { 

    color: #000; 
    text-decoration: none; 
} 


#nav a:link { 
    color: #333333; 
    text-indent: -9999px; 
    text-decoration: none; 


} 

#nav a:hover { 
    color: #000000; 
    text-decoration: none; 



} 

#nav a:visited{ 
    color: #999999; 
    text-decoration: none; 


} 

#nav a:active { 
    color: #000000; 
    text-decoration: none; 

} 

**#topcontent p 
{ 
    color: #444444; 

} 


}** 

**이 출연 CSS 스타일 당신은이 블록에 중괄호이 누락 마지막

1

귀하의 CSS는 #nav<div>에 포함 된 링크의 색만 지정하기 때문에 귀하의 도움에 감사드립니다. 페이지의 다른 모든 링크는 기본 색상/스타일이됩니다.

편집 : 당신이 생각에 대해 얘기하고 링크를 정확하게

확실하지. 내비게이션 링크에 대해 이야기하고 있다면, CSS에 틀린 대괄호 }이 있다는 사실을 지적하는 다른 답변을 참조하십시오.

페이지의 다른 링크에 대해 이야기하는 경우 위의 원래 답변을 참조하십시오. 해당 링크에 대한 CSS가 없습니다.

2

에도 첫 번째 CSS 스타일 추가 폐쇄를위한 폐문 확인 :

#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    float:left; 
0

내 생각을 그것은 당신이 당신의 ul을 정확하게 참조하지 않는다는 사실과 관련이 있습니다. 어쨌든 this을보십시오.

<style> 
ul#navlist li{ 
list-style:none; 
} 
ul#navlist li a:link {text-decoration: none} 
ul#navlist li a:visited {text-decoration: none} 
ul#navlist li a:active {text-decoration: none} 
ul#navlist li a:hover 
{ 
color: #cccccc; 
background-color: #003366; 
border: 1px #ffffff inset; 
} 




</style> 

<div id="navcontainer"> 

<ul id="navlist"> 
<li><a href="#">Item one</a></li> 
</ul> 

</div> 

내 레퍼런스와 예제에서 나는 섞여서 으깬다고 생각하며, 이것이 당신이 찾고있는 것이라고 생각합니다. 아, 그리고이 시점까지 알지 못하면 괄호가 엉망이됩니다.

0

귀하의 질문을 수정하여 수정 한 가까운 중괄호 }을 놓쳤습니다. 코드의 또 다른 문제는 A에 대한 CSS를 다음 순서로 작성해야합니다.

a {} 
a:link {} 
a:visited {} 
a:hover {} 
a:focus {} 
a:active {} 

A 스타일을 주문하면 올바르게 작동합니다.

관련 문제