How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?


Tags: html,css

Problem :

This is my website. The nav bar is causing me horrendous problems. Last night my friend told me it was dropping down and I just don't know how to fix it:

http://i60.tinypic.com/23iigpi.png

So I removed the width and reduced the text on some buttons which is depressing for me.

Anyway, now I want my smaller nav bar to centre in the middle of my white block. Does anyone know the best way?

http://www.simplypsychics.com/null/index-test.html

I have tried:

and modifying various positioning in the CSS but nothing seems to work.

This is my CSS for the nav:

#nav {
position: absolute;
top: 98px;
left:15px;
float: left;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 13px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}

and this is my HTML:

<div id="nav" style="margin:0 auto !important;">
<li class="home-icon1" onclick="window.location.href='http://www.simplypsychics.com/'"></li>
<li class="home-icon2"><a href="http://www.simplypsychics.com/readers/" target="_parent">FIND A PSYCHIC READER</a></li>
<li class="home-icon3"><a href="http://www.simplypsychics.com/readings/" target="_parent">PSYCHIC READINGS</a></li>
<li class="home-icon4"><a href="http://www.simplypsychics.com/book/" target="_parent">BOOK A READING</a></li>
<li class="home-icon5"><a href="http://www.simplypsychics.com/psychicreadings/" target="_parent">FIND OUT MORE</a></li>
<li class="home-icon6"><a href="http://www.simplypsychics.com/help/" target="_parent">HELP/FAQ</a></li>
</div>

Also if the nav bar looks awful for you like it did my friend please let me know! :(



Solution :

On parent (#headerwhiteback) set: text-align: center;

Then on #nav, remove: position: absolute; float: left;

And add this CSS:

#nav {
    display: inline-block;

}
#nav::before {
    content: "";
    clear: both;
}

Also, to your liking: add margin-top: on #nav (25px seems ok) and make padding-top: on next element, #headertextbottom, much smaller (20px seems ok).

This is just a quick fix for your header. Please remember: CSS looks horrific here and looks set to be rewritten from scratch or only cause you more and more trouble. Good luck!


    CSS Howto..

    How to style parent li elements of headers using CSS?

    How to stretch container div from header to footer with html/css?

    How to create responsive square

    how to create circle that cut off one piece with css

    How to get css3 multi-column count in Javascript

    How to get a CSS selector in PHP?

    How to hide a segment of my website using PHP

    How to not repeat a CSS background gradient

    How do i add a fading border to my nav bar CSS

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    CSS/XHTML: Show div after a specific count of table rows

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How to change the background image of input button with jquery

    How to position two blocks side by side with CSS

    How can I have a transparent overlay and center with flex box?

    How to view the compiled css from sass files in ruby on rails?

    How to position tables in ie 9 using css?

    How to import Google Web Font in CSS file?

    How can I restrict this CSS container to only containing the div its declared in?

    How do I make a certain text style larger?

    How to remove the bottom border of a box with CSS

    CSS: How to fake a :hover state?

    how to align the content to center of page using css

    How to set the minimum height of a
    box in Internet Explorer 8?

    CSS - How to use “vertical-align : middle” with a table near an image?

    how can i add a separator gif between two content areas something like this?

    How does css position impact element width/height?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How do I evenly distribute a group of spans across a div?

    how to dynamically change the property of css using jquery