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 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Trouble positioning divs in a header

    Please could you help me with a problem I am having positioning divs in the header of a page I am working on? It is probably a really elementary thing, but I just can't see a way to do it!

    The code is attached in a zip file: zipped-page-mock-up.zip

    The problem I am having is getting the orange bar containing the Search box to move to the bottom of the green header bar. It should be similar to the header at http://www.yorkshiredales.org.uk, but I can only get it next to the 'A's for changing the text size at the top of the header bar. Would the solution simply be to position the search div using css - margins and padding?

    Thanks for any help you can give - it is making my head hurt!

    Cheers

    Stu

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by stuartw View Post
    Please could you help me with a problem I am having positioning divs in the header of a page I am working on? It is probably a really elementary thing, but I just can't see a way to do it!

    The code is attached in a zip file: zipped-page-mock-up.zip

    The problem I am having is getting the orange bar containing the Search box to move to the bottom of the green header bar. It should be similar to the header at http://www.yorkshiredales.org.uk, but I can only get it next to the 'A's for changing the text size at the top of the header bar. Would the solution simply be to position the search div using css - margins and padding?

    Thanks for any help you can give - it is making my head hurt!

    Cheers

    Stu
    can you post a link to your page? usualy people, including me, do not download attached files.

    regards

  • Users who have thanked oesxyl for this post:

    stuartw (11-01-2008)

  • #3
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Link to troublesome page

    Quote Originally Posted by oesxyl View Post
    can you post a link to your page? usualy people, including me, do not download attached files.

    regards
    Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

    Cheers

    Stu

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by stuartw View Post
    Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

    Cheers

    Stu
    Code:
    <div class="header-top-bar-lower"> <br/> <br/> <br/>
    		</div>
    try to remove br tags, all of them.

    best regards

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by stuartw View Post
    Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

    Cheers

    Stu
    you have some problem with clearing floats. After you remove br tags, you must fix them else the layout will be broken.

    Edit: try to put a global reset as first line in your css file:
    Code:
    * { margin: 0; padding: 0}
    this way you don't need to set a margin and padding 0 in rest and will remove the browser default setings for them


    best regards
    Last edited by oesxyl; 11-01-2008 at 01:48 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This brings it down in IE7.

    Code:
    .headerSearchBox {
    	width: 210px;
    	color: #ffffff;
    	background-color:#c2510f;
    	float: right;
    	margin-top:25px;
    	font-size: 80%;
    	font-weight: bold;
    	padding: 2px 0px 0px 0px;
    }
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Change the html markup order of headerSearch and textswitch divs in such a way that the textswitch comes first and the other next. After that add clear:right; to #headerSearch in CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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