SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation How to position a form

    http://gameinfiniti.com/

    I just want to move the searchbox up and away from the right a little, already tried negative margins, they dont work!

    CSS:

    Code:
    #searchbox  {
            background: url(http://gameinfiniti.com/images/searchbox.png) 0 0 no-repeat;
            width: 201px;
            height: 31px;
            text-indent: 8px;
            float:right; }


    Thanks...

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the outer parent needs the float first, not the child . Floating to have an element sit next to another only works if the parent has the float, not a child.
    Code:
    #livesearch{float:right;}
    However, since an anchor comes before the form, to make things easier (and more cross browser friendly) place the float first and have teh anchor second
    Code:
    <div id="top-bar">
    <form id="livesearch" action="/search/" method="post" style="float: right;">
     <input type="text" onclick="this.value=''" id="searchbox" value="Games..." name="q">
    </form>
    
    <a id="styleswitch" href="#">New Look {Beta}</a>
    </div>
    Inline style above there just so you can see
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    O_o u got the source, lol anyway thanks

    but i still cant make the right margin

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Setting a right margin on #livesearch should work just fine . Update hte source with the right margin and it will work..if it doesn't I'll point out what went wrong
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    surprisingly it does not work? maybe add position:aboslute;
    ?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you just do right:-10px which isn't a margin value. It's an offset value only applied to elements with a position (relative/fixed/absolute)

    Making it margin-right would work (don't use offsets in this case)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ouch how dumb of me

    thanks =D

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one more question, lol

    for the text area can u limit the number of characters that can be typed purely with css? thanks


Tags for this Thread

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
  •