PDA

View Full Version : Layout


ace0
April 17th, 2001, 20:43
How can you get 2 columns down both sides of a webpage? (in color) There would be white in the middle.
meow
April 17th, 2001, 21:29
The easy way - use a table.
One row with three cells. Background color in the left and right cell. If you want it to stretch to fit all screens you can use width="100%" in table, set the left and right cell to a fixed width in pixels (if you like) and leave the middle cell without any width.
Want to lose the margins - use a small snip of CSS.

Just to give you something to play around with. You may need to fill the cells up with some bla-bla or they might collapse. ;)

***********************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Three cell layout</title>
<style type="text/css">
<!--
body { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left:0 }
-->
</style>
</head>


<body>

<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td bgcolor="#3366FF" width="130">
left cell
</td>
<td>
middle cell
</td>
<td bgcolor="#3366FF" width="130">
right cell
</td></tr></table>

</body>
</html>



[Edited by meow on 04-17-2001 at 09:31 PM]
lucifer
April 18th, 2001, 10:17
you could be really wild and use a frameset ...

... but someone might shoot you ;)
ace0
April 18th, 2001, 12:35
ok, thanks
ace0
April 18th, 2001, 12:37
do I just copy it over and over? (to lengthen it)
meow
April 18th, 2001, 13:00
To get the table higher? No-no-no-no-no! *lol* :p

It's like a rubber ribbon thing. You fill it and it expands. Copy some text into each cell an you see how it works. If you want it higher than you have content for you can use a couple of <BR> or a transparent gif. (Make an 1 by 1 pixel pic, make it transparent and stretch it to whatever with the size attributes in the IMG tag.)

Also alter the values for border, cellpadding and cellspacing and see what happens (pixels, like cellpadding="5")

FYI you can use exact or relative sizes just about everywhere in a table. Lots of people prefer to make them fixed size. If you want it to fit a 640*480 screen, make it 600 (margins take 40). It's all about preferences and how old or odd equipment you want to accommodate. I prefer re sizeable if there is any amount of text that can float and fill things out. If it's mainly graphic, fixed size may be better.

Hope this makes any sense to you.

BTW, the ripped of Joe Barta's table tutorial ain't bad. I think the whole thing is still free. :D
http://www.pagetutor.com/pagetutor/tables/index.html
ace0
April 18th, 2001, 13:10
oh, ok, I think I get it...thanks.
ace0
April 19th, 2001, 21:34
how come the middle and right cell words don't line up with like the first one on top of the left cell?
LeX
April 21st, 2001, 01:10
You have to add attributes to the tags.
If you want to line everything up at the top, middle or bottom, use <TD valign="top"> and replace top with middle or bottom for.. well, you know what.
If you want to line everything from the left, center or right, use <TD align="center"> and replace center with right or left.

Get the idea?
bigperm
April 22nd, 2001, 21:53
Thanks a bunch LeX, I know it seems simple, but that is exaclty what I was looking for. I am going to be using that as the template for all of my pages, except I am going to link the td attributes to an external style sheet for easier updating.

Thanks again.
ace0
May 19th, 2001, 22:20
I have another problem...I am trying to put something in the middle (news) from another site (plug in), and it pushes the words on the left down a little...I tried everything you said...it works with just plain words...
meow
May 20th, 2001, 22:36
It's impossible to say without seeing the code. But it sounds peculiar that something you put in the middle cell pushes the words in the left cell DOWNWARDS. If the "thing" is too wide it would rather shrink the whole left (and right) cell(s), pushing them to the sides. Have you lost some closing tags maybe? Dunno - you have to show if anyone shall be able to help.
keith
May 20th, 2001, 22:51
don't use frames. frames are the devil.
zazoo
May 20th, 2001, 23:40
Originally posted by keith
don't use frames. frames are the devil.

huh? I love frames webpages would look horrible without them

anyway to solve that pusing down problem i think using <caption>news</caption> would solve your problem but im not apsalutly sure whats going wronge so its hard to say
meow
May 21st, 2001, 00:04
Oops, there was an URL. But I don't understand. I see the news thing but what words are you referring to and where should they be?
BTW your page crashes my IE. Taken our of the frames it works. You have some JavaScript there, guess it's that.
ace0
May 21st, 2001, 21:04
Originally posted by meow
Oops, there was an URL. But I don't understand. I see the news thing but what words are you referring to and where should they be?
BTW your page crashes my IE. Taken our of the frames it works. You have some JavaScript there, guess it's that.

if you're talking to me, the page isn't on the internet yet...in my hard drive...I will show you the code this weekend...too busy with school
meow
May 21st, 2001, 21:11
Yes. Someone else commented on the code so I assumed the url in your sig was the one. Sorry to bother you when you are so busy. ;)
ace0
May 25th, 2001, 19:48
Never mind...I got it;)