SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS placement help?

    http://www.search-this.com/multi.html

    I need to have the div with "testing123..." moved below the textbox with value three. BUT, I need the code to by dynamic enough so I could move the testing123 div and have it in front of any of the three textboxes.

    In other words the CSS used for the testing123 div needs to be dynamic so that if the div is placed in front of any textbox it places the div just below that textbox?

    thanks,
    mark

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,

    I don't have time to refine this but if you could have a known width for the inputs then you could do something roughly like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>Website Promotion, Internet Marketing and Blogging</title>
    <style type="text/css">
    .datePickerCalendar{
          float:left;
        background:#f2f2f2;
        border:1px solid #008edc;
        padding:0px;
        font-size:1.2em;
        z-index:2;
            margin:28px -100&#37; 30px -144px;
    }
    
    input,select{float:left;margin:0 2px 0 0}
    .inp{    width:140px}
    
    </style>
    </head>
    <body>
    <div style="width:700px; border:1px solid red; margin:auto;">
        <form action="multi.html" method="get">
            <select multiple="multiple" size="4" name="accounts" >
                <option value="5000">5000</option>
                <option value="6000">6000</option>
                <option value="6500">6500</option>
                <option value="7000">7000</option>
            </select>
            <input type="submit" />
            <input class="inp" type="text" value="one" />
            <input class="inp" type="text" value="two" />
            <input class="inp" type="text" value="three" />
            <div class="datePickerCalendar"> testing123... </div>
        </form>
        <div style="clear:both"></div>
    </div>
    <div style="width:700px; border:1px solid red; margin:auto;">
        <form action="multi.html" method="get">
            <select multiple="multiple" size="4" name="accounts" >
                <option value="5000">5000</option>
                <option value="6000">6000</option>
                <option value="6500">6500</option>
                <option value="7000">7000</option>
            </select>
            <input type="submit" />
            <input class="inp" type="text" value="one" />
            <input class="inp" type="text" value="two" />
            <div class="datePickerCalendar"> testing123... </div>
            <input class="inp" type="text" value="three" />
        </form>
        <div style="clear:both"></div>
    </div>
    <div style="width:700px; border:1px solid red; margin:auto;">
        <form action="multi.html" method="get">
            <select multiple="multiple" size="4" name="accounts" >
                <option value="5000">5000</option>
                <option value="6000">6000</option>
                <option value="6500">6500</option>
                <option value="7000">7000</option>
            </select>
            <input type="submit" />
            <input class="inp" type="text" value="one" />
            <div class="datePickerCalendar"> testing123... </div>
            <input class="inp" type="text" value="two" />
            <input class="inp" type="text" value="three" />
        </form>
        <div style="clear:both"></div>
    </div>
    </body>
    </html>

  3. #3
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I can't put a float:left on the inputs....

    input,select{float:left;margin:0 2px 0 0}

    I CAN put the width on them though

    ??

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well the only other alternative is absolute positioning but that disrupts the flow unless the testing 123 div is just a fixed height.

    You would also need to wrap a div around each input and set the div to position:relative and display:inline and then you could absolutely place the testing div with regard to that inputs parent div.

    The floated version was a better alternative but I guess oyu have some reason for not floating


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
  •