Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

make link side by side with text field

Posted on 2013-11-12
6
Medium Priority
?
310 Views
Last Modified: 2013-11-14
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
0
Comment
Question by:AxISQS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 1500 total points
ID: 39643255
If you really want to ensure that they display correctly then I would set them in containing div's like so:

Current code:

<DIV class=fb-input-box><INPUT id=_1_1_27_1 onfocus=this.blur() 
value="[LL_FormTag_1_1_27_1 /]" maxLength=254 type=text name=_1_1_27_1 
autocomplete="off" data-hint="" placeholder=""> <A 
href="javascript:stringSelect_1_1_27_1()"><IMG title="Select Department" 
border=0 alt="Select Department" src=""> </A></DIV>

Open in new window


Modify it to:

<DIV class=fb-input-box style="width: 300px;"><DIV style="width: 200px; float: left;"><INPUT id=_1_1_27_1 onfocus=this.blur() 
value="[LL_FormTag_1_1_27_1 /]" maxLength=254 type=text name=_1_1_27_1 
autocomplete="off" data-hint="" placeholder=""></DIV><DIV style="width: 100px; float: left;"> <A 
href="javascript:stringSelect_1_1_27_1()"><IMG title="Select Department" 
border=0 alt="Select Department" src=""> </A></DIV></DIV><br style="clear: left;" />

Open in new window


(I put the CSS inline so you could see the styles that went with each element, however you are welcome to transfer them to your CSS file if you like.  Just assign the elements the corresponding classes or id's you would need to do this.)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39643349
Set the anchor tag css to have a width:1% and display: inline-block;
0
 

Author Comment

by:AxISQS
ID: 39643400
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

0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39643603
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?
0
 

Author Comment

by:AxISQS
ID: 39644752
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

0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39645027
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.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question