CSS help please

J

JeffPell

n00b
Joined
Aug 24, 2005
Messages
49
I am have a small problem with my css design. I am very new to css and I have been reading tutorials on the web. I am trying to setup a main white center where my text and content will be placed and also have two different color backgrounds on the right and left to stretch to 100% of browsers depending on resolution size.

Can anyone look at the source here, http://www.ssgang.com/jya_index_css_test.asp , and tell me how to accomplish this?

Thanks in advance for any help.
 
i'll see what i can do...

EDIT: so wait, you want the sides to stretch but not the middle area to stretch?
 
ok, i think i got it the way you want it, i'm sending you a PM with the code and some explanations since you're just starting with css
 
Why not just post it instead of private messaging it? That way someone else can maybe learn something new.
 
well i guess i could....

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-size: 100%;
	font-family: Arial, Helvetica, Sans-Serif;
}

#left_background {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 20%;
	background: #013C80;
}

#middle_area {
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	background: #FFFFFF;
	height: 100%
}

#right_background {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 20%;
	background: #B6C7E2;
}

</style>

</head>


<body>

<!--
<div style="position:absolute; align:left; width:50%; height:100%; background-color:#013C80"></style>
<div style="position:absolute; width:660px; height:100%; background-color:#FFFFFF"></style>
<div style="position:absolute; align:right; width:50%; height:100%; background-color:#B6C7E2"></style>-->

<div id="left_background"></div>

<div id="middle_area">This is text, This is text, This is Text, This is text, This is text, This is Text</div>

<div id="right_background"></div>

</body>
</html>

his old code is in comment tags
 
The easiest thing to mimic that site is to create a centered, two column layout in CSS and make a background image of the gradient with a center horizontal positioning.
 
You must log in or register to reply here.
Back
Top