Click to See Complete Forum and Search --> : Need help with layout (please!!)


bluemoon562
07-08-2008, 03:41 PM
I am a newbie to CSS layouts and am attempting an ambitious project. At this point, I am raising my flag and begging for mercy and someone to assist me. :eek:

I am trying to convert a messy table site to CSS layout. This site is dynamic and uses PHP and Javascript.

Anyway, I am starting with a basic 770 px fixed-width 3-column layout with a header and footer.

My problem is with the middle section of the index page. Please refer to the diagram and see if you can figure out the best way to code this tricky layout.

I will insert a little table in a div that will be placed at the top of the middle box. (I understand tables are fine to use as long as it's not for layout.)

Then I want a picture below that (which will change dynamically with PHP code) and a few lines will go beneath the image.

The diagram will give you an idea of what I'm trying to accomplish.

Maybe I need to set the header, footer and sides as a fixed object and scroll the middle section ... ?

I really appreciate those who can help steer me in the right direction!!!!

Dragonkai
07-08-2008, 10:41 PM
You should try just starting from scratch. Converting is nasty work when it's too complicated.

bluemoon562
07-08-2008, 10:44 PM
I am starting from scratch and trying to figure out the best way to implement that layout.

I might have to stick with tables unless someone can offer me a solution for that layout in CSS.

Dragonkai
07-09-2008, 01:30 AM
What do you mean as a solution? I don't see a problem that has to be solved..? Just do the css, and you'll get it.

Unless what you're saying, is that you're asking for how to do it in css?

In that case, use divs, floats do it step by step. As for columns or footers, try looking at http://www.alistapart.com/articles/ "A list apart" articles, they deal with some of that stuff.

Oh and you're using floats, and if the background of the container of the floats are not coming down. use

overflow:auto

On your container, that will stretch the container's bg.

bluemoon562
07-09-2008, 01:38 AM
Right, I need help with the CSS coding.

As I posted previously, I started with a fixed width 3-column layout with a header and footer. I was fine until I got to the middle column and things started to break.

I don't know how to code it properly. I have been reading articles, including the site that you gave me the link to, but I'm turning blue in the face and the articles don't help enough. I need someone who is experienced in this to guide me with this page.

I don't know how to wrap the divs or floats the right way and am confused. That's the whole point of my post on here.

Centauri
07-09-2008, 07:19 AM
Well if you have made a start with a 3-column layout, post up the code you have so far (or link to it on a tempory site) and we can guide you from there.

bluemoon562
07-09-2008, 01:15 PM
<!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>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Test</title>

<link href='new-nav.css' rel='stylesheet' type='text/css' />
<link href='trp2.css' rel='stylesheet' type='text/css' />
</head>

<body class='thrColFixHdr'>

<div id='Nav'>
<a href='a.php' class='current'>1</a>
<a href='b.php' class='hoverlink'>2</a>
<a href='c.php' class='hoverlink'>3</a>
<a href='d.php' class='hoverlink'>4</a>
<a href='e.php' class='hoverlink'>5</a>
<a href='f.php' class='hoverlink'>6</a></div>
<div id='Sc'>
<form name='form' action='index.php' method='post' enctype='application/x-www-form-urlencoded'>
<table border='0' cellpadding='0' cellspacing='0'width='480'>
<tbody>
<tr class='formbknd'>
<td align='center' valign='middle' class='formbknd'>

<img src='images/down.gif' alt='down' width='21' height='25' />
<input type='hidden' name='picid' value='41' />
<input type='hidden' name='catid' value='0' />
<input type='hidden' name='node' value='-1' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='1' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='2' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='3' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='4' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='5' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='6' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='7' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='8' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='9' onclick='document.form.submit()' /></td>
<td width='24' align='center'>
<input type='radio' name='sc' value='10' onclick='document.form.submit()' /></td>
<td align='center' valign='middle'>
<img src='images/up.gif' alt='up' width='21' height='25' /></td>
</tr>
<tr class='formbknd'>
<td align='center' valign='middle' class='not'>&nbsp;</td>
<td align='center' valign='middle'><b>1</b></td>
<td align='center' valign='middle'><b>2</b></td>
<td align='center' valign='middle'><b>3</b></td>
<td align='center' valign='middle'><b>4</b></td>
<td align='center' valign='middle'><b>5</b></td>
<td align='center' valign='middle'><b>6</b></td>
<td align='center' valign='middle'><b>7</b></td>
<td align='center' valign='middle'><b>8</b></td>
<td align='center' valign='middle'><b>9</b></td>
<td align='center' valign='middle'><b>10</b></td>
<td align='center' valign='middle' class='very'>&nbsp;</td>
</tr>
<tr valign='middle'>
<td height='24' colspan='12' align='center' class='top-dotted-line'>
<div align='center'></div></td>
</tr>
</tbody>
</table>
</form>
<td align='center' colspan='2'>
<form name='formCat' action='index.php' method='post'>
<table border='0' cellspacing='2' align='center'>
<tr valign='middle'>
<td width='53' align='right' class='little-text'><p>DropdownMenu</p>
<p>&nbsp;</p></td>
<td></td>
<td width='18'>
<input type='hidden' name='catid' value='0' />
<input type='hidden' name='node' value='-1' />&nbsp;</td>
</tr>
</table>
</form></td></div>
<div id='Image'><img src='images/img.gif' width='515' height='343' alt='big' /></div>
<div id='Select'></div>
<div id='container'>
<div id='header'><a href=''><img src='logo-new.png' alt='logo' border='0' /></a><!-- end #header --></div>
<div id='sidebar1'>
<h3><img src='images/img.gif' alt='little' width='150' height='342' /></h3>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut </p>
<!-- end #sidebar1 --></div>
<div id='sidebar2'>
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<!-- end #sidebar2 -->
</p>
</div>
<div id='mainContent'>
<p align='center'>&nbsp;</p>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<div id='footer'>
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#container {
width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
#Sc {
position:absolute;
left:245px;
top:114px;
width:476px;
height:175px;
z-index:2;
visibility: visible;
}
#Nav {
position:absolute;
left:461px;
top:20px;
width:412px;
height:34px;
z-index:1;
text-align: left;
visibility: visible;
}
#Image {
position:absolute;
left:246px;
top:310px;
width:479px;
height:281px;
z-index:3;
visibility: visible;
}
#header {
background: #FFFFFF;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 170px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
#sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 120px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
#mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clear { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Thanks!

Dragonkai
07-09-2008, 10:39 PM
You are using tables right now.

Start with two columns using css and html alone.

Then we'll go from there to 3rd column.

bluemoon562
07-09-2008, 10:58 PM
I'm mostly using CSS layout. (Or trying to.)

For a section of the middle section, I embedded a little table in a div because the table is the easiest method to handle that section of the page, which is a complicated grid. I could use a definition list for the grid instead.

So, that is a small part of the page and is way too complex to be done with CSS.

I'm wondering if anyone here is able to whip up a sample layout based on the diagram that I posted.

bluemoon562
07-11-2008, 01:40 AM
I studied similar sites and noticed that they use a combination of a table and CSS layout and I decided to do the same.

The layout is too complex to do entirely in CSS. Maybe some day when I'm an expert at CSS layouts, I can figure out a way to lay it out in pure CSS.

Centauri
07-11-2008, 03:00 AM
No layout is too complex for css.

Biggest problem with what you have so far is the content is not within the #mainContent div where it should be, and the unnecessary use of absolute positioning - let things stack naturally. Similarly, the top navigation (which should be an unordered list of links) should be contained within the #header div, and floated to the right.

Not sure what the form stuff is supposed to be doing, but there shouldn't be a need for any tables in there. The #mainContent div should just contain the two forms followed by the image, all without specific positioning.

The footer also needs to have the "clear" property set to "both" to clear the floats and allow the footer to be at the bottom.

bluemoon562
07-12-2008, 09:38 AM
I will try this again and see if I can do this, taking your suggestions into account.

I guess I should let everything float and not use any absolute cells.

I might still use a small table in a div for the complicated grid which has two images on either side and then two rows of 10 columns that should be pretty tightly together.

I guess I could create a wrapper and float those objects but it hurts my brain to think of how to accomplish it.