Website Layout

  fourjays 17:47 27 Dec 2004

I want to make a basic layout, however I am having lots of problems trying to find a way to make the page layout, that a)looks good, b) doesn't go wrong everytime you make the slightest bit of editing, c) works with firefox. I want the layout to be:

A column on the left containing a logo, clock, news rss feed from my forums and google adverts.

A header across the top to put a menu in.

A footer across the bottom for any copyright info.

The main section between all this for the body text.

I have been playing around in Frontpage for several days now, trying to find a method which is easy, works easily, doesn't break/need resizing everytime I edit any text on the page and most of all works in IE and Firefox. My old website used frames, but those look very ugly (especially against a black background). I have been trying to use the layout tables in FP2003, but they just don't want to work for me. If one bit works, another bit stops working. Anyone got any suggestions for an easy way to make a layout work?

(PS: I have a VERY limited coding knowledge - I am better at modifiying existing code rather than working fro scratch - although I managed to do the colours via a CSS sheet today. :D)

  Forum Editor 18:27 27 Dec 2004

isd to enable shared borders for your pages fourjays, and you do that when in Navigation view in FrontPage. Select the border layout you want, and then select the option to apply the borders to all pages.

The way to stop stuff moving around in a no-frames site is to use tables for your content - then you can create a layout that you like and save it as a template before you start addiong content. Use the template for new pages, and add yopur content - that way all your pages will have a uniform look. Tables can be a little cantankerous until you learn how it all works and that's a question of trial and error I'm afraid. Why not come to this thread each time you hit a snag, and one of us will try to help you through it. That way you'll solve the problems as they arise, and it won't seem so daunting. It will work better if you could publish a url for us to look at - do you have a prototype site on the server yet?

  Forum Editor 18:29 27 Dec 2004

that you access the shared borders option from the format menu when in navigation view - which you get to via the 'View' menu.

  LeadingMNMs 18:52 27 Dec 2004

If you want to, you can do it with CSS, although sometimes IE ruins them somehow.

All you need is to define the 4 divisions (top, left, bottom and main for example) and then use positioning in the style sheet.

for example,





That will probably look quite confusing, and it remains to be seen if IE will like it. It doesn't matter whether you use pixels (px) or percentages (%) as long as you know which you want. You may also like to experiment with using 'fixed' rather than 'absolute' positioning, although IE doesn't support this.

  LeadingMNMs 18:55 27 Dec 2004

And if you go down the CSS route then you may need to start positioning in 3D if things start overlapping. To control what is sent to the 'front' or 'back' use the z-index attribute in the CSS, e.g:

#top{ position:absolute; left:0px; top:0px; height:??px; width:100%; z-index:2}

A division with a z-index of 2 will appear above a division with a value of 1, and so on.

Hope this helps

  fourjays 19:03 27 Dec 2004

I tried shared borders last night, and they didn't work in Firefox... tried them a few minutes ago, and they worked perfectly. LOL.

Ill upload what I have so far, for you to see, but it seems very buggy to me. None of the lines/borders or areas seem to be as I asked them to be when it is viewed via a browser. click here

I am starting to think that I have probably chosen a very tricky (and uneccessary) layout. Does anyone have any suggestions as to a better way to incorporate everything I need on the website into a layout?

Ill take you up on the offer of help via this forum. :D

  fourjays 19:08 27 Dec 2004

What would be a sensible resolution to use for a web page? I have been trying to use 1024x768, but have seen a lot of websites with a smaller resolution, that look just as good.

PS: The longer my web page gets, the worst the layout tables become to handle.

That CSS thing sound simple enough, but the fact that it doesn't work in IE properly worries me. I want to make a page compatible with IE and Firefox, as these seem to be the most used two nowadays.

  LeadingMNMs 19:16 27 Dec 2004

I would guess that the majority of people, especially users of your site would use a resolution of at least 1024x768, although most websites are normally designed to fit on a minimum of 800x600 screen.

I'm not sure what happens with the CSS. I've designed two sites and one displays fine, while the other one plays up. The major problem is that IE is very poor at following the guidelines, whereas pages displayed in Firefox, Opera and Netscape will normally look pratically identical. Another problem is that it is often required to be very specific about padding and margins, since if they are not specified browsers tend to default to a value, and hence pages can become distorted.

  Taran 19:31 27 Dec 2004

Opera has some very odd peuliarities with CSS, as do FireFox, Mozilla, IE and Safari on the Mac, to name but a few.

There isn't a single browser that consistently gets plain vanilla CSS right and the amount of browser-specific code hacks you have to do to get that consistency sometimes sends you cross-eyed and silly (that's my excsue anyway).

You think tables can get mangled by browsers ?

Try some complex CSS and watch the whole page come tumbling down around you - very depressing. Often the only way to combat this is to write a browser-specific CSS file and use a browser sniffer to identify the visitors browser and use the appriopriate CSS file. It all gets pretty messy at tmes and CSS is not necessarily the holy grail some would have you believe it to be.

I design to 1024x768 as my standard but try to ensure that collapsable, fluid designs can cope with 800x600.

I don't know of any mainstream web designer currently working to 800x600 as their standard for output.


  Taran 19:41 27 Dec 2004

What's wrong with a simple table ?

Paste this into a new FrontPage file in code view, between the <body> and </body> tags.

<div align="center">

<table border="1" width="770" id="table1" cellspacing="0" cellpadding="4">


<td colspan="2">Banner image</td>



<td width="140">Navigation</td>

<td>Site content</td>



<td colspan="2">Footer</td>




Go back to Design view and take a look. It gives you a simple centre aligned table with space for a banner image, footer area, navigation panel and main content area. Teh table is 770 pixels wide, so should fit into any 800x600 browser with ease and will look reasonable in higher resolutions too. Note that the width is fixed - you can set it to a percentage if you like, but try to get your head around controlling fixed layouts before you start wrestling with fluid layouts that resize in relation to your visitors screen resolution.

You can turn off the border on the table, or add colour to it, alter the cell alignment and so on by right clicking in the table or in a cell and selecting the Table or Cell options.

Once you're happy with the page, save it as a FrontPage template. After that, create your new site files using the File, New, More Templates menu. That ensures a uniform look and feel to any site.

Food for thought ?

  fourjays 19:52 27 Dec 2004

hmmmm. That simple one looks pretty good (almost like the shared borders option). Two questions though...

a) How could I get the left column to appear on top the the header and footer?

b) Would it cause any problems/confuse itself if I was adding tables inside the tables? (I have a 'league' table to go on one page.

Also (but completely off-topic), I used a CSS earlier to set all my web page colours, etc. It worked very well, except for one thing. I set the body attributes in the CSS for Tahoma 10pt #ffffcc, except the page itself compeltely ignored this and set the body to Tahoma 12pt #ffffcc. I had to set a custom one called .text and refer it to that for the main body. Is this normal in FP2003 or should it have done it as I set it?

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

Awful clip art from 1994 is being tweeted every hour by a bot

iPhone X vs Samsung Galaxy Note 8

Les meilleurs navigateurs internet 2017