[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question
[x]
Attachment Details

CSS Layout Help

Asked by splendorx in Cascading Style Sheets (CSS)

Tags: css

I need help with laying out some objects in CSS.  I have the page built with the objects in DIV tags, but unable to display the information in the desired format.  The web page has a gray box and the objects need to nest inside it.  And I am tring to get soccer player image to display behind form.  The web page can be viewed here:

http://canikickit2010.com/index.cfm

Please advise on what needs to be changed in the CSS to have content fill grey box and have soccer player image displayed behind form.


Thank you,

Terry
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
<style>
body {	background-color:#000000;
		font-family:Arial,Helvetica,sans-serif;
		font-size:12px;
		color:#000000;
	}
 
.bl {background: url(images/bl.gif) 0 100% no-repeat #DEDEDE; width:auto;}
.br {background: url(images/br.gif) 100% 100% no-repeat}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px; position:relative; height:200px;}
.clear {font-size: 1px; height: 1px}
</style>
 
 
 
<div id="content" style="position: relative; top:30px; width:820px; margin-left:auto; margin-right:auto; padding-bottom:60px; clear:both;">
		<div class="bl">
			<div class="br">
				<div class="tl">
					<div class="tr" style="z-index:5;">
						<div id="leftCol2" style="float:left; background: url(images/lion.png) 50% 0 no-repeat; width:45%;"><img src="images/blurb.png" width="142" height="40" /><br />
							<br />
							<cfoutput>
							#qGetPageByFileName.page_content#
							</cfoutput>
						</div>
					
						<div id="rightCol2" style="float:right; width:45%; z-index:5;">
							<img src="images/subscribe.png" width="115" height="25" /><br />
							<br />
							<cfform action="#CGI.SCRIPT_NAME#" method="post">
								Please enter your name and email to subscribe to our quarterly newsletter.<br />
								<br />
								Name: <cfinput type="text" name="subscriber_first_name" required="yes" message="Name is required." />
								<br />
								<br />
								Email:
	<cfinput type="text" name="subscriber_email" required="yes" message="Email is required." />
							<br />
							<br /><input name="submit" type="submit" value="submit" />
							</cfform>
						</div>
						
						<div id="soccer player" style="position:absolute; z-index:1; top:-20px; left:573px;">
							<img src="images/soccer-player.png" width="259" height="275" alt="Soccer Player" />
						</div>
						
 
					</div>
					
				</div>
			</div>
		</div>
[+][-]08/04/09 09:21 AM, ID: 25015385Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08/04/09 10:08 AM, ID: 25015884Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]08/04/09 11:18 AM, ID: 25016551Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08/04/09 12:52 PM, ID: 25017507Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08/05/09 01:33 AM, ID: 25021176Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091021-EE-VQP-81 - Hierarchy / EE_QW_3_20080625