2011-01-22 2 views
0

어이 녀석들, 나는 헤더에 링크를 추가 할 계획이었고, 그것들을 디자인하는 것이 나에게 약간의 문제를 일으켰다. 나는 트위터와 비슷한 것을 만들려고하는데, 내가 직면하고있는 두 가지 문제가있다. 첫째, 링크 하나의 배경색을 변경하면 링크 주위의 배경색이 변경되지만 링크의 배경을 머리글의 맨 위에서 머리글의 맨 아래로 변경하고 싶습니다. (참조 트위터를 통해 더 잘 이해할 수 있습니다.) 또한 활성화 된 링크의 배경색을 어떻게 바꿀 수 있습니까? 활성이라는 말은 링크가 homepage.php에 링크되고 사용자가 homepage.php에있는 경우 링크의 배경색을 변경하고 싶습니다.헤더 디자인 질문에있는 연결

<div class="littleheader"><div class="logo"><a HREF="index.php"><img class="fleft" src="graphics/little-logo.png" alt="Cliproid" ></a></div> 

<div class="navbuttons"> 
<div class="navigations"> 
<a class="nav">test</a> 
</div> 
<br/><br/> 
</div> 
</div> 

및 스타일 :

a.nav { 
    display: block; 
    float: right; 
    line-height: 120px;  /* just an example, line-height causes vertically aligned */ 
} 

및 취

div.littleheader 
    { 
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aadbba), to(#009933)); 
     background: -moz-linear-gradient(top, #aadbba, #009933); 
     padding: 0.5em; 
     color: white; 
     clear: left; 
     z-index: 1; 
     height: 30px; 
     } 
    .logo 
    { 
     margin-left: 100px; 
     vertical-align: middle; 
     } 
     div.navbuttons{ 
     float: left; 
     text-align: left; 
     margin-left: 50px; 
     } 
.fleft 
{ 
    float: left; 
    } 
.navigations 
{ 
    float: left; 
    vertical-align: middle; 
    margin-left: 10px; 
    } 
a.nav 
{ 
    vertical-align: middle; 
    color: white; 
    } 

답변

1

내 첫번째 생각은 a.nav을 변경하는 것입니다 여기에 내가 지금까지 가지고 올 한 코드는 거기에서.

내비게이션 막대를 오른쪽으로 이동해야하며 나머지는 남겨 둬야합니다. 그러나 이것이 기본 시작입니다.

+0

그건 그렇고, 떠 다니면'display : block'이 이미 내포되어 있습니다. 나는 그것을 명확하게하기 위해 추가했습니다. – jeroen

+0

하지만 이것은 내 문제를 해결하지 못한다. 헤더에 맞는 높이를 가진 a.nav를 들고있는 div를 원한다. 그리고 현재 열려있는 링크의 배경색을 어떻게 바꿀 수 있습니까? –

+0

@Samir Ghobril을 사용하여 활성 페이지를 강조 표시하면 해당 링크에 클래스를 추가 할 수 있습니다. 높이에 관해서 헤더의 높이가 고정 된 경우 링크와 부모 'div' 둘 다 설정할 수 있습니다. 실례가 있습니까? – jeroen

관련 문제