我想讓自己的導航欄位於標題旁邊我的徽標

我爲一個學校項目製作了一個網站，並希望改進設計。我認爲這個標誌使標題有點大。所以我想將我的導航欄從標題下移動到標題內，以使它看起來更小。就這樣。我會在下面發佈代碼和照片。我想讓自己的導航欄位於標題旁邊我的徽標

這是現在的樣子

我怎麼想它是

/* ----------------------- 
 
Layout 
 
------------------------*/ 
 

 
.container { 
 
    max-width: 70em; 
 
    margin: 0 auto; 
 
} 
 
.header { 
 
    font-family: 'Handlee', cursive; 
 
    color: #fff; 
 
    background: #7eabac; 
 
    padding: 0.5em 0em; 
 
} 
 
.header-heading { 
 
    margin: 0; 
 
    max-width: 300px; 
 
    margin-left: 400px; 
 
    max-height: 300px; 
 
} 
 
.nav-bar { 
 
    background: #e9f1f1; 
 
    padding: 0; 
 
} 
 
.content { 
 
    overflow: hidden; 
 
    padding: 1em 1.25em; 
 
    background-color: #fff; 
 
} 
 
.main, 
 
.zijkant { 
 
    margin-bottom: 1em; 
 
} 
 
.footer { 
 
    color: #fff; 
 
    background: #656565; 
 
    padding: 1em 1.25em; 
 
} 
 
/* ----------------------- 
 
Navbar 
 
------------------------*/ 
 

 
.nav { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    margin: 0; 
 
} 
 
.nav a { 
 
    display: block; 
 
    padding: .7em 1.25em; 
 
    color: #black; 
 
    text-decoration: none; 
 
    border-bottom: 1px solid gray; 
 
} 
 
.nav a:link { 
 
    color: black; 
 
} 
 
.nav a:visited { 
 
    color: black; 
 
} 
 
.nav a:focus { 
 
    color: black; 
 
    background-color: white; 
 
} 
 
.nav a:hover { 
 
    color: black; 
 
    background-color: #eededb; 
 
} 
 
.nav a:active { 
 
    color: white; 
 
    background-color: #f4ebe9; 
 
}

<!DOCTYPE html> 
 
<html lang="nl"> 
 

 
<head> 
 
    <link rel="stylesheet" href="etc/css/styles.css"> 
 
</head> 
 
<script type="text/javascript"> 
 
    function zoom() { 
 
    document.body.style.zoom = "-20%" 
 
    } 
 
</script> 
 

 
<body onload="zoom()"> 
 
    <div class="header"> 
 
    <div class="container"> 
 
     <img src="etc/img/logo-wec.png" class="header-heading"></img> 
 
    </div> 
 
    </div> 
 
    <div class="nav-bar"> 
 
    <div class="container"> 
 
     <ul class="nav"> 
 
     <li><a class="active" href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="nieuws.html">Nieuws</a> 
 
     </li> 
 
     <li><a href="producten.html">Producten</a> 
 
     </li> 
 
     <li><a href="bestellen.html">ROC</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-24 Chrissthekid

從UX角度來看，我不會建議這樣做，因爲將它移動到右側會導致難以在glan中找到並訪問它CE。 –

而你的片段與你提供的圖片不同 –

把圖像容器和導航欄在同一容器：

.header { 
    font-family: 'Handlee', cursive; 
    color: #fff; 
    background: #7eabac; 
    padding: 0.5em 0em; 
    position: relative; 
} 
.nav-bar{ 
position: absolute; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto; 
height: 50px;//adjust to center vertically 
width: 300px;//adjust to your liking 
}

你必須高度設置爲：

<div class="header"> 
    <div class="container"> 
     <img src="etc/img/logo-wec.png" class="header-heading"></img> 
    </div> 
<div class="nav-bar"> 
    <div class="container"> 
     <ul class="nav"> 
     <li><a class="active" href="index.html">Home</a> 
     </li> 
     <li><a href="nieuws.html">Nieuws</a> 
     </li> 
     <li><a href="producten.html">Producten</a> 
     </li> 
     <li><a href="bestellen.html">ROC</a> 
     </li> 
     <li><a href="contact.html">Contact</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
    </div>

使用絕對定位給頭部位置相對，位置導航欄導航欄爲了確保它是垂直居中

來源

2016-11-24 09:20:17

我想讓自己的導航欄位於標題旁邊我的徽標

回答

相關問題