User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 455,968 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,739 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 484 | Replies: 1
Reply
•
•
Join Date: Nov 2007
Posts: 1
Reputation: brcosmin is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
brcosmin brcosmin is offline Offline
Newbie Poster

Help Help me switch to tableless design

  #1  
Nov 22nd, 2007
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:

Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <style>
  4. *, BODY, HTML { margin:0;padding:0;border:0 }
  5. table {border:1px solid black;}
  6. </style>
  7. </head>
  8. <body>
  9. <table cellpadding='0' cellspacing='0' border='0' bgcolor='#e2e3ff' height='100%' width='100%'>
  10. <tr>
  11. <td height='150'>
  12. <!--Header Divisons-->
  13. <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
  14. <tr>
  15. <td bgcolor='#ffa8b4' width='25%'>&nbsp;<td>
  16. <td bgcolor='#fca8ff' width='50%'>&nbsp;<td>
  17. <td bgcolor='#a8aeff' width='25%' align='right'>
  18. <table bgcolor='#dddddd' width='200' height='50' cellpadding='0' cellspacing='0' border='0'>
  19. <tr><td>&nbsp;</td></tr>
  20. <tr><td>&nbsp;</td></tr>
  21. <tr><td>&nbsp;</td></tr>
  22. </table>
  23. <td>
  24. </tr>
  25. </table>
  26. </td>
  27. <tr>
  28. <td height="50">
  29. <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
  30. <tr>
  31. <!--Active Button -->
  32. <td bgcolor='#a8fff4'>&nbsp;<td>
  33. <td bgcolor='#55b6a9'>&nbsp;<td>
  34. <td bgcolor='#16665c'>&nbsp;<td>
  35. <!--Inactive Button -->
  36. <td bgcolor='#8feb93'>&nbsp;<td>
  37. <td bgcolor='#339537'>&nbsp;<td>
  38. <td bgcolor='#136317'>&nbsp;<td>
  39. </tr>
  40. </table>
  41. <td>
  42. </tr>
  43. <tr>
  44. <td height='100%' bgcolor='#ffffff'>
  45.  
  46. <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
  47. <tr>
  48. <td bgcolor='#d18a64' width='25%'>&nbsp;<td>
  49. <td bgcolor='#d1c364' width='50%'>&nbsp;<td>
  50. <td bgcolor='#73d164' width='25%'>&nbsp;<td>
  51. </tr>
  52. </table>
  53.  
  54. <td>
  55. </tr>
  56. <tr>
  57. <!--Footer Menu -->
  58. <td height='50'>
  59. <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
  60. <tr>
  61. <!--Active Button -->
  62. <td bgcolor='#a8fff4'>&nbsp;<td>
  63. <td bgcolor='#55b6a9'>&nbsp;<td>
  64. <td bgcolor='#16665c'>&nbsp;<td>
  65. <!--Inactive Button -->
  66. <td bgcolor='#8feb93'>&nbsp;<td>
  67. <td bgcolor='#339537'>&nbsp;<td>
  68. <td bgcolor='#136317'>&nbsp;<td>
  69. </tr>
  70. </table>
  71. <td>
  72. </tr>
  73. <tr>
  74. <td height='30' align='center' valign='top' bgcolor='#e0b379'>Footer Text<td>
  75. </tr>
  76. </table>
  77. </body>
  78. </html>

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

Thanks,
Robert.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Feb 2007
Posts: 3
Reputation: igeek is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
igeek's Avatar
igeek igeek is offline Offline
Newbie Poster

Solution Re: Help me switch to tableless design

  #2  
Nov 24th, 2007
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
Help with Code Tags
HTML Syntax (Toggle Plain Text) 
  1. <!--
  2. Author:	iGeek
  3. Date:	11/23/07
  4. -->
  5.  
  6. <html>
  7.  
  8. <head>
  9. 	<link rel="stylesheet" href="style.css" media="all"/>
  10. </head>
  11.  
  12. <body>
  13. 	<div id="mainContainer">
  14.    	  	<div id="header">
  15.         	<div id="leftSubHeader">LEFT Header</div>
  16.             <div id="centerSubHeader">CENTER Header</div>
  17.          	<div id="rightSubHeader">
  18.             	<div id="rightSubHeaderContainer">
  19.            	  		<div id="topBar">1</div>
  20.                     <div id="middleBar">2</div>
  21.                     <div id="bottomBar">3</div>
  22.                 </div>
  23.             </div>
  24.  
  25.        	</div>
  26.  
  27.        	<div id="content">
  28.         	<div class="navBarContainer">
  29.             	<div class="activeButton1">Btn1</div>
  30.                 <div class="activeButton2">Btn2</div>
  31.                 <div class="activeButton3">Btn3</div>
  32.                 <div class="inactiveButton1">Btn4</div>
  33.                 <div class="inactiveButton2">Btn5</div>
  34.                 <div class="inactiveButton3">Btn6</div>
  35.             </div>
  36.        		<div id="leftBar">LEFT BAR</div>
  37.             <div id="center">CENTER</div>
  38.             <div id="rightBar">RIGHT BAR</div>
  39.             <div class="navBarContainer">
  40.             	<div class="activeButton1">Btn1</div>
  41.                 <div class="activeButton2">Btn2</div>
  42.                 <div class="activeButton3">Btn3</div>
  43.                 <div class="inactiveButton1">Btn4</div>
  44.                 <div class="inactiveButton2">Btn5</div>
  45.                 <div class="inactiveButton3">Btn6</div>
  46.             </div>
  47.        	</div>
  48.  
  49.         <div id="footer">FOOTER</div>
  50.     </div>
  51. </body>
  52.  
  53. </html>


style.css
Help with Code Tags
CSS Syntax (Toggle Plain Text) 
  1. /*
  2. "style.css"
  3. AUTHOR:	iGeek
  4. DATE:	11/23/07
  5.  
  6. Place this in the same folder/directory as the "solution.html" file!
  7. */
  8.  
  9. #mainContainer {
  10. }
  11.  
  12. #header {
  13. 	width: 100%;
  14. 	height: 150px;
  15. }
  16.  
  17. #leftSubHeader {
  18. 	width: 25%;
  19. 	height: 150px;
  20. 	float: left;
  21. 	background-color:#ffa8b4;
  22. }
  23.  
  24. #centerSubHeader {
  25. 	width: 50%;
  26. 	height: 150px;
  27. 	float: left;
  28. 	background-color:#fca8ff;
  29. }
  30.  
  31. #rightSubHeader {
  32. 	width: 25%;
  33. 	height: 150px;
  34. 	float: left;
  35. 	background-color:#a8aeff;
  36. }
  37.  
  38. #rightSubHeaderContainer {
  39. 	width:250px;
  40. 	height:50px;
  41. 	float:right;
  42. 	margin: 50px 0px 50px 0px;
  43. 	background-color:#ddd;
  44. }
  45.  
  46. div.navBarContainer {
  47. 	width:100%;
  48. 	float:left;
  49. 	height:50px;
  50. }
  51.  
  52. div.activeButton1 {
  53. 	width:17%;
  54. 	height:50px;
  55. 	background-color:#a8fff4;
  56. 	float:left;
  57. 	text-align:center;
  58. }
  59. div.activeButton2 {
  60. 	width:17%;
  61. 	height:50px;
  62. 	background-color:#55b6a9;
  63. 	float:left;
  64. 	text-align:center;
  65. }
  66. div.activeButton3 {
  67. 	width:17%;
  68. 	height:50px;
  69. 	background-color:#16665c;
  70. 	float:left;
  71. 	text-align:center;
  72. }
  73. div.inactiveButton1 {
  74. 	width:17%;
  75. 	height:50px;
  76. 	background-color:#8feb93;
  77. 	float:left;
  78. 	text-align:center;
  79. }
  80. div.inactiveButton2 {
  81. 	width:16%;
  82. 	height:50px;
  83. 	background-color:#339537;
  84. 	float:left;
  85. 	text-align:center;
  86. }	
  87. div.inactiveButton3 {
  88. 	width:16%;
  89. 	height:50px;
  90. 	background-color:#136317;
  91. 	float:left;
  92. 	text-align:center;
  93. }
  94. #leftBar {
  95. 	width:25%;
  96. 	height:400px;
  97. 	background-color:#d18a64;
  98. 	float:left;
  99. }
  100.  
  101. #center {
  102. 	width:50%;
  103. 	height:400px;
  104. 	background-color:#d1c364;
  105. 	float:left;
  106. }
  107.  
  108. #rightBar {
  109. 	width:25%;
  110. 	height:400px;
  111. 	background-color:#73d164;
  112. 	float:left;
  113. }
  114.  
  115. #footer {
  116. 	width:100%;
  117. 	height:50px;
  118. 	background-color:#e0b379;
  119. 	float:left;
  120. 	text-align:center;
  121. }


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
I <3 Apple.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
code creative css database design development div dreamweaver firefox google checkout google checkout vat howto html html api illustrator javascript navigation news normalization photoshop print research survey symantec tables toread tutorials w3c web wysiwyg xml
Similar Threads
Other Threads in the HTML and CSS Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 9:10 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC