Page 1 of 1
table->div
Posted: Tue Dec 30, 2003 3:56 am
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
Posted: Tue Dec 30, 2003 8:21 am
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;
Still not working...
Posted: Tue Dec 30, 2003 10:42 am
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{
font-family:Euromode,sans-serif;
background-color:#3169B3;
color:#FFFFFF;
}
div.content{
width:740px;
display:inline;
}
div.menucontent{
width:150px;
display:inline;
}
div.pagecontent{
display:inline;
width:580px;
}
div.newstitle{
font-size:24px;
}
div.newsbody{
font-size:18px;
}
div.newsdate{
font-size:18px;
font-style:italic;
text-align:right;
}
div.news{
border-style:solid;
border-width:1px;
border-color:#000000;
width:600px;
margin:5px;
padding:5px;
}
menu.css:
div.menu{
background-color:#3169B3;
border-color:#000000;
border-style:solid;
border-width:1px;
width:150px;
text-align:center;
}
div.submenu{
background-color:#5189D3;
border-color:#000000;
border-style:solid;
border-width:1px;
width:150px;
text-align:right;
}
a.menu,a.submenu{
color:#FFFFFF;
text-decoration:none;
}
a.menu:hover,a.submenu:hover{
font-weight:bold;
}
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
?>
Posted: Tue Dec 30, 2003 10:59 am
by microthick
for div.menu and div.news try adding float: left; .
That might do the trick.
Posted: Tue Dec 30, 2003 12:51 pm
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.
Posted: Tue Dec 30, 2003 1:10 pm
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.