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.
Related
I have a HTML list that is using background images in oppose to text as links. My container is 200px tall and I want the links to lie inline in the center of the container, if this were text I could use a line-height:200px; to achieve this however it seems a little different when using background images, any body have any idea how to achieve this method.
Here is a jsfiddle to explain what I mean http://jsfiddle.net/M4XN4/1/
Thanks guys
<div id="container">
<ul class="container">
<li class="linkedin"><li>
<li class="twitter"><li>
<li class="facebook"><li>
</ul>
</div>
Cleaned a bit up, is this the look you were going for?
Most of your a tag code can stay separate from each .facebook .linkedin class as well
#footer-right ul li a{
display:inline-block;
height:200px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position:center;
line-height:200px;
}
http://jsfiddle.net/Ush4n/13/
You can use display:inline and some margins to vertical align.
margin-top:80px;
In the CSS, changing the ul to position: relative; and positioning it to top: 72px did it.
The value of top was calculated by subtracting 14px (height of the ul) + 14px (the empty space over the ul) from 100px (vertical center of the containing div).
You can see the updated code here: http://jsfiddle.net/M4XN4/2/
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.
I have got a ul list which has several li elements which need to be floated left.
Each li contains an image of variable height either 150px or 200px. So what we get is multiple boxes(li) with images inside them.
This is the exact html inside an li
<li class="photo">
<a href="#" class="photo-link">
<img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
<span class="photo-title">MrSpock</span>
</a>
</li>
Now if an image in any of the li elements is of height 200px and the adjacent li has an image of height 150px, the li with image 150px height stacks up on the top right edge of the li with 200px height. ( Remember both are floated left)
I want the li elements to stack up as if they were boxes of diff height kept on a floor.
Restrictions : I cannot change this html, there can be multiple li elements in which case the images flow to the next row. We do not know in advance if all the images in a row will be of same or diff height.
Is there a CSS only solution possible for this ? Heres a link to my problem :
https://dl.dropboxusercontent.com/u/88049315/home.html
I want the containers in the first row to all align at the bottom.
What about this fiddle?
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
#container
{
width:200px;
height:200px;
background-color:#333;
display:table-cell;
vertical-align:bottom
}
.content
{
width:48px;
height:48px;
background-color:red;
float:left;
margin: 1px;
}
As long all the floating content together does not have a width larger then the container everything is fine. After that the float functionality takes over and positions the first line one row above the bottom.
Otherwise you could rotate the conainer div so all content in it goes with it. This is more of a hacky way and can cause issues further down the line. The Fiddle
I try to use the
position:fixed;
width:10in;
but when resize the browser, the contents go out of boundary(there's no way to reach those elements).
i need an alternative because i want the nav bar to be at top at all times.
edit: i also want the contents to be inline which is not served by using
width:100%;
display:inline or inline-block
check here - http://jsfiddle.net/dF4Bx/1/
In simple language -
I need that the browser should provide a horizontal bar if the width is not fullfilled by the resized window.
Making your top bar sticky with CSS
#header{
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
I see what's your problem.
Use this HTML instead of yours:
<div class="back">
<div id="header" class="front">
<ul>
<li>Home</li>
<li style="float: right;">Login</li>
<li style="float: right;">Register</li>
<li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>
</ul>
</div>
</div>
And put this rule into your CSS:
#header ul li {
margin-right: 7px;
}
And too, change this width 8in to 95%:
div.back div.front {
background-color: #0072C6 !important;
margin: auto;
width: 95%;
}
Note that i removed the inline style padding of search element.
Try with below CSS,
position:fixed;
top:0;
width:100%;
z-index:99;
8In is such a big value and moreover it is fixed width that's why it keeps going beyond browser. Use % values for responsive designs.
So change width like this
div.back div.front {
width:100%;
}
then about keeping the elements inline,
Use something like margin-left:20% instead of 24In in padding:24px 20px 24px 2in!important;.
Even it will break the line when it reaches a limited browser window. You can reduce this range by avoiding larger fixed values of padding and width in your code.
Check Fiddle: FIddle
to arrive to your purpose you can try this code :
.divClass{
position:fixed;
top: 0px;
z-index: 99;
width: 80% /*for responsible width*/
}
This is what I'm trying to do:
Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg
(Larger image.)
When the <nav> element is present in the design, I want it to look like the example below. Is it possible to do this while the #content div has got a percentage value set? I'm just curious to see whether this is possible without using two different styles for the #content (both with different width values.)
Just floating doesn't seem to do it.
The reason I want the #content to have a percentage value in the first example is because I have a background image in #body that creates the illusion of an outer glow.
Edit: I just removed the need for using the width percentage by using margins instead.
Check the example here: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
What you should do is to set float:right and width on your <nav> element, and leave #content without any float or width, just set margin. This way content will try to occupy all given space and wont 'fall' into navigation.
Then, if you hide <nav> element, content will automatically resize (but also you will need to remove padding from the right).
This is example code:
<style type="text/css">
#container { width:700px; margin:0 auto; border:1px solid #000; }
#nav { display:none; }
.double #nav { width:10%; float:right; display:block; }
#content { margin-right:10%; border-right:1px solid #000; }
</style>
<div id="container" class="double">
<div id="nav">nav content</div>
<div id="content">page content</div>
</div>
Now, if you removed class="double" from container element you will see content is correctly resized to take 90% of given space. If you want to take 100% - just add .double before #content in style.