Hello everyone,
I'm new at CSS and basically I want to create elements within elements with the proper positioning, this page I'm working on looks the way I want it to, but I think the CSS is wrong. For instance the text "This is content" is centered and I want that to be aligned to the left and only certain things centered. Next thing is I want to have the page start with a defined height, however as the content grows, I would like the left right and middle columns to all grow at the same time with the content, can you do that in CSS? Here is the URL: http://www.ecommphppro.com/rukusradio
Here is the CSS:
Here is the HTML code:
I don't know if I'm over thinking things but it appears that I really don't understand positioning
I'm new at CSS and basically I want to create elements within elements with the proper positioning, this page I'm working on looks the way I want it to, but I think the CSS is wrong. For instance the text "This is content" is centered and I want that to be aligned to the left and only certain things centered. Next thing is I want to have the page start with a defined height, however as the content grows, I would like the left right and middle columns to all grow at the same time with the content, can you do that in CSS? Here is the URL: http://www.ecommphppro.com/rukusradio
Here is the CSS:
Code:
body {
position:relative;
background-color:#000000;
margin-top:0px;
margin-left:0px;
}
#container {
position:relative;
width:1024px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
#header {
position:relative;
width:1024px;
height:180px;
background:#000000;
background-image:url('images/headerbkg.jpg');
background-repeat:no-repeat;
background-position:top left;
}
#rukus3dlogo {
position:relative;
z-index:9999;
left:0px;
top:0px;
}
#rukuslogo {
position:relative;
z-index:9999;
left:700px;
height:180px;
top:-225px;
background-color:#000000;
}
#leftcolumn {
float:left;
width:271px;
height:1280px;
background-color:#000000;
background-image:url('images/sidebkg.jpg');
background-repeat:repeat-x;
}
#middlecolumn {
position:relative;
text-align:left;
z-index:1;
background-color:#ffffff;
left:190px;
width:650px;
height:1280px;
}
#rightcolumn {
z-index:0;
position:relative;
float:right;
top:-1280px;
width:271px;
height:1280px;
background-color:#000000;
background-image:url('images/sidebkg.jpg');
background-repeat:repeat-x;
}
#menubar {
z-index:2;
width:1024px;
height:50px;
background-image:url('images/mnubarbkg.jpg');
background-repeat:repeat-x;
box-shadow:5px; 5px; 5px; #000000;
}
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="container">
<div id="header">
<div id="rukus3dlogo">
<img src="images/rukus3dlogo.png">
</div>
<div id="rukuslogo">
<img src="images/rukuslogo.jpg">
</div>
</div>
<div id="menubar">
</div>
<div id="leftcolumn">
</div>
<div id="middlecolumn">
This is content
</div>
<div id="rightcolumn">
</div>
</div>
</body>
Comment