How to stop HTML element gettting covered when window resized?

I have a nav bar and a a div on a website right now. The div is slightly covering the nav bar, however when I resize my window it completely covers the nav bar. I would like it to always somewhat cover the nav bar but not completely.

HTML

<body>
    <div id="wrapper">
        <ul>
            <li class="nav"><a href="#">Home</a></li>
            <li class="nav"><a href="#">About Me</a></li>
            <li class="nav"><a href="#">Projects</a></li>
            <li class="nav"><a href="#">Resume</a></li>
            <li class="nav"><a href="#">Contact</a></li>
        </ul>
        <div id="bod">
            <h1 class="title">Home</h1>
        </div>
    </div>
</body>

CSS

#bod {
    height: 100%;
    width: 86%;
    background-color: #F4F3EE;
    position: absolute;
    top: 0px;
right: 0px;
    box-shadow: -1px 0px 10px 1px #999;
    -moz-box-shadow: -1px 0px 10px 1px #999;
    -webkit-box-shadow: -1px 0px 10px 1px #999;}

.nav {
    border: 1px solid #F4F3EE;
    width:20%;
    height:100px;
    color: #F4F3EE;
    margin: 2px 0px 0px 10px;
    text-align: left;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 30px;
    padding: 0px 0px 5px 0px;
    list-style-type: none;
    border-radius: 5px;
    box-shadow: -1px 0px 10px 1px #999;
    -moz-box-shadow: -1px 0px 10px 1px #999;
    -webkit-box-shadow: -1px 0px 10px 1px #999;
    box-shadow: inset 1px 2px 4px #F4F3EE;
    -moz-box-shadow: inset 1px 2px 4px #F4F3EE;
    -webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
    background: #b58aa5;
    background: -moz-linear-gradient(top,  #ad8599 1%, #b58aa5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
    background: -webkit-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: -o-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: -ms-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: linear-gradient(to bottom,  #ad8599 1%,#b58aa5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );

JavaScript

$(document).ready(function() {
    $('.nav').mouseenter(function() {
        $(this).animate({marginLeft: '-=20px'}, 100);
    $(this).addClass('.nav1');
    });
    $('.nav').mouseleave(function() {
        $(this).animate({marginLeft: '+=20px'}, 100);
    });
});

I can't for the life of me figure out what to do make sure the user can still see the nav when the window is resized.

Answers


Set left: 200px; on #bod, that will fix it. Then you can get rid of the width: 86%; which is set on #bod as well. You are absolutely positioning #bod, this means that #bod is taken out of the regular flow and turned into it's own thing. Now you can set top, left, bottom and right to specify the space between the sides of the web page and #bod. If you set bottom: 0px; on #bod you won't need height: 100%; on #bod either.


Need Your Help

SQL select into a variable, resulting in incorrect value of variable

sql sql-server-2008

The problem I am having is a select seeming to use an old value of a variable, BUT ONLY WHEN VALUES DON'T EXIST.