Forum Moderators: not2easy
I'm experimenting with changing my site into a tableless design and replacing the tables with CSS. However I'm experiencing a bit of difficulty.
The way my site is designed is modular, and predominately PHP driven. Meaning that I keep the layout organized by placing content in blocks (ie, nav-panel, calendar, news, header etc...) This way, for each item I build a quick and simple HTML document, save it, then in my index.php file I create another instance of my PHP function to insert that object into the site.
The PHP function is as follows...
[b]<?php
function block($title, $content, $pageColumn, $skin)
{
include("./basefiles/skins/".$skin."/block.php");
}
?>[/b]So an example use would be
[b]<?php block("Main Menu","./widgetdirectory/menuMain.html","right","whiteDropShadow");?>[/b]
From this point, the Block function calls for the block.php file, which basically is just a 3 row 9 cell table, and inserts the block content into the center cell. The 8 outer cells have background images in them which basically creates a box around the content.
Now here's the kicker...I can't seem to figure out a way to build a 9 cell CSS table which can be intelligent enough to know how to resize the proper divs to accomodate the content. The corner cells don't resize because they're just 'Corner' images. Top Center and Bottom Center are no problem because they get width defined based on which column it's in. However the Center cell will vary in Height based on the content, and the Center Left and Center Right Cells don't resize with it, leaving breaks in my bounding block.
So unless somebody here can help me, or point me in the right direction to find the information I need, I've got a dilemma. Either Code for each and every instance of each block or module on my site which kills the efficient design I've built it around, or Drop the idea of CSS altogether and keep the regular tables format.
The whole issue would be SO much easier if IE supported the display: table property.
[alistapart.com...]
Unfortunately though it does mean that you have to load much larger images than you want.
Alternatively you could use the this code that i've used in the past, but it does rely on having a fixed width.
just apply your corner images to the #top_left, #top_right, #bottom_left, #bottom_right divs, yout top image top #top, and your bottom to bottom. For the side, create a fixed width image that will become the background for your entire width of the menu/container and set it to repeat aso it will fill down.
Whilst this does fly a little in the face of usability standards, as long as your sensible with your sizes it should work out ok for most people. Remember to use exact measurements for the cells though whilst keeping the text in relatives so that the user can resize them.
-------------
The Code
-------------
<html>
<head>
<title>side menubar example</title>
<style>
#wrapper
{
background : green;
border : 1px solid black;
width : 200px;
}
#top
{
background : pink;
border : 1px solid black;
margin : 0px;
height : 20px;
}
#top_left
{
float : left;
width: 20px;
height : 20px;
background : red;
border : 1px solid black;
}
#top_right
{
float : right;
width: 20px;
height : 20px;
background : red;
border : 1px solid black;
}
#middle
{
background : gray;
border : 1px solid black;
}
#bottom
{
background : pink;
border : 1px solid black;
margin : 0px;
height : 20px;
}
#bottom_left
{
float : left;
width: 20px;
height : 20px;
background : red;
border : 1px solid black;
}
#bottom_right
{
float : right;
width: 20px;
height : 20px;
background : red;
border : 1px solid black;
}
#main_content
{
background : yellow;
margin : 10px 30px 10px 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="top_left">
</div>
<div id="top_right">
</div>
</div>
<div id="middle">
<div id=main_content>
You're code would go in here
You're code would go in here
You're code would go in here
You're code would go in here
You're code would go in here
</div>
</div>
<div id="bottom">
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</div>
</div>
</body>
</html>
I was just stuck in the wrong mode of thinking, trying to build 9 seperate cells (well 10 if you count the wrapper). That'll work perfect, thanks.
<div id="wrapper">
<div id="top">
</div> <div id="middle">
<div id=main_content>
You're code would go in here
</div>
</div>
<div id="bottom">
</div>
</div>
Five frames is better than nine i think.
-----------------------------
Thinking in tabular form is a problem for most who have used layout tables, me included, I'm still getting my head around being able to overlap div elements. But it does seem worth it in the end.
Now if only you could load multiple background images with z-orders to a div, have proper full-parent height columns and declare variables in CSS I think I would be a happy engineer :).
