Я хочу, чтобы мой навигационный бар в моем заголовке рядом с моим логотипом

Я сделал сайт для школьного проекта и хочу улучшить дизайн еще немного. Я думаю, что логотип делает заголовок немного большим. Поэтому я хочу переместить мой навигатор из-под заголовка внутри заголовка, чтобы он выглядел меньше. Это все. Я отправлю код и фотографии внизу.Я хочу, чтобы мой навигационный бар в моем заголовке рядом с моим логотипом

Вот как это выглядит сейчас

Как я хочу, чтобы это было

/* ----------------------- 
 
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 се. –

И ваш фрагмент отличается от изображений, которые вы предоставили –

Поместите контейнер изображения и Navbar в том же контейнере:

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

Дайте позицию заголовка относителен и позиции навигационную панель, используя абсолютное позиционирование:

.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 
}

Вы должны установить высоту nav-bar, чтобы убедиться, что он центрирован по вертикали

источник

2016-11-24 09:20:17

Я хочу, чтобы мой навигационный бар в моем заголовке рядом с моим логотипом

ответ

Смежные вопросы