Site design help

Tips on how to design a page.

[meanweaver]

I am building a site for a friend, but i need some advice on the best way to do this design.

The index page is to be just his logo a small amount of text and five links to the other pages, the plan is to have this in the middle of the page in a rounded rectangle, so thats the easy bit, the main page background is going to be blue, but we want it to fade slowly into the content which will be on a white background, so it will look like a misted up window with the middle wiped clean.
Should i create one big image with the border fading from blue on the outside to the white in the middle and then postion this absolute behind a table, it will have to be about 425px wide and at least as high, or try to create a border round the table with cells and drop in a background image for them plus one's for the 4 corners.
These are the only 2 ways i can think of, for the 1st one my worry is the size of the image in kb and if in the future he wants more content added then the image may not be big enough, and the 2nd one i'm not to good with graphics for them corner images (but that should be good practice).
Does anyone have another way of doing this or should i stick with one of the above ways, all advice is very welcome.

Regards Ian

[MichaelBluejay]

Maybe you could post a link to some sample pages so it's easier to visualize what you're talking about? Make sure there's no content on the page and that everything is "Example Business" and "Widget Products" or they won't let you post it here.

You can have an image as the last thing on the page but use CSS to tell it to position itself at the top, but this probably doesn't help you much since I don't really understand what you're trying to do.

<IMG SRC="file.gif" style="position:absolute; top:0; left:0">

[meanweaver]

I dont think i am able to post a link to the page at all, the page itself has no content but the rest of the domain does, but anyway i have kind of sorted the problem but created another, i now have a table 3 cols by 3 rows, so i have a cell surrounded by other cells, I have a gradient image dropped into these outer cells, however i have a problem with the tileing, the background image on these outside cells is 50px by 50px, but they are not tiling smothly, there is a 1px line between the images.
Not sure if i am making to much sence here so i will sticky you the url.

Regards Ian

[VectorJ]

The table with the corner images seems like the best way to go; that way the table can expand to make room for more content. As for the rounded corners, here's a tip on how to create them: make a circle in your graphics program, then split the circle into halves, then split each half in half again. You end up with four rounded corners.

[VectorJ]

For the 1px line, you may need to either set border=0 in your img tag, or there could be a problem with the way you have your table cells coded. Be sure that the opening and closing td tags are right next to the images, with no space or return between them, like so:
<td><img src="image.png"></td>

not

<td>
<img src="image.png">
</td>

[meanweaver]

Thanks for replys, well i have added border=0 to my images tags but no luck, the tileing on the horizontal bits is fine its just the vertical cols, the corner image problem is more with the gradient, i need to get it to bend round 90 degrees, buts that's one for another thread, below is my table html.

Thanks again Ian

<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="75"><img src="images/tlfade.gif"></td>
<td background="images/tfade.gif"></td>
<td width="75" height="75"><img src="images/trfade.gif"></td>
</tr>
<tr>
<td background="images/lfade.gif" border="0"></td>
<td bgcolor="#FFFFFF"><h3><em>content content </em></h3>
<h3><em>content </em></h3>
<h3><em>content this area here is to be full of content but not to much</em></h3>
<p><em>content this area here is to be full of content but not to much</em></p>
<h3><em>content this area here is to be full of content but not to much</em></h3>
<p><em>content this area here is to be full of content but not to much</em></p>
<p>&nbsp;</p></td>
<td background="images/rfade.gif" border="0"></td>
</tr>
<tr>
<td width="75" height="75"><img src="images/blfade.gif"></td>
<td background="images/bfade.gif"></td>
<td width="75" height="75"><img src="images/brfade.gif"></td>
</tr>
</table>