0

I'm working on my website header which has a logo image (100px x 100px) in the left hand corner and a navigation bar which is vertically aligned centrally using css table properties. Both the logo image and the navigation bar UL element are in a #header div which has a width of 100%.

What is the best way to reduce the gap between logo and the navigation element without ruining my layout?

website 100% width header with two elements

Added the borders so elements can be distinguished easily. I'm also using the Twitter Bootstrap framework.

The HTML for my page can be found here: http://pastebin.com/RpgcPDdh

Here is my CSS:

#wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: medium none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    padding: 0 50px;
}

body {
    background: url("images/maze_bg.png") repeat scroll 0 0 #DDDDDD 
}

#header {
    display: table;
    padding: 20px 0;
    width: 100%;
}

#header ul{
    border: solid 1px red;
    display: table-cell;
    vertical-align: middle;
}

#header img{
    border: solid 1px blue;
}

Appreciate any help.

4

2 に答える 2

1

Throw in a

margin-right: 20px;

or something on the #header ul. That will move it left.

于 2013-02-21T22:20:27.737 に答える
0

padding-right did the trick! I guess I should've persevered instead of creating a question on here.

于 2013-02-21T22:29:01.480 に答える