table->div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
aquila125
Forum Commoner
Posts: 96
Joined: Tue Dec 09, 2003 10:39 am
Location: Belgium

table->div

Post by aquila125 »

Hi there,


I've written some websites in the past, but without regarding to the XHTML standard too much.. Offcourse my code is a terrible mess.. Now I would like to redesign my site..

I've heard that ppl shouldn't use tables, but instead use divs, why is that?
And how do I place to divs next to eachother instead of the vertical placement?

tnx
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

Tables aren't really meant to be used for layout. In part this is an accessibility issue:

http://www.w3.org/TR/WCAG10/

Div's are block level elements ie a line break is implied after the element.

The display attribute can be useful to change block-level tags to inline and vice versa:

display:inline;
display:block;
User avatar
aquila125
Forum Commoner
Posts: 96
Joined: Tue Dec 09, 2003 10:39 am
Location: Belgium

Still not working...

Post by aquila125 »

This is the generated HTML file:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Mobiele School</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="include/mobileschool.css" />
	<link rel="stylesheet" type="text/css" href="include/menu.css" />
</head>
<body>
<center>
<div class="content">
	

<div id="menu" class="menucontent">	
		
	<div class="menu"><a href="#" class="menu">Algemene Info</a></div>
			
					<div class="submenu"><a href="#" class="submenu">Doelstellingen</a></div>
					<div class="submenu"><a href="#" class="submenu">Visie</a></div>
					<div class="submenu"><a href="#" class="submenu">Vrijwilligers</a></div>
					<div class="submenu"><a href="#" class="submenu">Medewerkers</a></div>
					<div class="submenu"><a href="#" class="submenu">Sitemap</a></div>
					<div class="submenu"><a href="#" class="submenu">Contact</a></div>
				
			
		
	<div class="menu"><a href="#" class="menu">Straatkinderen</a></div>
			
	</div>	<div class="pagecontent">
Nieuws<br>

<div class="news">
<div class="newstitle">title=Dit is een test</div>
<div class="newsbody">body=dit is een<br />
 testje</div>
<div class="newsdate">date=26-12-2003 16:45:28</div>
</div>
<div class="news">
<div class="newstitle">title=Dit is een test22</div>
<div class="newsbody">body=dit is een<br />
 testje222</div>
<div class="newsdate">date=26-12-2003 16:45:28</div>
</div>


</div> <!--pagecontent-->
</div> <!--content-->
</center>

</body></html>
And these are the CSS files:

Code: Select all

mobileschool.css

body&#123;
	font-family:Euromode,sans-serif;
	background-color:#3169B3;
	color:#FFFFFF;
&#125;
div.content&#123;
	width:740px;		
	display:inline;
&#125;
div.menucontent&#123;
	width:150px;
        display:inline;
&#125;
div.pagecontent&#123;
        display:inline;
	width:580px;	
&#125;
div.newstitle&#123;
	font-size:24px;
&#125;
div.newsbody&#123;
	font-size:18px;
&#125;
div.newsdate&#123;
	font-size:18px;
	font-style:italic;
	text-align:right;	
&#125;
div.news&#123;	
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	width:600px;
	margin:5px;		
	padding:5px;	
&#125;



menu.css:

div.menu&#123;
	background-color:#3169B3;
	border-color:#000000;
	border-style:solid;
	border-width:1px;
	width:150px;
	text-align:center;	
&#125;
div.submenu&#123;	
	background-color:#5189D3;
	border-color:#000000;
	border-style:solid;
	border-width:1px;
	width:150px;
	text-align:right;	
&#125;
a.menu,a.submenu&#123;
	color:#FFFFFF;
	text-decoration:none;
&#125;
a.menu:hover,a.submenu:hover&#123;
	font-weight:bold;
&#125;
I've added the display:inline tag to both of the divs that should be placed next to each other, but they are still displayed below the other
?>
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

for div.menu and div.news try adding float: left; .

That might do the trick.
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

Just to show it does work:

Code: Select all

<div>
block
</div>
<div>
block
</div>
<div style="display: inline; border: 2px solid #000;">
inline
</div>
<div style="display: inline;  border: 2px solid #000;">
inline
</div>
Sorry I'm rushing around getting packed up for a camping trip so don't have time to look at your code in detail.
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

PS: try reducing some widths. Display inline doesn't exactly tell the browser to line elements up, just that they should go with the flow - if there is no room to flow right an inline div will jump to a new line.
Post Reply