?
Solved

Positioning input with css, transparent backgrounds

Posted on 2009-04-22
6
Medium Priority
?
700 Views
Last Modified: 2013-11-25
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


<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>

Open in new window

0
Comment
Question by:dr_roose
  • 4
  • 2
6 Comments
 
LVL 2

Expert Comment

by:itzy
ID: 24207674
In order to make the background transparent use:
background-color:transparent;

0
 

Author Comment

by:dr_roose
ID: 24210079
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
<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>

Open in new window

0
 
LVL 2

Accepted Solution

by:
itzy earned 2000 total points
ID: 24217891
hi dr roose:

I change a little bit your code in order to make the background of the inputs and the text area transparent and to position the inputs in the page using %. For example:
OLD:
#sidebar input1 {
width: 90%;
background: transparent;
position: absolute;
left:120px;
border: 0px;
height: 15px;
padding: 9px;
}
NEW:
input.input1 {
background: transparent;
position: absolute;
left:30%;
border: 0px;
}

The input is transparent and appears at the position 30% of the page. I set the attribute class="input1" (I also set the attribute value with "TXT HOURS" to see where the input appears). For the text area I just delete the expression "#sidebar".
I attach the modified code. I hope this is what you need.

<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; 
}
textarea {
	width: 90%;
	background-color: transparent;
	border: 0px;
	height: 66px;
	padding: 9px;
}
input.input1 {
background-color: transparent;
position: absolute;
left:30%;
border: 0px;
}
input.input2 {
background-color: transparent;
position: absolute;
left:60%;
border: 0px;
}
</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 <input type="text" name="name1" size="15" class="input1" value="TXT HOURS"></label> 
<lable>Time of Day <input type="text" name="name2" size="15" class="input2" value="TXT TIME"></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>
 
<label>Start Up <input type="text" name="name3" size="15" class="input1" value="TXT START UP"></label> 
<lable>Monthly  <input type="text" name="name4" size="15" class="input2" value="TXT MONTHLY"></label> 
<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>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:itzy
ID: 24217938
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.

0
 

Author Comment

by:dr_roose
ID: 24220052
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
<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>

Open in new window

0
 
LVL 2

Expert Comment

by:itzy
ID: 24220901
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.

<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>

Open in new window

0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses
Course of the Month15 days, 12 hours left to enroll

850 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