View Full Version : Complex Table

10-23-2006, 01:57 PM
I want to convert this "complex" table to div/CSS, but cant find any good tutorials or help.

<table align="center">
<td colspan="3">Here</td>
<td rowspan="2">Mainmenu</td>
<td colspan="3">Picture</td>
<td colspan="2">Mainarea</td>
<td colspan="4">Footer</td>

10-24-2006, 08:46 AM
Without any additional info it's hard to say anything conclusive, but it seems like a number of current CSS layout techniques can be combined to achieve such a layout; there will primarily be a lot of floating going on.
You could take a look at some of the layouts described in BonRouge's CSS layouts (http://bonrouge.com/3c-hf-fluid-lc.php) and take it from there.

Could you indicate with a little more detail what the various sections are going to be used for, and what sort of dimensions you expect them to take on?

10-24-2006, 11:36 AM
on http://samarbeidsutvikling.no/ss is the page i want to change.

10-24-2006, 12:32 PM
Or maybe there is an entyerly differet and better way of coding that layout. The pictures dont have to be cut up in pices. That big picture of the two cyclist might be one large on...

Idealy the code should be as flexible as possible, so that i can cange the layout only by editing css. But it has to have these areas in their own div (editable by CMS system): Left and right meny, Topmenu, main content area, footer, mainpicture, mainlogo.

Maybe this is easyest with possition: absolute??!?!

Because that crappy webhotel/e-commerce company i have to use, doesent allow us to cange the HTML by ourself, only the css document. THEY have to put the html in the code.

im working on: http://samarbeidsutvikling.no/ss/new but i think it is a bad solution... but flexible.

10-24-2006, 05:53 PM

Don't know about the images, but a barebones layout of the page would be as follows. You would have to separate the CSS from the html for your site, though:


<style type="text/css">
body {width: 100%; margin: 0 px; border: 0px;}

div#content {float: left; width: 100%; margin: 5px;}
div#header {float: left; width: 100%; height: 70px; border-bottom: 1px solid;}
div#searchbar {float:left; width 100%; height: 40px; background: url("searchbarimage.jpg");}
div#imagebar {float:left; clear:right; width: 100%; height: 200px;}
div#menyher {float:left; clear:right; width: 25%; height: 25px; background: img: blueimage.jpg; border: 1px solid;}
div#photo {margin-left: 25%; width: 75%; height:150px; border:1px solid; background: url ("myimage.jpg");}
div#hovedomrade {float: left; margin-left: 25%; width: 100%; height: 25px; }
div#address {float: left; width: 100%; height: 15px; border: 1px solid;}
div#mainpane {float: left; width: 100%;}

<div id="content">

<div id= "header">
<img src="companyname.jpg" height="70px" width="50%" alt= "header">
<div id= "searchbar">
The search engine, topmenu come here, The search engine, topmenu come here, The search engine, topmenu come here,

<div id="imagebar">

<div id="menyher">

<div id="photo">
Here's where the photo comes

<div id="hovedomrade">

<div id="address">
The address and navbar come here

<div id="mainpane">
Main pane content comes here


Have fun!