SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submit button positioning

    i've been scratching my head but just can't work out why the submit button on a form i've built is not aligning where i expect. I want the button to sit nice and neatly alongside the text field. At the moment it positions itself on a new line below the #searchbar div. Any ideas would be gratefully received!

    here's the html:

    <form action="#" method="get" id="destSearch" name="destSearch">
    <div id="searchbar">
    <div id="searchinput">

    <input type="text" name="ds" value="click and type destination" id="ds" align="middle" autocomplete="off" onfocus="clearMe(this)" onblur="returnMe(this)" />
    <div id="autoCompleteMenu" name="autoCompleteMenu" class="auto_complete"></div>
    </div><!-- end of searchinput -->
    <input type="submit" id="submit" value="search" />
    </div>
    </form> <!-- End of searchbar -->

    and here's the relevant css:

    #searchbar {
    width: 100%;
    height: 60px;
    background: #7c001d url(backgrounds/searchbar_grad.png) 0 0 repeat-x;
    }

    #searchinput {
    width: 722px;
    height: 60px;
    margin-left: 34px;
    background: #e6ecab url(backgrounds/searchbar_input_pt1.png) 0 0 no-repeat;
    }

    #ds {
    margin: 0px 0px 0px 402px;
    height: 60px;
    width: 370px;
    background: #e6ecab url(backgrounds/searchbar_input_pt2.png) 0 0 no-repeat;
    border: none;
    padding-top: 8px;

    }

    div.auto_complete {
    width: 370px;
    background: #a80329 url(backgrounds/auto_complete.gif) 0 0 repeat-x;
    font-size: 2em;
    color: #000000;
    opacity: 0.88;
    z-index: 100;
    border: 3px solid #37000d;
    }
    div.auto_complete ul {
    /*border: 1px solid #5d5d5d;*/
    margin:0;
    padding:0;
    width:370px;
    list-style-type:none;
    }

    div.auto_complete ul li {
    margin:0;
    padding:3px;
    }

    div.auto_complete ul li.selected {
    background: #e6ecab url(backgrounds/auto_complete_select_bkgd.png) 0 0 no-repeat;
    height: auto;
    color: #000000;
    border: 2px solid #5d5d5d;
    text-shadow: #5d5d5d 1px 1px 1px;

    }

    div.auto_complete ul strong.highlight {
    color: #7c001d;
    margin:0;
    padding:0;
    }


    #submit {
    width:60px;
    height: 40px;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a div is a block element, #searchinput will normally force a new line. Try floating #searchinput left.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sort of worked!! it's now at least in the right area but is overlapping the #searchinput div. Any ideas?

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by "overlapping"?

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it working! i was being stupid with a width value - schoolboy error. Thanks Centauri - something to remember about block elements. Really appreciate your help.


Bookmarks

Posting Permissions

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