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 apply css animation to angular view when the view is called

    CSS - How to stack divs by columns of 2

    How to display a header inline with paragraph text using divs or an alternative method

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    How to use css to display an avatar pic with details next to it?

    How to create a multiple columns with HTML CSS

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to center HTML content

    jQuery + CSS text show not working

    How to center [image + text] of unknown width?

    How to fit an image according to screen size

    how does the path work in css and js

    How do I increase the height of a menu divider in a navigation?

    How can I include an element within a div without using html?

    How do I make an expanding textbox?

    How do I override inline CSS with Class CSS? [duplicate]

    How to manipulate SVG element style with javascript?

    How can I stop a CSS keyframe animation?

    How to highlight table row on hover using CSS only?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to not change color of link on hover

    How do I target nested elements with CSS correctly? [closed]

    How to get a working CSS zigzag border?

    How to split an HTML paragraph up into its lines of text with JavaScript

    How can I rotate a font icon 45 degrees?

    How to get the css with in inline styles using jquery

    Looping through my table, how do I know if the checkbox is checked?

    How to apply CSS to anchor with active class only (parent only) and not include children?

    How to apply multiple CSS3 rotation transformations (compounded) without javascript?

    How can I get a jquery css container to pop up letting the user know data was successfully entered?