Search code examples
csshtmlalignment

Formatting of navigation div

I am trying to sort out my navigation div. I am having a whole variety of problems and I have been trying to sort them out for hours. I am a rookie programmer so please forgive me.

First here is a snap of my css

#navigation { 
background: rgba(109, 183, 229, 1);
display: block; 
position: static;
height: 40px;
width: 96%; 
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}

  1. The border isn't behaving, because it is displaying it all the way around even though I clearly specify 0% for 3 sides. (SOLVED: changed to border-width, and changed % to px as border doesn't allow %)

  2. Next I can't seem to center it perfectly in the middle. I've tried all sorts of things, but I can't seem to get it to function properly. (SOLVED: Magesh and Adam both provided good solutions to this problem, however Adam's achieved my desired results much easier)

  3. I can't seem to get it to not be squeezed when resizing the window. This used to work, but after a couple of changes, it has stopped. I want it to disappear when the width is too small.

I feel like this will be a silly question, and the answer will be a small % here and there I have overlooked. But it is becoming very frustrating. (You may also notice the main body is overflowing over the border I've put at the bottom - no idea why). I will be extremely greatful for any help here.

EDIT: Sorry, I forgot to add. View it here: www.dweeman.com/eb/sitetemplate.html

EDIT: I've created this fiddle for you

Solution

  • NOTE: This answer is for your centering problem

    HTML:

    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Gallery</li>
</ul>

    CSS

    ul{
    display:table;
    width:100%;   /*This ensures that the element covers the entire width*/
    text-align:center;   /*To center the text*/
    list-style:none;   /*Remove the bullets*/
    margin:0;   /*Remove margins*/
    padding:0;   /*Remove extra padding*/
}
ul li{
    display:table-cell;
}

    See here for example -> Click here

    Warning : This is just for example, you could style this better.

    Direct Solution: Replace this code with the code on your website,It'll work perfectly :)

    #ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{ 
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}