mwdowns mwdowns - 3 months ago 5
CSS Question

Scrolling menu will not stay in its <div>

My first question here. Hope this is OK.

I'm trying to redo a webpage I hacked together a long time ago. Right now it's barebones and I'm just trying to get some of the main stuff to work. I have a header, navbar (on the left), a content section (on the right), and a footer. The navbar and content are under and above the the header and footer, respectively. Within the navbar I have some "buttons" that I want to scroll down and up when the page scrolls. It's kinda working except for one thing:

When the buttons scroll to the bottom, they run out of the navbar and into the footer. When scrolling up, it's fine, they do not run into the header. Just when they scroll down. I want to keep these buttons contained within the navbar.

Here's the HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link type="text/css" rel="stylesheet" href="newpage.css"/>
<title>Daruma An Farms</title>
</head>
<body>
<div id="header"></div>
<div id="navBar">
<div class="inner" id="inner1">Home</div>
<div class="inner" id="inner2">About</div>
<div class="inner" id="inner3">Shop</div>
<div class="inner" id="inner4">Contact</div>
<div class="inner" id="inner5">日本語</div>
</div>
<div id="content"><p>Hello. This is the new page</p>
<p>Hopefully this stuff will work</p>
<p>And we can get it up soon!</p>
</div>
<div id="copyright">Copyright</div>
</body>
</html>


Here is the CSS:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}

div {
border-radius: 5px;

}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:259px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}

/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/

#navBar {
height: 700px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 5px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/

.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}

#inner1 {
margin-top: 5px;
}

#inner2 {
margin-top: 75px;
}

#inner3 {
margin-top: 145px;
}

#inner4 {
margin-top: 215px;
}

#inner5 {
margin-top: 285px;
}

/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/

#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}

/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/

#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}


I hope I have that all formatted right and you can see where my problem is. I think it should be something I'm missing within the .inner class s and the #navBar ID .

Thanks for your help.

Answer

You need to adjust the height of the header, see fiddle https://jsfiddle.net/sxh0n7d1/35/

If you want it to be more diverse you will need to use javscript.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: white;
    background: #95954a;
} 

div {
    border-radius: 5px;

}
/* This is the header ID. I would like a static pic to go here,
    centered, and stuck at the top. Right now I just have a block header
    as a place holder. 
*/
#header {
    height:180px;
    width: 100%;
    background-color: #965d4a;
    background: url("images/logo4.jpg") no-repeat center top;
}

/*  This is the navbar, which will contain the navigation buttons.
    I want it to be long enough to contain all the buttons and
    have a bit of empty space on the bottom.
*/

#navBar {
    height: 680px;
    width: 13%;
    background-color: #965d4a;
    position: absolute;
    margin: 5px 0px 0px 130px;
    float: left;
}
/*  This is the CSS for the "buttons" in the nav bar.
    I want them to stay on the page when the user scrolls.
    I have separated the common elements into the .inner class
    and put the unique elements into the IDs.
*/

.inner {
    height: 50px;
    width: 12%;
    position: fixed;
    margin-left: 6px;
    padding-top: 10px;
    text-align: center;
    font-size: 2em; 
    background-color: #5d964a;
}

#inner1 {
    margin-top: 5px;
}

#inner2 {
    margin-top: 75px;
}

#inner3 {
    margin-top: 145px;
}

#inner4 {
    margin-top: 215px;
}

#inner5 {
    margin-top: 285px;
}

/*  This is the content area. Will have the content of the site.
    I would like this to contain all the content with no extra space
    at the bottom for large content areas, such as the about page
    or the shop page. But I don't mind it having some extra space
    at the bottom for the low content pages, like contact.
*/

#content {
    width: 700px;
    height: 680px;
    float: right;
    background-color: #965d4a;
    margin: 5px 130px 5px 0px;
    padding: 10px 10px 10px 10px;
}

/*  This is the copyright section. I want this at the bottom of every
    page. Small type, centered.
*/

#copyright {
    width: 879px;
    height: 50px;
    background-color: #965d4a;
    clear: both;
    font-size: .7em;
    text-align: center;
    margin-left: 130px;
    margin-right: 130px;
}
Comments