Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    (CSS) Aligning Logo and Navigation Search Bar

    Hello,
    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:
    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
    Tom

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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.

  • #3
    New Coder
    Join Date
    Sep 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello,
    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 .

    Regards
    Tom


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •