0

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.

2
Contributors
1
Reply
2
Views
10 Years
Discussion Span
Last Post by igeek
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.