recently I have tried to achieve a navigation bar that has two sides, one on the right and one of the left, they are separated (not same div). I have managed to get the two navigation bars to work but my problem is that when the browser window is smaller then the wrapper (1000px) the right side of the navigation bar will not stick to the right side instead it will be somewhere in the center.
My code until now
css
div.wrapper
{
min-width: 1000px;
}
div.menul
{
float: left;
width: 880px;
padding: 15px;
background-color: red;
}
div.menur
{
position: absolute;
right: 0;
z-index: 999;
width: 250px;
padding: 15px;
background-color: yellow;
}
html
<div class="wrapper">
<div class="menul">
menu
</div>
<div class="menur">
menu
</div>
</div>
help would be appreciated, thank you
Simply add position: relative to the #wrapper CSS. This will cause the right menu to be positioned relative to the #wrapper rather than the page itself
[Example]
Related
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I could use some help solving this css problem. Basically, I have 3 sections.
div class="app-container">
<div class="menu">
</div>
<div class="content">
</div>
</div
The menu div, should contain my menu. It should be displayed on the left side with a fixed width. The height should also be 100%.
The content div, should use what's rest of the width available.
This is how my site looks like now.
The problem happens when there it more content to the right, and you have to scroll down to view it. When this happens, my menu does not follow along.
This is how it looks when there are way more content. (you can see to the right that I have scrolled down)
Code
html, body {
}
.app-container {
}
.menu {
height: 100%;
width: 16rem;
top: 0;
left: 0;
background-color: #2D3E50;
color: white;
padding: 1rem;
position: absolute;
}
.content {
padding: 1rem;
padding-left: 17rem;
background-color: white;
height: 100%;
}
As you can see, I have made a padding-left on the content, and filled in the menu in the absolute position.
What should I do so the menu keeps continuing no matter how far you scroll down?
Update
Try using position: relative; to body and position: absolute; to your menu element. Set height of the menu to 100%.
Ok so on my webpage, I have a left navigation, the position if fixed and when i want to add my content on the index page, the content appears behind the navigation and does not start after it.
If I remove the fixed position then it just goes underneath.
Navigation CSS
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
position: fixed;
}
I even tried putting all the content inside a div but no luck.
Content DIV
#padding {
height: auto;
position: absolute;
right: 0;
Screenshots
Just put your content inside a div:
<div id="container">
<div id="nav">
<!-- your navbar markup -->
</div>
<div id="content">
<!-- your content -->
</div>
</div>
with css you can style your elements:
#container {
width: 100%;
}
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
#content {
width: 82%;
float: left;
}
With float: left your two divs appears aside.
NOTE:
If you don't want to put your content inside a div element, so just float your navbar element:
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
...that's all and all following content appears (if possible) on the right side of your navbar.
I would do margin-left:18%; or slightly higher on a container around your content. Then your content container will always be padded where the nav sits and will appear beside it.
I'm trying to create a fixed navigation menu which scrolls down the side of the page.
The page has been structured so that everything stretches the full width of the page and then each div makes the fixed width of its content of 860px. Now I've come to add a fixed navigation and I'm struggling to make the fixed navigation align to the right of this content.
I can't have a page wrapper which sets a fixed page width and then contains everything because The backgrounds stretch the full width of the page.
I've tried to add a fixed div to contain the navigation but this div just ends up intercepting all the clicks as it's above the rest of the content.
There are several sections on the page, so I don't think I can nest the navigation inside the first section.
<div id="navigation">
<ul>
</ul>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
And the CSS:
#navigation {
height: 100%;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
z-index: 999;
}
#navigation ul {
background: blue;
height: 200px;
margin: -50px 0 0;
position: absolute;
top: 50%;
right: 0;
width: 80px;
}
.section {
margin: 0 auto;
position: relative;
padding: 0 0 100px 0;
width: 100%;
}
.section-content {
background-color: #1d1d1d;
background-color: rgba(29, 29, 29, 0.96);
color: #ffffff;
padding: 24px 0;
position: relative;
}
.section-content-panel {
margin: 0 auto;
padding-right: 100px;
position: relative;
width: 860px;
}
JSFiddle.
Could someone help me get this working properly?
EDIT
A sketch to show the effect I'm after.
It's a rough sketch, but blue is the viewport, grey are the sections and red is width of all the content. The sections contain all of the content to the red width, but their backgrounds need to expand full screen. The green is the navigation and I want that to sit fixed in the viewport, with the sections scrolling behind it.
I hope that helps clear it up?
Okay, the sketch is clarifying.
I believe you don't need div#navigation. I deleted the div and gave the menu the id, and changed the CSS to this:
#navigation {
background: blue;
position: fixed;
height: 200px;
width: 100px;
top: 50%;
right: 50%;
margin-top: -100px;
margin-right: -480px;
z-index: 999;
}
Check the updated fiddle.
Note1: changing the height or width also requires changing the margins. So when the height or width is dynamic, it won't be aligned right.
Note 2: when the window resizes, the menu won't keep its place. It will flow over the content, you can't fix that, because the list is on a fixed position calculate on the viewport sizes, and not the contents.
Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David
One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.
One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.
You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.