сделать панель навигации в заголовке без абсолютной позиции

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

В моем браузере он отображается следующим образом: введите здесь описание изображения

в скрипте JS это выглядит иначе, вот мой код: http://jsfiddle.net/9nspQ/

HTML

<header>
<img src="../assets/images/logo.png" alt="">
<nav>
<ul>
 <li><a href="#">Tours &amp; Prices</a></li>
 <li><a href="#">Standard Flights</a></li>
 <li><a href="#">Meet the Staff</a></li>
 <li><a href="#">Charters</a></li>
</ul>
</nav>
</header>

CSS

header {
height: 100px;
background-color: #001D5D;
}

nav {
right:0;
bottom:0;
padding:10px;
background-color:#1CCEAE;
}

nav ul {
margin-left: 500px;
}

nav li {
display: inline-block;
margin-right: 20px;
}

nav li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

html css nav
person ev9604    schedule 18.04.2014    source источник
comment
мой ответ сработал для вас?   -  person Gadgetster    schedule 18.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Просто к вашему сведению: справа: 0; внизу: 0; не действуют, если не назначена позиция

У вас есть много элементов, для которых я не слишком уверен. Я предполагаю, что у вас есть больше кода, с которым вы имеете дело в своем приложении.

Попробуйте это:

.container {
    width: 960px;
    margin:0 auto;
    background-color: blue;
}
#logo{
    height:100px;
    width:100px;
    z-index:10;
    top:10px;
    position:absolute;
}
header {
    padding-top:50px;
    height: 70px;
    background-color: #001D5D;
}
nav {
    width:960px;
    padding:10px 0 10px;
    text-align:right;
    background-color:#1CCEAE;    
}
nav li {
    display: inline-block;
}
nav li a {
    text-decoration: none;
    font-size: 1em;
    color:white;    
}

ДЕМО

ВОТ КАК Я БЫ ЭТО СДЕЛАЛ:

   #logo{
    height:100px;
    width:100px;
    z-index:10;
    top:15px;
    left:30px;
    position:absolute;
}
header {
    width:100%;
    height: 80px;
    background-color: #001D5D;
}
ul {
    width: 100%;
    height:50px;
    line-height:50px;
    padding:0;
    margin:0;
    text-align:right;
    background-color:#1CCEAE;    
}
ul li {
    display: inline-block;
    padding-right:10px;
}
ul li a {
    text-decoration: none;
    font-size: 1em;
    color:white;    
}

ДЕМО

person Gadgetster    schedule 18.04.2014