changing background color ?? [Archive]

View Full Version : changing background color ??

jeddi

05-20-2006, 04:57 PM

Hi all,

i am trying to insert some fields on my existing page and want it to have a different background color.

i have tried <span> and <div> but it does not change the color

can someone please point me in the right direction - imust have missed something basic !

Here is one attempt that Didn't work !:confused:

<div style='width:400px;position:absolute;left:10px; top:390px;' >
<span style="background-color:yellow; ">
<div style='width:240px;position:absolute;left:10px; top:10px;' >
Agency name:<br>
<span class="det1">If you are acting as an agent for the company -
please put your agency name. If not, leave as 'Private'.</span>
</div>

<div style='width:200px;position:absolute;left:120px; top:4px;' >
<input type="TEXT" name="x_agent" value = "<?php echo $N_agent ?>"
size = '15' maxlength='40'/>
</div>

<div style='width:240px;position:absolute;left:10px; top:90px;' >
Your reference:<br>
<span class="det1">If you have several adverts running
you may want to use reference numbers. You can use numbers or letters. (optional)</span>
</div>

<div style='width:200px;position:absolute;left:120px; top:84px;' >
<input type="TEXT" name="x_opt_yr_ref" value = "<?php echo $N_opt_yr_ref ?>"
size = '15' maxlength='20'/>
</div>
</span>
</div>

ttttt

05-20-2006, 04:59 PM

Id that a different background colour of the page or the fields?

jeddi

05-20-2006, 06:16 PM

sorry - don't understand your reply ??

ttttt

05-20-2006, 06:47 PM

I'm not sure what you want to change the colour of

_Aerospace_Eng_

05-20-2006, 06:59 PM

Your excessive use of absolute positioning is causing the background color not to show, besides you CAN'T put a div inside of a span. A div is a block level element, a span is an inline element no, block level elements should go inside of an inline element. Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#formcontain {
background-color:#FF0;
color:#000;
width:400px;
margin:auto;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.agency {
width:240px;
padding:10px;
}
.det1 {
font-weight:bold;
}
</style>
</head>

<body>
<div id="formcontain">
<div class="agency" >
Agency name: <input type="text" name="x_agent" value="<?php echo $N_agent ?>" size="15" maxlength="40"><br>
<div class="det1">If you are acting as an agent for the company - please put your agency name. If not, leave as 'Private'.</div>
</div>
<div class="agency">
Your reference: <input type="text" name="x_opt_yr_ref" value="<?php echo $N_opt_yr_ref ?>" size="15" maxlength="20"><br>
<div class="det1">If you have several adverts running you may want to use reference numbers. You can use numbers or letters. (optional)</div>
</div>
</div>
</body>
</html>

jeddi

05-20-2006, 07:41 PM

Well yes - i get my background - but none of the elements are positioned where i wanted them !

but thanks anyway as i learnt abit more about css

jeddi

05-20-2006, 08:05 PM

I now have this code - (below) but the positioning is NOT relative !

i assume that the div s that are contained within the layer3 div should be positioning relative to layer3 ? so div2 should be to the right of div1

and div4 should be to the right of div3

and both positioned below div1 and div2.

Well they are NOT they are just stacked up each div under the previous div

Also they should ALL be having a yellow background - but only div1 and div2 have the background color !

i am pretty confused by this !?! does relative positioning not work - or what have i done wrong ?

VERY much appreciate it if you can tell me how to do this !:)

BTW - these div's are all inside a Form - but no other div.


<div id= 'layer3' style='background-color: #ffff00;width:260px;position:absolute;left:10px; top:300px;' >

<div id="div1" style='width:240px;position:relative;left:10px; top:10px;' >
Agency name:<br>
<span class="det1">If you are acting as an agent for the company -
please put your agency name. If not, leave as 'Private'.</span>
</div>

<div id="div2" style='width:200px;position:relative;left:120px; top:4px;' >
<input type="TEXT" name="x_agent" value = "<?php echo $N_agent ?>"
size = '15' maxlength='40'/>
</div>

<div id="div3" style='width:240px;position:relative;left:10px; top:90px;' >
Your reference:<br>
<span class="det1">If you have several adverts running
you may want to use reference numbers. You can use numbers or letters. (optional)</span>
</div>

<div id="div4" style='width:200px;position:relative;left:120px; top:84px;' >
<input type="TEXT" name="x_opt_yr_ref" value = "<?php echo $N_opt_yr_ref ?>"
size = '15' maxlength='20'/>
</div>

</div>

jeddi

05-21-2006, 02:35 PM

I have made some progress:

The colour now covers the whole box - great - thanks.

But - i can not get the 2nd and 4th sub-divs to position opposite the headings.
eg alongside the Agency name: i want to position the input box which has the initial value of Private.

and alongside Your reference i want the other input box (div4)

I have set them both at top:0 and stii they are about 40px lower than where i want. I thought that top:0 would be relative to the containing div (layer3)
but it doesn't seem so ??

here is the code:
thanks again if you can put me straight


<div id= 'layer3' style='width:260px; height:250px; background-color: #ffff00;width:260px;position:absolute;left:10px; top:300px;' >
<center><b>For Agents Use.</b></center>
<div style='width:240px;position:relative;left:10px; top:20px;' >
Agency name:<br>
<span class="det1">If you are acting as an agent for the company -
please put your agency name. If not, leave as 'Private'.</span>
</div>

<div style='width:200px;position:relative;left:120px; top:0px;' >
<input type="TEXT" name="x_agent" value = "<?php echo $N_agent ?>"
size = '15' maxlength='40'/>
</div>

<div style='width:240px;position:relative;left:10px; top:20px;' >
Your reference:<br>
<span class="det1">If you have several adverts running
you may want to use reference numbers. You can use numbers or letters. (optional)</span>
</div>

<div style='width:200px;position:relative;left:120px; top:0px;' >
<input type="TEXT" name="x_opt_yr_ref" value = "<?php echo $N_opt_yr_ref ?>"
size = '15' maxlength='20'/>
</div>

</div>

jeddi

05-24-2006, 01:42 PM

I tried several things over the last couple o hours but still cant figure these relative divs ??? :o