Элементы списка (навигации) не будут растягиваться над div, который плавает справа

В настоящее время я пытаюсь заставить горизонтальное меню навигации растягиваться по всему моему контейнеру.

Div, в котором он находится, прекрасно растягивается, но фактические элементы списка - нет, и я не знаю, почему.

CSS для правой панели, контейнера, содержащего панель навигации, и элементы навигации:

#rhs{
position: relative;
float: right;

height: 720px;
width: 200px;

background-color: #3D0099;
border-left:2px solid #616161;
}

nav{
display: block;
position: relative;

width: 1010px;
height: 50px;

margin-left: 7px;

background-color: #F0F0F0;

border-top: 1px solid #616161; 
border-bottom: 1px solid #616161; 

z-index: 99999;
 }

 nav li{
list-style: none;
display: inline;

margin-left: 10px;

z-index: 99999;
}

Полный jsfiddle: http://jsfiddle.net/zDzLs/

Любые идеи?


menu html css z-index nav
person GiANTOnFire    schedule 13.02.2013    source источник
comment
извините, я имел в виду div, который я разместил справа от моего контейнера   -  person GiANTOnFire    schedule 13.02.2013
comment
Можете ли вы описать, что вы собираетесь делать более подробно, я не понимаю, в чем ваша проблема.   -  person dezman    schedule 13.02.2013
comment
Я хотел, чтобы мои пункты меню растягивались прямо по моему контейнеру, но по какой-то причине div, который я переместил с правой стороны, останавливал это — они останавливались, когда доходили до границы правого div. На вопрос теперь дан ответ, но все равно спасибо, и извините за неясность. :)   -  person GiANTOnFire    schedule 13.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Измените css правого div на:

#rhs{

position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
person Mukul Kapoor    schedule 13.02.2013
comment
Я рад, что это помогло :) - person Mukul Kapoor; 13.02.2013

arrow_upward
0
arrow_downward

твой код сводил с ума мое обсессивно-компульсивное расстройство.

Я немного переделал это для вас здесь. Надеюсь, вам понравится.

http://jsfiddle.net/zDzLs/3/

<header>

        <a href="#"><img class="logo" src="images/header.png"/></a>

        <nav>
            <ul>
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">What is Counselling?</a></li>
             <li><a href="#">Personal Counselling</a></li>
             <li><a href="#">Relationship Counselling</a></li>
             <li><a href="#">Supervision of Counsellors</a></li>
             <li><a href="#">Life Coaching</a></li>
             <li><a href="#">Contact Me</a></li>
            </ul>
        </nav>

    </header>

    <div class="container">

        <div class="content-left"><div class="inner">LEFT</div></div>
        <div class="content-right"><div class="inner">RIGHT</div></div>

    </div>


* {
    padding: 0;
    margin: 0;
}

body{
    background-color: #F0F0F0;
    font: 14px Century Gothic;
}

header {
    width: 960px;
    margin: 30px auto;
}

header .logo {
    width: 300px;
}

nav {
    background: #F0F0F0;
    margin-top: 30px;
    overflow: hidden;
}

nav ul li {
    list-style-type: none;
    float: left;
    margin-right: 2px;
    font-size: 12px;
}

nav ul li a {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    background: #333;
    color: #fff;
    text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
    background: #666;
}


.container {
    margin: 30px auto 0;
    width: 960px; /* 958px */
    border:2px solid #616161;
    overflow: hidden;
    background: #fff;
}

.content-left {
    float: left;
    width:628px;
    margin-right: 30px;
}

.content-right {
    float:left;
    width: 300px;
    background: #f9f9f9
}

.inner {
    padding: 20px;
}
person Billy Moat    schedule 13.02.2013
comment
Спасибо! Я как следует посмотрю на это позже и приведу в порядок свой код. Очень признателен! - person GiANTOnFire; 09.05.2013