この写真のようなナビゲーションバーを作りたいです。
バーには 2 色の div があります。しかし、この div のコンテンツは、ページの他のコンテンツと同様にラッパーに含まれている必要がありますが、その方法がわかりません。ナビゲーション バーを修正する必要がありますが、今は重要ではないと思います。
編集: http://jsfiddle.net/2NA8V/ 私の作業コード:
<nav>
<div id="headerLogo">
<h1>
<a href="index.php">
<img src="..." class="headerImage">
</a>
</h1>
<ul>
<li class="mainMenuPoint">Szurkolói Klub</li>
<li class="mainMenuPoint">Tagoknak</li>
<li class="mainMenuPoint">Meccsnaptár</li>
<li class="mainMenuPoint">Történelem</li>
<li class="login">
<a href="admin/admin.php" class="adminlink">Admin terület</a>
<p>Helló <a href="profile.php" class="profileLink">Bergkamp</a>!</p>
<input type="button" name="logout" value="Kilépés" onclick="location.href='logout.php'" class="logout button">
</li>
</ul>
</div>
</nav>
スタイル：
nav {
width: 100%;
margin: 0 0 0 0;
background: #d90000;
background: -moz-linear-gradient(left, #d90000 0%, #b20000 50%, #eee 60%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d90000), color-stop(50%,#b20000), color-stop(60%,#EEE));
background: -webkit-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: -o-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: -ms-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: linear-gradient(to right, #d90000 0%,#b20000 30%, #eee 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d90000', endColorstr='#b20000',GradientType=1 );
}
#headerLogo {
width: 950px;
height: 42px;
text-align:left;
margin: 0 auto;
}
#headerLogo h1 {
float: left;
}
#headerLogo h1 a{
padding-left: 30px;
}
.headerImage {
padding-top: 5px;
padding-left: 5px;
}
nav ul {
height: 42px;
float: right;
margin: 0 auto 0 0;
background-color: #EEE;
width: 757px;
}
nav ul li {
float: left;
margin: 0px 10px;
position: relative;
height: 32px;
padding-top: 12px;
}
.mainMenuPoint {
color: #cb0000;
font-family: 'BebasNeueRegular';
font-size: 120%;
cursor: pointer;
position: relative;
}
nav ul .login {
padding-top: 5px !important;
position: relative;
}
nav ul .login a, nav ul .login input, nav ul .login p {
float: left;
font-size: 80%;
}
nav ul .login a {
font-size: 110%;
padding-top: 7px;
}
nav ul .login p {
font-family: 'BebasNeueRegular';
padding-top: 8px;
margin: 0 15px 0 30px;
font-size: 100%;
color: #CB0000;
}
.profileLink {
float: none !important;
font-family: 'BebasNeueRegular' !important;
padding-top: 8px !important;
margin: 0 3px 0 3px !important;
font-size: 100% !important;
color: #CB0000 !important;
}
nav ul .login .loginForm {
padding-top: 0px;
}
nav ul li:first-child {
margin-left: 20px;
}
nav ul li a {
font-family: 'BebasNeueRegular';
text-transform:uppercase;
color: #CB0000;
font-size: 110%;
}
.logout {
width: 60px;
}
それはうまく機能していますが、私はこの解決策が好きではありません。もっと簡単にできると思います。