I have a div that I am using as a "sidepanel" that has a width:100% and position:fixed. this sidepanel houses my navigation. I also have another div that is named "content". it has a width of 600px and I have used to "margin-left:auto, margin-right:auto" to centre it in between the sidepanel and the edge of the page.
But the problem is that it the two divs are overlapping. how do I stop it from overlapping?
I have included the HTML and CSS coding below.
HTML
<body>
<div id="leftpanel">
<div id="nav">
<ul>
<li>home</li>
<li>the future</li>
<li>contact details</li>
</ul>
</div>
</div>
<div id="content">
<div id="header">
<p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
</div>
</div>
</body>`
CSS
#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}
This is how you can stop them from overlapping.
DEMO
#content {
margin-left: 320px;
}
When you use position:fixed;, it means that element does not care about the other elements on the page. It does not care if it's touching them, over them, underneath them. It only cares about it's position relative to the window (ie: the user's screen).
So because your #leftpanel is on the very left side, and has width of 320. Just set a margin-left of the #content to 320px.
Related
The issue is when i added the sidebar of width 230px and add the margin left to body 230px then in this case instead of the body width shrink the content move out of the screen. here is the scenario.
<body style="margin-left:230px;">
<aside style="position:absolute;left:0;width:230px;">content here
</aisde>
<header>
</header>
<section>
</section>
<section>
</section>
</body>
In this case the body content shrink but the content move outside from the body
Hello First you balise didn't close try to correct that first .
Then using margin left is not the best solutions in every case
For example, an alternative to margin-top:20px; margin-left:20px; would be:
<div id="outer">
<div id="inner">
</div>
</div>
<style>
#outer { position:relative; }
#inner { position:absolute; top:20px; left:20px; }
</style>
and why did you use position absolute ? use position:relative
I have an HTML5 page, which has a <header> element containing the <nav> section.
Due to the style and design of the overall header, the nav is absolutely positioned within the header, which is itself relatively positioned.
This works perfectly for anchors <a> for which it was originally intended. However, I now have need to add a drop-down menu and am using this one:
http://webdesignerhut.com/css-dropdown-menu/
and
How to get a drop-down menu to overlay other elements
But the issue with this and any other CSS dropdown menus that I have found is that they require the parent element to be relatively positioned, but I can't mark the parent <nav> as being both relative and absolute. I am also finding similar CSS requirements with my investigation of jQuery alternatives.
Markup:
<html>
<header>
<nav>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
...
</main>
</html>
CSS (simplified, this works for non-dropdown selection)
header {
position: relative;
}
nav {
position: absolute;
}
CSS (required by dropdowns)
nav {
position: relative;
}
nav ul {
position: absolute;
}
So how can I make the nav element act as a position:relative to its children but act as a position:absolute to its parent?
EDIT
Here is a fiddle trying to outline what's going on.
https://jsfiddle.net/8j9z8wak/
It seems the original cause is that the header element (of which nav is a child) has overflow:hidden which helps with resizing on mobile devices and variable screen sizes with floating images on the top left corner of the header image.
I currently on the fiddle have tried to play with overflow-x and overflow-y but this results in scrollbars and not the intended overflow that works with removing overflow:hidden
re (just for your info.) : There are a lot of CSS / HTML parts to the fiddle, the issue is not the bare bones of the navigation but the way it fits with these other parts, so I've kept them in.
I have the nav as a child of header and I need the header to use overflow:hidden, but nav CSS menu works as intended without overflow:hidden.
I have retained media queries as the overflow:hidden is required for smaller screen size handling.
The navigation menu elements have a floating pair of parts that centre the float as found from https://stackoverflow.com/a/21508512/3536236 . This was applied just for today because all dropdown menu systems use floating elements, and they need to be centred.
Add another container element inside the <nav> and then use position: relative on the inner container:
<html>
<header>
<nav>
<div>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
<div>
</nav>
</header>
<main>
...
</main>
</html>
CSS:
header {
position: relative;
}
nav {
position: absolute;
}
nav div {
position: relative;
}
nav div ul {
position: absolute;
}
Check this code to clear the concept.
div{
border:1px solid #f00;
}
.gp{
position:relative;
height:100px;
width:100%;
display:block;
float:left;
overflow:hidden;
}
.p{
position:absolute;
top:30px;
left:5%;
z-index:1;
width:90%;
height:50px;
}
.c{
position:relative;
border:1px solid #0f0;
}
<div class="gp">
Grand Parents
<div class="p">
Parents
<div class="c"> childs </div>
</div>
</div>
This is a problem I had a lot of trouble with: I can't center my divs properly on my webpage. The situation is as follows: the div I'm trying to center is in another div. After a lot of research and hundreds of ways that failed, I managed to center it. However, when I then make the viewport smaller than the div, it suddenly doesn't center anymore and floats to the left. I only have this problem with unordered lists (navigations) in divs.
Here is the code of my webpage (simplified) and on JSBin:
<body>
<div id="container">
<header id="topheader">
...
</header>
<div id="content">
...
<div id="images">
<ul>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
</ul>
</div>
...
</div>
</div>
</body>
The problem is with the images div. There is also a similar thing somewhere else on the page.
My question is: why is it doing this, and how can it be solved?
margin:0 auto; center's the div, not the content....what i mean to say is, that if your div is 60px wide and content is only 30px wide, then the div will align to center but the content will still align to one-side of the div, not in the center, giving a view that div is not centered.....my suggestion is to use text-align property too with margin
see this DEMO and notice the border to understand that the div is centerd....but content is not~
CSS
#content {
width:98%;
margin:0 auto;/*center div*/
border:1px solid #000;
}
#images {
width:98%;
margin:0 auto;/*center div*/
border:1px solid #CCC;
text-align:center /*center text*/
}
I am trying to center a navigation bar on my webpage. I have the min width to be 945px and then 50% of the screen if it's past that width. I now want it centered so I shift it left 50% but then I need to adjust the margin. How do I code width/2?
#navBarImg {
position:absolute;
left:50%;
width:50%;
margin-left:-(width/2);
top:50px;
z-index:2;
min-width:945px;
}
<body>
<div id="container">
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogo" src="../Navigation/navBarLogo.png" />
<div id='navMenuPart1' class="navMenu">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
set your margin-left and margin-right to auto and it will center the div (also take of the left: 50%). If that doesn't work, post your code on jsfiddle.net
#navBarImg {
position:relative;
width:50%;
margin: 1em auto;
z-index:2;
min-width:945px;
}
Address your buffer requirements via margin values not top. Relative positioning + auto margins will do it.
EDIT for structure:
#navMenuPart1 {
position:relative;
margin: 1em auto; // adjust top / bottom to suit
top:50px;
z-index:2;
min-width:945px;
background : url("../Navigation/navBarBGImg.png") no-repeat;
}
#navBarLogo {
position:relative;
display:block;
float: left // your choice
margin: auto // top right bottom left - use this to position it
clear:both;
}
<body>
<div id="container">
<div id="navBar">
<div id='navMenuPart1' class="navMenu">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
<img id="navBarLogo" src="../Navigation/navBarLogo.png" />
</div>
</div>
</div>
</body>
</html>
So the intention here is to use the background image property for your navbar image. Position the interface UL over that as well as the logo. The logo "floats" in that space. Now depending on your UL css - this above might have some layout conflict with your UL but I think this illustrates a better approach
With a relatively positioned element, the browser can auto-center the horizontal axis. You do this simply with margin:auto;. Keep in mind, this will auto-center the element in relation to its container element. So, the thing that screws up a lot of people here is that the container element does not have a defined width, and therefore the margin:auto; doesn't know how to render because it is relative to the parent element.
EDIT
Also, an <img> is an inline-block element. You will need to make it a block-level element for margin:auto; to work correctly. You can do so like this display:block;.
A working example.
#navBarImg {
position:relative;
display:block;
min-width:50px;
width:50%;
margin:auto;
border:1px solid black;
}
This does work,
width:50%;
min-width:945px;
margin:auto;
position:relative;
top:50px;
but using relative positioning essentially "uses" the visible position, as well as the original position. To get around this, you need to contain it somehow. I'm assuming this navigation bar is horizontal (since it's so wide). You also mentioned a logo, which needs to be visible.
Wrap the logo and nav bar in a "header" div or something (if you're already doing this, it requires another layer of wrapping for everything in the header except the nav bar), and set that div to position:relative;width:100%, and give it the height of your nav bar plus whatever else needs to go in it. Then give the nav bar
position:absolute; /* Absolutely positioned, relative to its container */
bottom:0;
right:50%
margin-right:-25%; /* OR -472.5px */
You cannot have both an "auto"-looking margin and scalable width. So using -25% (half of scalable width) works for displays greater than double the item's width, while -472.5px (half of the min-width) works for displays less than double.
Update: in response to your new link in the comments: You give #page a width of 100% - but 100% of what? To give it a width relative to that of its parent, the parent width must be defined.
I suggest adding a rule such as html, body{width:100%} (I also tend to set margins to zero, because I don't like the automatic margin created at the top of every page). This will set those elements' width to that of the window, so the percent width you give these elements has a reference point.
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...