Making tables flow [Archive] - Lissa Explains it All: Web Design Forums

xtheunderdog

11-29-2004, 10:53 PM

http://www.underthehatdesigns.com/rumour/1/layout.png

That's the layout that I'm going to be putting together over the next few days. My problem is...how do I get the table to wrap down like that? I want it to start underneath the menu at the top in the corner and go down in the that larger area. I'm just not sure how to switch dimensions part way through and still have the information flow down correctly. As this website is mainly a blog, it needs to flow. Ideas?

MaGiCSuN

11-30-2004, 10:27 AM

ok this can do it. I played a bit with it and got this:

<html>
<head>
<title> your title here </title>
<style type="text/css">

</style>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0" width="700" background="layout.png" style="background-repeat: no-repeat;">
<tr><td valign="top" style="padding-right: 10px; padding-left: 10px; ">
<img src="top.jpg" align="left">
<span class="text"><br><p><br>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</span></td></tr></table>

</body>
</html>

you'll need the following images for it though (right click save as on your own harddrive please):

http://photobucket.com/albums/v447/magicalsun/top.jpg
http://photobucket.com/albums/v447/magicalsun/bg.jpg

and you have to have layout.png ready aswell, but you allready got that one ;) put the code above in a new notepad file and save as index.html
Make sure layout.png bg.jpg and top.jpg are into the same folder as the index.html file. Then preview in your browser :)

I saved the top and bg as .jpg but if you want them to be .png that's fine aswell. I just saved them like this to show you how i did it.

I assume you watn the link to be an image map. If so, i'm not sure if that wil work out will with the coding i provided. If not let me know, i'll try the best to fix it :)

Love,
Mirna

xtheunderdog

11-30-2004, 04:00 PM

thanks, but isn't that going to be just a table that goes straight down? i can code layouts fine, but my problem is i'm not sure how to make a table so that it changes width and position a little ways down and it can still flow. maybe tehre's something i'm missing in that code, but it seems to me like it's just a normal table.

MaGiCSuN

11-30-2004, 05:07 PM

the more text you add, the more the table goes down. :)

Love,
Mirna

xtheunderdog

11-30-2004, 09:27 PM

okay, i saw it, and while it works, i don't understand why or how. and i guess that's my problem, i could just use it and go on my merry way, but i like to understand things. i appreciate your help, but maybe you could help me further and explain how it manages to do that with that code?

edit: Also, what I planned on doing was setting up the pictures outside of the table via absolute positioning. In fact, I already had that done and the only thing I needed help with was the table, which i also would like to absolute position at the starting point and then have it flow down. or is it the image that helps it do what it's doing? sorry, if i'm not making sense.

MaGiCSuN

11-30-2004, 09:43 PM

yep it's the image that i cut out that does the text thing :)

if you take that image out you can see the text just fills the whole table. But because i said the image to be aligned to the left, the text goes around it. (kinda like in Word)
You can create this thing in another way, but then you would have to divide every text you use into two parts, the part that is next to the image and the part that is below the image.

What i did was this. I made a background of the scanlines and the two borders on the side. Then i set the layout.png file as a background in the table, and made it not go repeating through the whole table. Then i added inside the table the image and aligned that to the left, and typed the text after it.

In this way however the image map won't work, because the image is set as a background and backgrounds can't be an image map. So that's another thing to solve haha, but it's a start :) However if you still have the layout.png file and can edit it then you could remove the textlinks and just add regular links inside the table. That would be a solution.

There probably is an easier way. You maybe can aswell use a div instead of a table, i don't think that matters that much. The image is the thing that alignes the text around the image.

Love,
Mirna

empyrean

12-20-2004, 07:08 AM

I hope you don't mind me asking here as i share the same kind of problem

here's my blogsite : www.empyreanist.blogspot.com

My problem is...how could I make the text flow in the main blog cell without affecting the side columns/other slices? When I add text it stretches the whole thing...please help.