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;
}
그건 그렇고, 떠 다니면'display : block'이 이미 내포되어 있습니다. 나는 그것을 명확하게하기 위해 추가했습니다. – jeroen
하지만 이것은 내 문제를 해결하지 못한다. 헤더에 맞는 높이를 가진 a.nav를 들고있는 div를 원한다. 그리고 현재 열려있는 링크의 배경색을 어떻게 바꿀 수 있습니까? –
@Samir Ghobril을 사용하여 활성 페이지를 강조 표시하면 해당 링크에 클래스를 추가 할 수 있습니다. 높이에 관해서 헤더의 높이가 고정 된 경우 링크와 부모 'div' 둘 다 설정할 수 있습니다. 실례가 있습니까? – jeroen