View Full Version : (CSS) Aligning Logo and Navigation Search Bar

10-19-2009, 09:01 PM
I am in the process of creating my site www.gadgetfreakz.co.uk and as you can see on the site the logo (top left) and the search bar (white box) on the right are not inline which I want them to be.

Been looking through the Header CSS code trying to find exactly what should be editted. However by changing the width of the site (962px) to 1100px it aligns. Thus I assumed something within the CSS effected it.

Here is the header code:

.logo { float:left; width:267px; height:92px; overflow:hidden; }
.header-container {}
.header { padding:10px 9px 0 12px;}
.header .logo { background-position:0 0; background-repeat:no-repeat; text-indent:-999em;}
.header .logo a { display:block; width:267px; height:92px; }

.header .logo-block { float:left; padding:7px 0 0 0;}
.header .navigation { float:right; width:650px; margin:0 0 14px 0;}

.header .welcome-msg { color:#FFFFFF; font-weight:bold; text-align:right; padding:0 0 0 0; }
.header .links {}
.header ul.links { text-align:right;}
.header ul.links li{ display:inline; color:#818591; background:url(../images/devider_links.gif) right 3px no-repeat; padding:0 8px 0 4px;}
.header ul.links li.last { background:none; padding-right:0;}
.header ul.links li a{color:#818591; text-decoration:none;}
.header ul.links li a:hover{text-decoration:underline;}

.border-left-search { background:url(../images/border_left_search.gif) 0 0 repeat-y #FBFBFB;}
.border-right-search { background:url(../images/border_right_search.gif) right 0 repeat-y;}
.border-top-search { background:url(../images/border_top_search.gif) 0 top repeat-x;}
.border-bot-search { background:url(../images/border_bot_search.gif) 0 bottom repeat-x;}

.left-top-search { background:url(../images/left_top_search.gif) 0 0 no-repeat;}
.right-top-search { background:url(../images/right_top_search.gif) right 0 no-repeat;}
.left-bot-search { background:url(../images/left_bot_search.gif) 0 bottom no-repeat;}
.right-bot-search { background:url(../images/right_bot_search.gif) right bottom no-repeat; width:100%; min-height:56px; height:auto !important; height:56px}
.indent-search { padding:17px 0 12px 10px;}

.header button.button { overflow:visible; width:auto; background:none; border:none; cursor:pointer; padding:0; }
.header button.button span { display:block; background:url(../images/bg_button_left_header.gif) 0 0 no-repeat;}
.header button.button span span { display:block; background:url(../images/bg_button_right_header.gif) right top no-repeat; margin:0; padding:0 1px 0 1px;}
.header button.button span span span{ background:url(../images/bg_button_header.gif) 0 0 repeat-x; display:block; margin:0; padding:1px 4px 5px 5px; font:bold 11px/16px tahoma, sans-serif; text-align:center; white-space:nowrap; color:#FFFFFF; }

.header-row { width:600px; overflow:hidden; padding:3px 0 9px 0;}
.search-block { float:right; width:206px;}
.header-col { float:right; width:400px; padding:9px 0 0 0;}

.header .form-search { text-align:left; }
.header .form-search input{ border:1px solid #CDCDCD; border-left:2px solid #808080; border-top:2px solid #808080; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#2C2C2C; width:137px; padding:2px 0 3px 10px; margin:0 6px 0 0;}
.header .form-search label{ display:none;}
.header .form-search .search-autocomplete { z-index:999; }
.header .form-search .search-autocomplete ul { border:1px solid #ddd; background-color:#fff; }
.header .form-search .search-autocomplete li { padding:3px; border-bottom:1px solid #ddd; cursor:pointer; }
.header .form-search .search-autocomplete li .amount { float:right; font-weight:bold; }
.header .form-search .search-autocomplete li.selected {}

.header .form-language { text-align:right; padding:7px 2px 0 0; }
.header .form-language label { color:#707675;font-weight:normal;}
.header .form-language select{ border:1px solid #CDCDCD; border-left:2px solid #808080; border-top:2px solid #808080; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#515151; width:192px; padding:2px 0 1px 7px; margin:0 3px 0 8px;}

Thank you very much for your help, Regards

10-19-2009, 09:16 PM
it's because you have inserted the image directly in to the HTML, img elements are inline by nature so it's pushing the navigation div down.

I would set the background of .header .logo to be the logo and adapt the necessary css.

10-20-2009, 07:30 PM
Thanks for the reply :).

Surely there may be a more simple solution as increasing the width by 150px aligns it, so removing 150px somewhere must solve this as the combined width of the two is only around 600px?

If not I'll have to do what you suggested :).