asked on

make link side by side with text field

hi everyone, i have a webpage consisting of form elements

next to each text box i have the following link:

 <A HREF="javascript:stringSelect_1_1_27_1()">
        <IMG SRC="/img/attrtable/stringselect.gif"
        ALT="Select Department"
        TITLE="Select Department"
        BORDER="0">
        </A>

Open in new window

this link is appearing underneath the text box. i would like the link to the right of the text box. how do i achieve this?
readme.png
default.css
example.html

ASKER CERTIFIED SOLUTION

OmniUnlimited

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

Set the anchor tag css to have a width:1% and display: inline-block;

AxISQS

ASKER

in the text field below, what div needs those properties? thanks

<div style="PADDING-BOTTOM: 10px" id="item5" class="fb-item fb-75-item-column">
        <div class="fb-grouplabel">
          <label style="DISPLAY: inline" id="item5_label_0">Division</label>
        </div>
        <div class="fb-input-box">
          <input id="_1_1_2_1" name="_1_1_2_1" maxlength="254" placeholder="" data-hint=""
          autocomplete="off" type="text" VALUE="[LL_FormTag_1_1_2_1 /]" ONFOCUS="this.blur()"/>
          <A HREF="javascript:stringSelect_1_1_2_1()">
          <IMG SRC="/img/attrtable/stringselect.gif"
          ALT="Select Division"
          TITLE="Select Division"
          BORDER="0">
          </A>
        </div>
      </div>

Open in new window

OmniUnlimited

To be honest with you, and not desiring to contradict our esteemed expert GaryC123, I cannot be so bold as to declare that setting that div to 1% will resolve your issue. We do not have the image dimensions of the images you are using, and if those dimensions exceed 1% of the width, you will not obtain the results you desire. Whereas with my solution, you can adjust the widths of the two containing divs (the ones with style="width: 200px;" and style="width: 100px;" respectively) to widths that will work for you. Simply change the 200px and 100px to the dimensions you truly need.

One question, it appears (from how messed up the code looks) that you are using a web design program like FrontPage. Is this the case? Perhaps you are not too comfortable working directly in HTML and CSS?

AxISQS

ASKER

I tried the first suggestion by OmniUnlimited but it didn't work. It shrunk the text box and the down arrow (link) was still underneath the text box and not to the right.

The text box should be 360px wide. The arrow is 25px wide.

I adjusted the values but couldn't get it to look right. Here is the entire code where I made the adjustment. Please see the css in the first post as needed. Thanks for your time.

         <div class="fb-grouplabel">
          <label style="DISPLAY: inline" id="item4_label_0">Department</label>
        </div>
        <div class="fb-input-box" style="width: 360px;"><DIV style="width: 25px; float: left;">
          <input id="_1_1_27_1" name="_1_1_27_1" VALUE="[LL_FormTag_1_1_27_1 /]" maxlength="254" placeholder="" data-hint="" autocomplete="off" type="text" ONFOCUS="this.blur()" />
          <A HREF="javascript:stringSelect_1_1_27_1()">
		      <IMG SRC="/img/attrtable/stringselect.gif" ALT="Select Department" TITLE="Select Department" BORDER="0"> </A>
        </div>
        </div>
        <br style="clear: left;" />

Open in new window

OmniUnlimited

I'm sorry, but that was not the code I gave you. You are missing the div wrapper around the anchor tag (the <A HREF="javascript:stringSelect_1_1_27_1()"><IMG SRC="/img/attrtable/stringselect.gif" ALT="Select Department" TITLE="Select Department" BORDER="0"> </A>) and you set the input field containing div to only 25px.

Please look at my code very carefully, and copy ALL of it EXACTLY into your code. Otherwise, of course it will not work.