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
Solved

Add picture to textbox

Posted on 2013-06-06
13
302 Views
Last Modified: 2013-06-09
Hi!

Have this code:

<?php // RAY_EE_login.php
require_once('RAY_EE_config.php');
?>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Test system</title>

</head>

<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<Form method="post" action="RAYTEST.php">
    <fieldset id="inputs">
        <input id="username" name="usrn" type="text" placeholder="E-post" img src="images/topp1.png" align="right" autofocus required>   
        <br>
		<input id="password" name="passo" type="password" placeholder="Passord" required>
    </fieldset>
    <fieldset id="actions">
	    <br>
	    <input type="submit" id="submit2" name="glemtpassord" value="Glemt passord?">
        <br><br>
	</fieldset>	
	<fieldset id="actions">
		<input type="submit" id="LOGIN" name="loginn" value="Logg inn">
    </fieldset>
</Form>
</body>
</html>

Open in new window


But my problem is that picture, this line:
<fieldset id="inputs">
        <input id="username" name="usrn" type="text" placeholder="E-post" img src="images/topp1.png" align="right" autofocus required> 

Open in new window

 
dosent work.

How do i add/show this picture in the textbox ?
0
Comment
Question by:team2005
  • 5
  • 3
  • 3
  • +2
13 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225522
Can you show us a snapshot so that we can see what a problem is...
A URL will also work...

In the meantime have a look at these link... might help...

http://viralpatel.net/blogs/textbox-with-background-image-using-css/
http://www.dotnetspider.com/forum/165999-Insert-Image-TextBox.aspx
0
 
LVL 4

Expert Comment

by:Ahmed Hussein
ID: 39225583
u can add it as a background

<fieldset id="inputs">
        <input id="username" name="usrn" type="text" placeholder="E-post" style="background:url(images/topp1.png)" align="right" autofocus required>
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39225588
Try:
<fieldset id="inputs">
        <input id="username" name="usrn" type="text" placeholder="E-post" style="background-image: url(images/topp1.png);" align="right" autofocus required>

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:team2005
ID: 39225613
Hi!

I get the picure now, but i want it to be on the right side
and the picture must be in the center of the textbox.

And how to center text... Tryed to use align="center" but dident work

Added this in CSS

#username
{
background-image:url('images/topp1.png');
background-repeat:no-repeat;
}

Include CSS her

************************CSS*************

html, body
{
    height: 100%;
}

body
{
    font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;    
    margin: 0;
    background-color: #614912; 
}

/*--------------------*/

#login
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    max-width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    -webkit-border-radius:0px;
	webkit-appearance: none;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

#GULKN
{
    background-color: #e4ab15;
	font: bold 30px Arial, Helvetica;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    max-width: 50px;
	color: #ffffff;
	cursor: pointer;
	position: left;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

/*--------------------*/

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

h1:after2
{ 
    background: #614912;    
    right: 0;
}

h1:before2
{
    background: #614912;
    left: 0;
}

/*--------------------*/

fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}

/*--------------------*/

#inputs input
{
    padding-right: 25px;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
	font: bold 20px Arial;
	color:#ffffff; 
	background-color: #96825a;
	border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	
}

#uid
{
	height:20px;
	padding:10px 25px;
}

#pwd
{
    height:20px;
	 padding:10px 25px;
}
#username
{
background-image:url('images/topp1.png');
background-repeat:no-repeat;
padding: 15px 15px 15px 30px;
}
#inputs input:focus
{
    background-color: #96825a;
    outline: none;
}

/*--------------------*/

#LOGIN
{		
    background-color: #e4ab15;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: bold 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    -webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-appearance: none;
}

#JAKNAPP
{		
    background-color: #e4ab15;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: bold 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

#NEIKNAPP
{		
    background-color: #880051;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: bold 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

#LOGGUT
{		
    background-color: #d1c5b0;
    float: center;
    height: 55px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font: bold 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
	border-radius:10px;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

#submit2
{		
    background-color: #96825a;
    float: center;
    height: 35px;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font: bold 20px Arial, Helvetica;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
}

table.hoved
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    max-width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
}
table.servicesT
{ font-family: Verdana;
font-weight: normal;
font-size: 20px;
color: #404040;
width: 330px;
background-color: #fafafa;
border: 0px #614912 solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;
width: 100%;
}


table.servicesT td.servHd
{ border-bottom: 1px solid #614912;
background-color: #96825a;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #ffffff;}

table.servicesT td.header1
{ 
border-bottom: 1px solid #614912;
background-color: #614912;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: left;
color: #614912;
hight: 50px;
}




table.servicesT td
{ border-bottom: 0px solid #614912;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #d1c5b0;
text-align: center;
padding-left: 3px;}

able.servicesJN td
{ 
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #ffffff;
text-align: center;
padding-left: 3px;}

table.TESTE td
{
  color: #ffffff;
}
.servBodL 
{ 
background-color: #d1c5b0;
border-left: 0px solid #614912; 
} 

Open in new window

0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225634
add...


#username
{
text-align:center;
}

Open in new window


to center text..
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225645
for image to center try...
#username
{
background:url('images/topp1.png') no-repeat center;
}

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39225684
I get the picure now, but i want it to be on the right side
and the picture must be in the center of the textbox.
Which do you want? Do you want the picture on the right side or in the center?

Align is a deprecated attribute so I shouldn't have included it in my comment above. I was only paying attention to the image part of your code and didn't notice it when I copied and edited it. IshaanRawat has shown you how to center your text and the background image above.

Input fields are inline elements and are handled like another character in a string of text. If you want the input field on the right, put it in a right-aligned paragraph element. The following assumes you've implemented IshaanRawat's CSS code for placement of the image.
<fieldset id="inputs">
        <p style="text-align: right; margin: 0;"><input id="username" name="usrn" type="text" placeholder="E-post" autofocus required></p>

Open in new window

0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39225803
why do you want a picture in the textbox?
0
 
LVL 2

Author Comment

by:team2005
ID: 39226392
Hi!

Picture must be align to the right
and text center
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39226463
#username
{
background:url('images/topp1.png') no-repeat right center;
text-align: center;
}

Open in new window

0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39226465
#username
{
background:url('images/topp1.png') no-repeat right;
text-align: center;
}
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39226472
@xmediaman You posted the comment 21 seconds before...

and what a co-incidence...
98% same... LOL...
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 39233914
thanks
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Show tab when enter div and change underline color 3 63
Html form and modal / img src -problem 3 30
Media Queries  not Firing 6 17
Javascript 2 22
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

860 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