dr_roose
asked on
Positioning input with css, transparent backgrounds
Hi All,
I have a couple of problems. First I have two inputs, 1 & 2 that I want to go on a line with specific spacing between then. So I position one at left:120 px and two at left:420 px. When I code them as shown there is no spacing between the inputs other than the text. What am I doing wrong? I know i can di it with a table but I would rather keep it pure css.
Next, how do I make the background of the inputs transparent? I have seen several examples of transparent backgrounds but they all have a url and an image after the word transparent but none of them explane what the url or images are.
Finally, since I would like this to show up pretty much with any screen size, can I position the inputs with % rather than px?
Any help would be greatly appreciated.
Thanks
Dick Roose
I have a couple of problems. First I have two inputs, 1 & 2 that I want to go on a line with specific spacing between then. So I position one at left:120 px and two at left:420 px. When I code them as shown there is no spacing between the inputs other than the text. What am I doing wrong? I know i can di it with a table but I would rather keep it pure css.
Next, how do I make the background of the inputs transparent? I have seen several examples of transparent backgrounds but they all have a url and an image after the word transparent but none of them explane what the url or images are.
Finally, since I would like this to show up pretty much with any screen size, can I position the inputs with % rather than px?
Any help would be greatly appreciated.
Thanks
Dick Roose
<Style>
#sidebar input1 {
width: 90%;
background: transparent;
position: absolute;
left:120px;
border: 0px;
height: 15px;
padding: 9px;
}
#sidebar input2 {
width: 90%;
background: transparent;
position: absolute;
left:420px;
border: 0px;
height: 15px;
padding: 9px;
}
</style>
html follows
Hours to Work <input1 type="text" name="name" size="15">
Time of Day <input2 type="text" name="name" size="15>
ASKER
Hi Itzy,
I tried your code but it dosen't work for me. Obviously I am doing something wrong. I have enclosed the css style sheet and the html code below hoping you can point out my error.
Thanks
Dick Roose
I tried your code but it dosen't work for me. Obviously I am doing something wrong. I have enclosed the css style sheet and the html code below hoping you can point out my error.
Thanks
Dick Roose
<style type="text/css">
HTML { PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
WIDTH: 100%;
PADDING-TOP: 0px;
HEIGHT: 100%}
BODY { PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
WIDTH: 100%;
PADDING-TOP: 0px;
HEIGHT: 100%}
BODY { FONT-SIZE: 76%; FONT-FAMILY: arial, sans-serif}
a:link { color: #000099; }
a:visited { color: #0000CC; }
a:hover { color: #6666FF; }
a:active { color: #6633FF; }
#background { Z-INDEX: 1; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%}
DIV.c5 { TOP: 1px}
IMG.c4 { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}
DIV.c3 { TEXT-ALIGN: center}HR.c2 { WIDTH: 100%; HEIGHT: 2px}IMG.c1 { LEFT: 1px; TOP: 3px}
#scroller { Z-INDEX: 2; LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%}
#content { PADDING-RIGHT: 30px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 5px}
P { LINE-HEIGHT: 1.8em; LETTER-SPACING: 0.1em; }
.fnt1 { FONT-SIZE: 250%; COLOR: #FFCC00; FONT-FAMILY: Algerian}
.fnt2 { FONT-SIZE: 180%; COLOR: #000000; FONT-FAMILY: Algerian}
.fnt3 { FONT-SIZE: 145%; COLOR: #000000; FONT-FAMILY: arial}
.fnt4 { FONT-SIZE: 100%; COLOR: #000000; FONT-FAMILY: arial}
.fnt5 { FONT-SIZE: 200%; COLOR: #FF0000; FONT-FAMILY: arial}
.fnt6 { FONT-SIZE: 225%; COLOR: #000000; FONT-FAMILY: arial}
#fixed { BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid;
PADDING-LEFT: 10px; Z-INDEX: 10; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 1px solid;
WIDTH: 150px; COLOR: #567; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid;
POSITION: absolute; TOP: 25px}
label{
width:40%;
float:left;
margin-right: 5%;
clear:none;
}
#sidebar textarea {
width: 90%;
background-color: transparent;
border: 0px;
height: 66px;
padding: 9px;
}
#sidebar input1 {
width: 90%;
background: transparent;
position: absolute;
left:120px;
border: 0px;
height: 15px;
padding: 9px;
}
#sidebar input2 {
width: 90%;
background: transparent;
position: absolute;
left:420px;
border: 0px;
height: 15px;
padding: 9px;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="TFRStyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="This site provides a multitude of low cost Internet and home business opportunities along with all the resources you will need to create and grow your Internet or home based business. Here you will find both free and low cost web sites and web site designs to get you started at a minimum cost. We also offer free and low cost advertising and marketing resources and training. We specialize in providing the lowest start up cost and a wealth of free and low cost advertising and marketing resources to get you on your way to generating income>
<meta name="keywords" content="free, low cost, Internet, business, opportunities, advertising, marketing, Home, Internet business, Home business, Internet business opportunities, Home business opportunities, Internet business resources, Home business resources, Internet marketing, Home business marketing, Internet advertising, Home business advertising, free web site, low cost web site, free web site design, low cost web site design>
<meta name="revisit-after" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Low cost Internet and home business opportunities and resources for Internet and home based income producing opportunities.</Title>
<style type="text/css">
</style>
</head>
<body>
<img class="c1" id="background" title="sunrise" alt="" src="images/sunrise.jpg" name="background">
<div class="c5" id="scroller">
<div class="c3">
<br>
<span class="fnt1">AMAZING HOME VENTURES</span><br>
<span class="fnt2">The Ultimate Internet and Home Business Store</span><br>
<span class="fnt3"><a href="COMPLETE_INTERNET_HOME_BUSINESS.html" target="_blank">
COMPLETE INTERNET HOME BUSINESS $10</a><br>
<hr class="c2">
The Amazing Home Business Plan</span><br><br>
</div>
<table>
<tbody>
<tr>
<td valign="top" align="middle" width="20%">
</td>
<td valign="top" align="left" width="60%">
1) What Kind of Business do you want to go into? Describe your business in a
short paragraph.<br>
<textarea name="message" cols="80" rows="6"></textarea>
<br><br>
2) How much effort are you willing to put into a new business? List how many
hours a day you want to work and what those hours will be. Then make arrangements
so you can have that time free every day to do the work you need to do.<br>
<label>Hours to Work <input1 type="text" name="name" size="15"></label>
<lable>Time of Day <input2 type="text" name="name" size="15"></label>
<br><br>
3) How much money can you spend to start up and how much a month to maintain and
grow your business?<br>
Start Up<input type="text" name="name" size="15"> Monthly<input type="text" name="name" size="15"><br><br>
4) Got a note book to keep by your computer?<br>
1) Signed up for Roboform? Username__________ Password___________<br>
2) Signed up for Paypal Username__________ Password___________<br>
3) Signed up for ClickBank Username__________ Password___________<br>
4) Signed up for AlertPay Username__________ Password___________<br>
5) Signed up for SureTrustPay Username__________ Password___________<br><br>
5) You Domain Name ____________________________<br>
Username__________________ Password____________________<br><br>
6) Do a layout of your site. Just rough it in to show what you want and where
it goes.<br>
a) Your background image must be at least 1024 by 768 pixels________________<br>
b) <a href="http://www.pagetutor.com/colorpicker/index.html" target="_blank">
or get the hex value for your background color here</a> ______________<br><br>
7) Meta Tags.<br>
a) Keyword Meta Tag. List all of your key words and phrases here with a comma
between them.<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br><br>
b) Description Meta Tag Write the description of your web site here.<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br>
_____________________________________________________________________________<br><br>
You're now ready to get your web site and start building it!<br>
<a href="http://secure.hostgator.com/cgi-bin/affiliates/clickthru.cgi?id=AHVentures" target="_blank">
Get My Web Site</a>
<br><br><br>
<br><br><br>
</td>
<td valign="top" align="middle" width="20%">
</td>
</tr>
</tbody>
</table>
<br><br><br>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi Dick Rose
Another thing, you have all your inputs with the same name, this will make an array of inputs named "name". Be careful if you need to reference to these inputs.
In the code attached before I changed the name of the inputs.
Another thing, you have all your inputs with the same name, this will make an array of inputs named "name". Be careful if you need to reference to these inputs.
In the code attached before I changed the name of the inputs.
ASKER
Hi itzy,
Thank you. Your code works perfectly but it turns out its not what I need. I didn't realize that I also need to space the labels too so they stay with the proper inputs. Dumb of me.
I tried to take what you showed me and apply it to both the labels and inputs but my computer seems to ignore any spacing I try to apply. The code I tried is listed below..
My thinking is that the div statemebts would take care of the spacing but in fact the browser acts like the div statements didn't exist. I get the same thing with or without the div statements enclosing the inputs labels and inputs. This baffels me because I cannot see any reason for this. If the
"
position: absolute;
left:30%;
"
works and spaces the inputs correctly, why doesn't it work for the divs and space them correctly.??? I don't see any difference.
Thabks
Dick
Thank you. Your code works perfectly but it turns out its not what I need. I didn't realize that I also need to space the labels too so they stay with the proper inputs. Dumb of me.
I tried to take what you showed me and apply it to both the labels and inputs but my computer seems to ignore any spacing I try to apply. The code I tried is listed below..
My thinking is that the div statemebts would take care of the spacing but in fact the browser acts like the div statements didn't exist. I get the same thing with or without the div statements enclosing the inputs labels and inputs. This baffels me because I cannot see any reason for this. If the
"
position: absolute;
left:30%;
"
works and spaces the inputs correctly, why doesn't it work for the divs and space them correctly.??? I don't see any difference.
Thabks
Dick
<style>
div1{
position: absolute;
left:30%;
}
div2{
position: absolute;
left:60%;
}
input.input1 {
background-color: transparent;
border: 1px solid #781351;
}
input.input2 {
background-color: transparent;
border: 1px solid #781351;
}
</style>
<html>
<div1>Hours to Work <input type="text" name="name1" size="15" class="input1" value="TXT HOURS"></div1>
<div2>Time of Day <input type="text" name="name2" size="15" class="input2" value="TXT TIME"></div2>
</html>
Hi Dick Rose
The problem is that <div1> and <div2> don't exist. The tag is <div>.
The style :
div.div1{
position: absolute;
left:30%;
}
defines a style class called "div1" that works for an element div.
The style:
input.input1 {
background-color: transparent;
border: 1px solid #781351;
}
defines a style class called "input1" that works for an element input.
The style class name could be any name, like "input1", "dummy", "txtBox", etc
I attached the modified code. I hope this is what you need.
The problem is that <div1> and <div2> don't exist. The tag is <div>.
The style :
div.div1{
position: absolute;
left:30%;
}
defines a style class called "div1" that works for an element div.
The style:
input.input1 {
background-color: transparent;
border: 1px solid #781351;
}
defines a style class called "input1" that works for an element input.
The style class name could be any name, like "input1", "dummy", "txtBox", etc
I attached the modified code. I hope this is what you need.
<style>
div.div1{
position: absolute;
left:30%;
}
div.div2{
position: absolute;
left:60%;
}
input.input1 {
background-color: transparent;
border: 1px solid #781351;
}
</style>
<html>
<div class="div1">Hours to Work <input type="text" name="name1" size="15" value="TXT HOURS" class="input1"></div>
<div class="div2">Time of Day <input type="text" name="name2" size="15" value="TXT TIME" class="input1"></div>
</html>
background-color:transpare