PDA

Click to See Complete Forum and Search --> : CSS Layout Help

nodaa90
04-24-2005, 05:36 PM
http://www.sureo.com/template2.php

thats my start of the css version.

the style sheet is right in there.

as you can see, im having some serious problems.

the goal is to get to here

http://www.sureo/template.php

couple of questions, how do i get all the middle boxes to stretch out to the lenghth of the longest box?

how come the out side box (frame or border i called it), is supposed to wrap around all of the other boxes, but as u can see the bluish border only wrapped around the header...

REALLY need help...im converting over to css from tables due to popular demand

also, how come even though my page width is 780px, it only fits if i make the pixels or percents to add up just under 780... look at my css to see what i mean...
TomDenver
04-24-2005, 08:20 PM
A few things wrong with your code. Unfortunately there is no vertical-align property in CSS, so I deleted all those references from your code. Also, margin:0 auto; is identical to margin-left:auto; margin-right:auto; (assuming you want 0 top/bottom margin). so I shortened that for you. And, you didn't need background-attachment lines in your code. Also, sometimes you had a background-color and then background-image on the same ID. You can shorten that by doing background:#color url(image.jpg);. I've heard using quotes in the image path is bad for some browsers (IE5/Mac I think), so I removed those. You had assigned text-align:left; to many of the IDs. This can be inherited from a parent element, so only have to define it once and let children inherit it. However, the page was not centered in IE5 (it doesn't understand margin:0 auto; ), so I added text-align:center; to the body, then text-align:left; to the first child div and let the rest inherit that left align. Finally, the thing that was causing your border problem was that your footer did not clear the floats (clear:both; ), so I added that and removed the float line from the footer since it didn't need to be floated.

Here is the resulting code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>The Clans Guild</title>
<style type='text/css'>
body {
text-align:center;
background:#E5E5E5 url(./images/bgmain.png);}
#border {
margin:0 auto;
width:780px;
text-align:left;
border:1px solid #98AAB1;}
#header {
height:105px;
background-image:url(./images/hdmain.png)}
#menu_l {
float:left;
width:133px;
background:#EFEFEF;
border-right:1px solid #98AAB1;}
#middle {
float:left;
width:512px;
background:#EFEFEF;}
#menu_r {
float:right;
width:133px;
background:#EFEFEF;
border-left:1px solid #98AAB1;}
#footer {
clear:both;
height:75px;
background:url(./images/bgfooter.png);}
</style>
<link rel="StyleSheet" href="nonerightnow" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body class="mainpg">
<div id="border">
<div id="header"></div>
<div id="menu_r">hi</div>
<div id="menu_l">menu header<br />menu item<br /></div>
<div id="middle">hi</div>
<div id="footer"></div>
</div>
</body>
</html>
TomDenver
04-24-2005, 08:24 PM
I forgot to answer your question about getting the middle column to stretch to the height of the longest column. That's another drawback of CSS vs. tables. There's no easy way to accomplish that. Though you may want to look at using faux columns, detailed in this ALA article:

http://www.alistapart.com/articles/fauxcolumns/
LiLcRaZyFuZzY
04-24-2005, 09:03 PM
here is what i have been working with, hmm... just saw TomDenver answered your questions...hmm....
will post that anyway, might help you.
good luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Clans Guild</title>
<style type="text/css">
<!--
body {
text-align:center;
background:#E5E5E5 url(bgmain.png);
}
#border {
margin:0 auto;
width:780px;
text-align:left;
border:1px solid #98AAB1;
background:#EFEFEF;
}
#header {
height:105px;
background-image:url(hdmain.png);
}
#menu_l {
float:left;
width:125px;

}
#menu_l h5, #menu_r h5{
font-weight: normal;
font-family: verdana, sans;
margin: 0;
text-align: center;
background: url('hdmenu.png') repeat-x top left;
}
#middle {
float:left;
width:528px;

/*if height < 160px let this, else you can get rid of it as the center column will grow with the content*/
height: 160px;

border-left:1px solid #98AAB1;
border-right:1px solid #98AAB1;
}
#middle p{

}
#menu_r {
float:right;
width:125px;
}
#footer {
clear:both;
height:75px;
background:url(bgfooter.png);
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="border">
<div id="header"></div>

<div id="menu_l">
<h5>Menu</h5>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h5>Clans</h5>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div id="middle">
<p>Center</p>
</div>
<div id="menu_r">
<h5>Adsense</h5>
</div>
<div id="footer"></div>
</div>

</body>
</html>
nodaa90
04-25-2005, 09:44 PM
so what suggestions do people have for how to have the 3 center cells somewhat balanced in terms of lenght... should i predefine a height for them, theres NO WAY to get them automatically the same length?...
TomDenver
04-25-2005, 10:01 PM
Did you read the article on Faux Columns that I linked? That's probably the best solution for your problem.
nodaa90
04-26-2005, 05:08 PM
ok, well i did it (havnt put it online yet), by making a background image for the parent div! it works great!