Help me switch to tableless design

Question

brcosmin 0 Newbie Poster

17 Years Ago

Hello, Robert is my name.
I am a junior designer and I am learning as I go, as most people do.
I have used only tables because they seem to render not so differently cross-browser like the div's do.

I have the example below, which shows of the kind of layout I am working with. I tried to make a div based layout like that one, but with little success. I am a total beginner with Divs and the way they are positioned, so please, if you take on this quest, give me some guidelines.

I would also be pleased to be guided into making this layout tableless, I am not trying to make anyone do my work. I am just overwhelmed of the way the divs are positioned.

So here goes, this is what I want to achieve using Doctype and ONLY Divs:

Code:

<html>
<head>
<style>
*, BODY, HTML { margin:0;padding:0;border:0 }
table {border:1px solid black;}
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' bgcolor='#e2e3ff' height='100%' width='100%'>
<tr>
<td height='150'>
<!--Header Divisons-->
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<td bgcolor='#ffa8b4' width='25%'>&nbsp;<td>
<td bgcolor='#fca8ff' width='50%'>&nbsp;<td>
<td bgcolor='#a8aeff' width='25%' align='right'>
<table bgcolor='#dddddd' width='200' height='50' cellpadding='0' cellspacing='0' border='0'>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
<td>
</tr>
</table>
</td>
<tr>
<td height="50">
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<!--Active Button -->
<td bgcolor='#a8fff4'>&nbsp;<td>
<td bgcolor='#55b6a9'>&nbsp;<td>
<td bgcolor='#16665c'>&nbsp;<td>
<!--Inactive Button -->
<td bgcolor='#8feb93'>&nbsp;<td>
<td bgcolor='#339537'>&nbsp;<td>
<td bgcolor='#136317'>&nbsp;<td>
</tr>
</table>
<td>
</tr>
<tr>
<td height='100%' bgcolor='#ffffff'>

<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<td bgcolor='#d18a64' width='25%'>&nbsp;<td>
<td bgcolor='#d1c364' width='50%'>&nbsp;<td>
<td bgcolor='#73d164' width='25%'>&nbsp;<td>
</tr>
</table>

<td>
</tr>
<tr>
<!--Footer Menu -->
<td height='50'>
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<!--Active Button -->
<td bgcolor='#a8fff4'>&nbsp;<td>
<td bgcolor='#55b6a9'>&nbsp;<td>
<td bgcolor='#16665c'>&nbsp;<td>
<!--Inactive Button -->
<td bgcolor='#8feb93'>&nbsp;<td>
<td bgcolor='#339537'>&nbsp;<td>
<td bgcolor='#136317'>&nbsp;<td>
</tr>
</table>
<td>
</tr>
<tr>
<td height='30' align='center' valign='top' bgcolor='#e0b379'>Footer Text<td>
</tr>
</table>
</body>
</html>

I am grateful to you already, for you've read this topic so far

Thanks,
Robert.

web-design

2 Contributors
1 Reply
71 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by igeek

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

igeek 0 Newbie Poster · Answer 1 · 2007-11-24T11:11:57+00:00

Hey Robert....

What I did for you was take your provided code and created a solution made of nothing other than DIVs and CSS. Here are the results:

solution.html

<!--
Author:	iGeek
Date:	11/23/07
-->

<html>

<head>
	<link rel="stylesheet" href="style.css" media="all"/>
</head>

<body>
	<div id="mainContainer">
   	  	<div id="header">
        	<div id="leftSubHeader">LEFT Header</div>
            <div id="centerSubHeader">CENTER Header</div>
         	<div id="rightSubHeader">
            	<div id="rightSubHeaderContainer">
           	  		<div id="topBar">1</div>
                    <div id="middleBar">2</div>
                    <div id="bottomBar">3</div>
                </div>
            </div>
            
       	</div>
       
       	<div id="content">
        	<div class="navBarContainer">
            	<div class="activeButton1">Btn1</div>
                <div class="activeButton2">Btn2</div>
                <div class="activeButton3">Btn3</div>
                <div class="inactiveButton1">Btn4</div>
                <div class="inactiveButton2">Btn5</div>
                <div class="inactiveButton3">Btn6</div>
            </div>
       		<div id="leftBar">LEFT BAR</div>
            <div id="center">CENTER</div>
            <div id="rightBar">RIGHT BAR</div>
            <div class="navBarContainer">
            	<div class="activeButton1">Btn1</div>
                <div class="activeButton2">Btn2</div>
                <div class="activeButton3">Btn3</div>
                <div class="inactiveButton1">Btn4</div>
                <div class="inactiveButton2">Btn5</div>
                <div class="inactiveButton3">Btn6</div>
            </div>
       	</div>
        
        <div id="footer">FOOTER</div>
    </div>
</body>

</html>

style.css

/*
"style.css"
AUTHOR:	iGeek
DATE:	11/23/07

Place this in the same folder/directory as the "solution.html" file!
*/

#mainContainer {
}

#header {
	width: 100%;
	height: 150px;
}

#leftSubHeader {
	width: 25%;
	height: 150px;
	float: left;
	background-color:#ffa8b4;
}

#centerSubHeader {
	width: 50%;
	height: 150px;
	float: left;
	background-color:#fca8ff;
}

#rightSubHeader {
	width: 25%;
	height: 150px;
	float: left;
	background-color:#a8aeff;
}

#rightSubHeaderContainer {
	width:250px;
	height:50px;
	float:right;
	margin: 50px 0px 50px 0px;
	background-color:#ddd;
}

div.navBarContainer {
	width:100%;
	float:left;
	height:50px;
}

div.activeButton1 {
	width:17%;
	height:50px;
	background-color:#a8fff4;
	float:left;
	text-align:center;
}
div.activeButton2 {
	width:17%;
	height:50px;
	background-color:#55b6a9;
	float:left;
	text-align:center;
}
div.activeButton3 {
	width:17%;
	height:50px;
	background-color:#16665c;
	float:left;
	text-align:center;
}
div.inactiveButton1 {
	width:17%;
	height:50px;
	background-color:#8feb93;
	float:left;
	text-align:center;
}
div.inactiveButton2 {
	width:16%;
	height:50px;
	background-color:#339537;
	float:left;
	text-align:center;
}	
div.inactiveButton3 {
	width:16%;
	height:50px;
	background-color:#136317;
	float:left;
	text-align:center;
}
#leftBar {
	width:25%;
	height:400px;
	background-color:#d18a64;
	float:left;
}

#center {
	width:50%;
	height:400px;
	background-color:#d1c364;
	float:left;
}

#rightBar {
	width:25%;
	height:400px;
	background-color:#73d164;
	float:left;
}

#footer {
	width:100%;
	height:50px;
	background-color:#e0b379;
	float:left;
	text-align:center;
}

This took just under an hour to do, so it's probably not perfect and the CSS can be optimized. Some things, like the navigation buttons, do not fit perfectly. Let me know how it works for you...

~Steve