Click to See Complete Forum and Search --> : Creating two tables for a site.


rdenisec
04-20-2007, 04:43 AM
I am working on a site and I need to create two tables side by side. One will have the menu and the next one will have the text with a scrolling view so that the two tables are the same length and fit the page at all times. The problem I am having is even though the second table has a scroll effect for longer text, the menu on the right alignment gets thrown off and they are not aligned properly anymore. Can someone show me how to create tables and make them stay the same size at all times or to make the menu stay in place no matter what is in the second menu? :confused:

Charles
04-20-2007, 07:31 AM
Tables are not intended for layout and they only cause problems when used that way. Hie yourself to the CSS forum (http://www.webdeveloper.com/forum/forumdisplay.php?f=7).

KDLA
04-20-2007, 07:35 AM
You don't need tables to do that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body {text-align: center;}
#wrapper {display: block; margin: 0 auto; width: 750px; padding: 0;text-align: left;}
#nav {float: left; display: block; width: 200px; height: 500px; }
#content {padding-left: 20px; display: block; overflow: scroll; height: 500px;}
</style>
</head>

<body>
<div id="wrapper">
<div id="nav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
</p>

</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
</p>
<p>
Sed eget lacus in massa fringilla feugiat. Vestibulum pharetra. Integer orci massa, commodo quis, consequat ac, sodales et, urna. Quisque ut libero et velit pharetra nonummy. Phasellus eget magna. In mauris mi, facilisis sed, placerat id, suscipit nec, elit. Fusce fermentum fermentum dui. Curabitur viverra pharetra velit. Fusce nec nisl vitae lacus placerat scelerisque. Integer sit amet ante vitae nisl ultricies ultrices. Quisque vitae dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer libero. Cras interdum dapibus magna. Curabitur id lorem. Quisque eget est. Proin dapibus arcu at ante. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla tempor purus.
</p>
<p>
Aliquam mollis nulla vel arcu. Quisque purus nibh, sodales at, molestie eget, vulputate vitae, orci. Suspendisse potenti. Nunc sit amet eros. In hac habitasse platea dictumst. Pellentesque ornare varius mauris. Pellentesque vitae ligula. Ut tincidunt nisi nec tortor. Donec pede sapien, elementum in, gravida eu, iaculis sit amet, nisi. In sem ipsum, rhoncus eget, laoreet non, tristique a, felis. Proin arcu est, tempor eget, euismod in, tempus vel, dolor. Nullam elementum, risus a congue tempor, tellus eros malesuada ligula, ac mollis elit nibh quis nulla. Etiam mattis congue nisi.
</p>

</div>
</div>
</body>
</html>


KDLA

rbudj
04-20-2007, 08:49 AM
post your code so we can look at it

Charles
04-20-2007, 09:06 AM
You don't need tables to do that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body {text-align: center;}
#wrapper {display: block; margin: 0 auto; width: 750px; padding: 0;text-align: left;}
#nav {float: left; display: block; width: 200px; height: 500px; }
#content {padding-left: 20px; display: block; overflow: scroll; height: 500px;}
</style>
</head>

<body>
<div id="wrapper">
<div id="nav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
</p>

</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada urna et ligula. Etiam feugiat imperdiet elit. Proin non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ornare lorem eu ligula. Nulla facilisi. In ullamcorper sodales neque. Nullam vestibulum velit ut sapien. Quisque lacus est, vulputate et, aliquet et, volutpat id, sapien. Vivamus porta. Duis urna dui, fringilla eu, scelerisque id, accumsan in, nisi. Proin sed eros. Praesent tempus risus sed leo. Quisque pulvinar consectetuer ante.
</p>
<p>
Sed eget lacus in massa fringilla feugiat. Vestibulum pharetra. Integer orci massa, commodo quis, consequat ac, sodales et, urna. Quisque ut libero et velit pharetra nonummy. Phasellus eget magna. In mauris mi, facilisis sed, placerat id, suscipit nec, elit. Fusce fermentum fermentum dui. Curabitur viverra pharetra velit. Fusce nec nisl vitae lacus placerat scelerisque. Integer sit amet ante vitae nisl ultricies ultrices. Quisque vitae dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer libero. Cras interdum dapibus magna. Curabitur id lorem. Quisque eget est. Proin dapibus arcu at ante. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla tempor purus.
</p>
<p>
Aliquam mollis nulla vel arcu. Quisque purus nibh, sodales at, molestie eget, vulputate vitae, orci. Suspendisse potenti. Nunc sit amet eros. In hac habitasse platea dictumst. Pellentesque ornare varius mauris. Pellentesque vitae ligula. Ut tincidunt nisi nec tortor. Donec pede sapien, elementum in, gravida eu, iaculis sit amet, nisi. In sem ipsum, rhoncus eget, laoreet non, tristique a, felis. Proin arcu est, tempor eget, euismod in, tempus vel, dolor. Nullam elementum, risus a congue tempor, tellus eros malesuada ligula, ac mollis elit nibh quis nulla. Etiam mattis congue nisi.
</p>

</div>
</div>
</body>
</html>


KDLAYou've incorrectly mixed HTML with XHTML. And worse, you're using the transitional DTD.

KDLA
04-20-2007, 09:08 AM
DOCTYPE edited -- cut and pasted wrong string into posting. Thanks for catching that, Charles.
TGIF!!!!!

Charles
04-20-2007, 09:14 AM
DOCTYPE edited -- cut and pasted wrong string into posting. Thanks for catching that, Charles.
TGIF!!!!!Now you've got a different, wrong DOCTYPE. Damn that XHTML!

KDLA
04-20-2007, 09:40 AM
Better? If not, I give up.

Charles
04-20-2007, 09:42 AM
Still wrong, use:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

KDLA
04-20-2007, 10:16 AM
OK -- Charles is the DOCTYPE God. :D

Actually, for anyone out there, here's a listing of DOCTYPES:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

And, if you're in a hurry or don't know about DOCTYPES, don't rely on Dreamweaver to give the correct one -- either appropriate format or correct syntax. :p

Refer to this article for more information: http://alistapart.com/stories/doctype/