gpalmer711
IS-IT--Management
Hi All,
Over the last few weeks I have been trying to move our existing and new sites from using Tables to totally CSS based designs.
On the whole i've managed to do this without problems. However I'm now working on a site that was using nested tables.
The site basically comprises of a header row then a content row below it. The content row is split into two columns, Search on the left and main content on the right.
I can get the header row to show without problems, however the content row is giving me a real headache.
This image will show you the basic layout that I am trying to achieve. note The space between each element is not needed, I put it in this image for display purposes only.
The dark green section shows the containing Div, I then have the header in another div positioned absolutly within the containing div.
What I then have is another div which is contained within the main green div. Then two divs contained within them for the left and right sections. Finally the 5 colours on the right show the different sections I need. The pink and yellow are images that will go around the content panel for layout/aesthetic reasons, light green is the content section that needs to be fluid in height.
Is this possible with CSS? If so could someone please point me in the right direction?
Just so you can all laugh at me here is the code for the stylesheet and aspx page. I've been playing around with floats and absolute positioning the code below is at the absolute positioning stage. Which is of course aligning everything to the top of the page. While doing this I thought that the items might position to their containing element, I was obviously wrong!
Greg Palmer
Freeware Utilities for Windows Administrators.
Over the last few weeks I have been trying to move our existing and new sites from using Tables to totally CSS based designs.
On the whole i've managed to do this without problems. However I'm now working on a site that was using nested tables.
The site basically comprises of a header row then a content row below it. The content row is split into two columns, Search on the left and main content on the right.
I can get the header row to show without problems, however the content row is giving me a real headache.
This image will show you the basic layout that I am trying to achieve. note The space between each element is not needed, I put it in this image for display purposes only.
The dark green section shows the containing Div, I then have the header in another div positioned absolutly within the containing div.
What I then have is another div which is contained within the main green div. Then two divs contained within them for the left and right sections. Finally the 5 colours on the right show the different sections I need. The pink and yellow are images that will go around the content panel for layout/aesthetic reasons, light green is the content section that needs to be fluid in height.
Is this possible with CSS? If so could someone please point me in the right direction?
Just so you can all laugh at me here is the code for the stylesheet and aspx page. I've been playing around with floats and absolute positioning the code below is at the absolute positioning stage. Which is of course aligning everything to the top of the page. While doing this I thought that the items might position to their containing element, I was obviously wrong!
Code:
body
{
font-family:Arial Times New Roman;
padding: 0px;
margin: 0px;
background-color: #2f4303;
}
#container
{
position:absolute;
left:50%;
width: 900px;
margin-left: -450px;
}
/* This section deals with the header and nav buttons */
#header
{
width: 900px;
height: 140px;
left: 0px;
top:0px;
}
#title
{
width: 281px;
height: 140px;
float: left;
}
#homeButton
{
width: 154px;
height: 140px;
float: left;
}
#accountButton
{
width: 154px;
height: 140px;
float: left;
}
#infoButton
{
width: 154px;
height: 140px;
float: left;
}
#contactButton
{
width: 157px;
height: 140px;
float: left;
}
/* End of section for header and nav buttons */
/* ---- */
/* This section deals with the middle part of the page */
#pageMiddle
{
position: absolute;
width: 900px;
left: 0px;
top: 140px;
}
/* This section deals with the search map and and ads */
#leftMiddle
{
position:absolute;
left: 0px;
top: 0px;
width: 281px;
}
/* End of section that deals with search map and ads */
/* ----- */
/* This section deals with the main content panel */
#rightMiddle
{
position: absolute;
width: 619px;
top: 0px;
left: 281px;
}
#contentTop
{
position: absolute;
width: 619px;
height: 17px;
top: 0px;
left: 0px;
}
#contentLeft
{
position: absolute;
width: 10px;
overflow: auto;
background-image: url(images/template_08.jpg);
background-repeat: repeat-y;
left: 0px;
top: 17px;
}
#contentPanel
{
position: absolute;
width: 590px;
height: auto;
overflow: auto;
background-color: White;
left: 10px;
top: 17px;
}
#contentRight
{
position: absolute;
width: 17px;
overflow: auto;
background-image: url(images/template_10.jpg);
background-repeat: repeat-y;
left: 600px;
top: 17px;
}
#contentBottom
{
width: 619px;
height: 28px;
}
/* End of section that deals with main content panel */
/* ------ */
/* This section deals with the footer */
/* End of Footer Section */
Code:
<%@ Master Language="VB" CodeFile="MenuSite.master.vb" Inherits="MenuSite" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
<link href="searchforamenu.css" rel="stylesheet" type="text/css" />
<title>Search For a Menu</title>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">
<div id="title">
<img src="images/template_01.jpg" alt="Search for a menu - Title" /></div>
<div id="homeButton">
<img src="images/template_02.jpg" alt="Home Button" /></div>
<div id="accountButton">
<img src="images/template_03.jpg" alt="My Account Button" /></div>
<div id="infoButton">
<img src="images/template_04.jpg" alt="Site Information Button" /></div>
<div id="contactButton">
<img src="images/template_05.jpg" alt="Contact Us Button" /></div>
</div>
<div id="pagemiddle">
<div id="leftMiddle">
f</div>
<div id="rightMiddle">
<div id="contentTop">
<img src="images/template_07.jpg" alt="Content Panel Border" /></div>
<div id="contentLeft"> </div>
<div id="contentPanel">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder></div>
<div id="contentRight"> </div>
<div id="contentBottom">
<img src="images/template_16.jpg" alt="Content Panel Border" /></div>
</div>
</div>
</div>
</form>
</body>
</html>Greg Palmer
Freeware Utilities for Windows Administrators.