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 properly use CSS in GWTP?

    How to get CSS or XPath locator from a button class

    How to order properties in a declaration block? [closed]

    How to display text on the same line?

    How do I move that div with CSS in a clean way?

    How to make this table's height equal to the middle td's height

    how to make smooth grayscale on hover using CSS

    Dompdf: how to get background image to show on first page only

    CSS radio button border how to remove it?

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    How to set a width of the background (HTML and CSS)

    How do I make a element a regular tab stop within a form?

    how to add border to image css on blogger

    How does google elegantizr work?

    How to use media queries for mobile devices and desktop?

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How do I add custom fonts? [duplicate]

    css how to make the background image padding to right

    How does *, *:after, *:before work?

    How to combine grouped inputs with aligned forms?

    how is the search mail button implemented?

    How to create a multiple columns with HTML CSS

    How to clear the bottom of an image like clear left / right

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    How to design the web page for minimum format loss when pasting into MS Word

    how can I fetch a website and overwrite some ot its html and css [closed]

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How to float Dojo DropDownMenu over a table cell

    How can I insert text before an item with CSS?

    How to animate a div when another div is clicked and how to make the animated div move other elements