Text, followed by textbox, followed by icon

@brightmatterSep 18.2009

say i have and index file that looks like this

[code]<div id=”main_box”> <div id=”label_15p”>Name:</div> <div id=”box_35p”><INPUT type=”text” id=”name” style=width:100%></div></div>[/code]

and i have a css file that looks like this

[code]#main_box { width: 100%; float: left; margin-bottom: 10px; } #label_15p { color: rgb(0,0,180); text-align: right; width: 14%; float: left; padding-right: 1%; } #box_35p { float: left; width: 35%; }[/code]

What can I do to add a small icon to the right of the textbox? I have the icon (it is a png from FAM FAM silk…)Everything I do, just gives me a normal text followed by textbox. The icon never shows up.

Then, if I might ask a followup question, how do i effect that icon from the javascript area?

[code]<script type=”text/javascript”> //blah blah </script>[/code]

to post a comment

CSS

9 Comments(s) _↴

@opifexSep 18.2009 — #You might try...

[CODE]input.box_35p {
 background: url(images/itextboximage.png) no-repeat right center;
 }[/CODE]

I don't understand what you want with the javascript.

@brightmatterauthorSep 19.2009 — #I should have mentioned that I had already tried that. Sorry.

@opifexSep 20.2009 — ##box_35p input {

background: url(images/itextboximage.png) no-repeat right center;

}[/QUOTE]

this doesn't work either??? I missed that it was an ID.... whoops

@brightmatterauthorSep 21.2009 — #Nope. That does not work. As I said, I tried that. The image will not appear. I have given you the code... Now I am sure you can see why this is so annoying. I 'should' work. It 'does' work on other sites. I is all good though. I am likely going to change it all soon and the re-arrange will likely fix whatever I have mucked up.

@aj_nscSep 21.2009 — #If it doesn't work then the path to the image file simply isn't right. Recall that when dealing with background images with CSS you need to specify the path to the image RELATIVE TO THE CSS FILE, not relative to the file that the CSS is used to style.

@brightmatterauthorSep 22.2009 — #Icon has the correct location because i can make the order text, followed by icon followed by textbox.

In fact all of these combinations work:

Icon -> text -> textbox

text -> icon -> textbox

textbox -> text -> icon

But the one I want is:

text -> textbox -> icon

I did get this to work

text_a -> textbox -> text_b -> icon: text_b is a period and does not show up as a glaring error but it is still annoying. Does anyone else have a work around for this problem?

BM

@brightmatterauthorSep 22.2009 — #I think I need to clarify the question. Using this CSS

<i>
 </i>#complete {
 width: 100&amp;#37;;
 float: left;
 margin-bottom: 10px;
 }
 #label {
 color: rgb(0,0,180);
 text-align: right;
 width: 9%;
 float: left;
 padding-right: 1%;
 }
 #box {
 float: left;
 width: 80%
 }
 #icon {
 float: left;
 width: 9%;
 padding-left: 1%;
 background: url(../images/tick.png) no-repeat right center;
 }

I can get this to work ?

<i>
 </i>&lt;div id="complete"&gt;
 &lt;div id="label"&gt;
 Setting Name:
 &lt;/div&gt;
 &lt;div id="box"&gt;
 &lt;INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name"&gt;
 &lt;/div&gt;
 &lt;div id="icon"&gt;
 .
 &lt;/div&gt;
 &lt;/div&gt;

BUT this will NOT work ?

<i>
 </i>&lt;div id="complete"&gt;
 &lt;div id="label"&gt;
 Setting Name:
 &lt;/div&gt;
 &lt;div id="box"&gt;
 &lt;INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name"&gt;
 &lt;/div&gt;
 &lt;div id="icon"&gt;
 &lt;/div&gt;
 &lt;/div&gt;

@brightmatterauthorSep 22.2009 — #**NOTE** The solution is to not use the 'background' in the CSS. It is best to place the image directly in the HTML like this

<i>
 </i>#complete {
 width: 100%;
 float: left;
 margin-bottom: 10px;
 }
 #label {
 color: rgb(0,0,180);
 text-align: right;
 width: 9%;
 float: left;
 padding-right: 1%;
 }
 #box {
 float: left;
 width: 80%
 }
 #icon {
 float: left;
 width: 9%;
 padding-left: 1%;
 }

And this

<i>
 </i>&lt;div id="complete"&gt;
 &lt;div id="label"&gt;
 Setting Name:
 &lt;/div&gt;
 &lt;div id="box"&gt;
 &lt;INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name"&gt;
 &lt;/div&gt;
 &lt;div id="icon"&gt;
 &lt;img src="../images/tick.png" id="nameIcon"&gt;
 &lt;/div&gt;
 &lt;/div&gt;

@aj_nscSep 22.2009 — #That might work, but I wouldn't call it a solution, at least not a good one. There is no purpose for the extra div in your markup except to hold an image, which has no purpose in your markup except to give the page a certain look - which is not content, it's style. In which case, you need to use a CSS to apply it and not put it in your markup. Use it as a background applied to either your input, or the div containing your input. If you cant get it to work, then, I reiterate, it's because the path to your image isn't correct.

As for what you posted above, the reason why your first markup was working was because it had content (a .) inside the div which gave it a height. With nothing inside the div, it may have been 9% wide, but it was 0% high which means that the background was actually in fact working, the div was just not visible and it could've been fixed by specifying a height on your div, as well as a width.

Also in #CSS _↴

Prevent relative width divs from wrapping relative positioned div takes up space where it isn't Linking header image to home page

Success!

Help @brightmatter spread the word by sharing this article on Twitter...

Tweet This

Text, followed by textbox, followed by icon

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Text, followed by textbox, followed by icon

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴