News:

Tekforums.net - The improved home of Tekforums! :D

Main Menu

Centering website

Started by DEViANCE, June 21, 2011, 08:20:46 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

DEViANCE

I'm making a website using dreamweaver and when I view the page it is left aligned in the browser. How do i get it to sit in the center of the browser? Cheers rob. Written on crap phone.

Clock'd 0Ne

I've not really used Dreamweaver but the way it should be done is to set left and right margins to auto on your main areas like header, content, etc.

neXus

Quote from: DEViANCE on June 21, 2011, 08:20:46 AM
I'm making a website using dreamweaver and when I view the page it is left aligned in the browser. How do i get it to sit in the center of the browser? Cheers rob. Written on crap phone.

All depends on the layout to be honest.

The basics for centring a site is:

HTML:
<div id="maincontainer>
SITE HTML HERE
</div>


CSS:
#maincontainer { width:960px; margin:0 auto; }

The margin auto and width is the key. 960 is the width to consider most modern displays etc. 980px with 10 pixels left and right.

Clock'd 0Ne

Personally I'd use 980px minimum as I bloody hate narrow sites unless its a really simple 'brochure' type site, when you work at 1920x1200 its a disgusting waste of space. At a stretch you can go to 1002px which will fill a 1024x768 display, really anyone that is using less than that these days is probably not worth worrying about.

DEViANCE

Cheers for the advice. I'll try the auto margin thing.        I set mine to 800px but now I think about it it is well to small ok for the 90's maybe.  Sent from crap phone.

neXus

Quote from: Clock'd 0Ne on June 21, 2011, 10:06:36 AM
Personally I'd use 980px minimum as I bloody hate narrow sites unless its a really simple 'brochure' type site, when you work at 1920x1200 its a disgusting waste of space. At a stretch you can go to 1002px which will fill a 1024x768 display, really anyone that is using less than that these days is probably not worth worrying about.
960px is your 980 mate. Sites I show you do not look small do they? :P

960px with 10px either side is the 980px. 99% of your grid systems are 960px content. Some people who do not get it will do 960px and 10px either side to get 940px which is heading to small of course but I do not do that :)

Clock'd 0Ne

Nah, it's sites with two sidebars that really suffer from it if not treated carefully.

neXus

Quote from: Clock'd 0Ne on June 21, 2011, 11:48:53 AM
Nah, it's sites with two sidebars that really suffer from it if not treated carefully.

Nothing is final bar say the logo and top bar, maybe video. Working on menu and content layout and more. Background may even change as this is all early days yet...



I blanked out content as its a mess but it is all very spacious as that was one of the requirements. Two column overall and like home page 3 with two column inner content in the main content block. Done right its fine. A lot of the preview demos on the first page of 960 grid site as well show good spacious designs.

We have done 1000k on some sites and 980 on some etc but we have had complaints from people viewing still about them. With the google viewing window stats it is very much 960 by 700 pixels main viewing area. But yeah, nothing stopping you doing 980 as you said Nige.

Clock'd 0Ne

If you're getting complaints about those sizes you just know its because its in NZ and they haven't heard of TFTs yet  ;D ;)

neXus

Quote from: Clock'd 0Ne on June 21, 2011, 14:17:34 PM
If you're getting complaints about those sizes you just know its because its in NZ and they haven't heard of TFTs yet  ;D ;)
LOL.
One was OZ so you can include them too then :P

DEViANCE

#10
can't find any where in dreamweaver to set the margin to auto, in the page properties they seem to need numbers.

I don't know where to put the code manually either. does it make any difference that I have made made a 3row table on the page?

I've uploaded it here if you need to see it to help me(i know it is crap it is a work in progress)
http://www.robdav.nildram.co.uk/site/Untitled-3.htm

Clock'd 0Ne

It's exactly the same process for tables, set the table properties to have "margin: 0 auto;" in the CSS/styles, I'd also set border="0" or border: 0; in the CSS unless you want the ugly 90's website look :)

NeXus will be along shortly to tell you not to use tables but I think  you are struggling enough as is and if you're trying to get to grips just do it this way. In the source, it should look like:

<body>
<table width="806" height="690" border="1" style="margin: 0 auto;">

DEViANCE

#12
Thanks alot that has worked perfectly. I've also widened it to 980px and it does fill the screen much better, just need to adjust my header and footer now.
http://www.robdav.nildram.co.uk/site/Untitled-3.htm

edit: header and footer done.

any tips on the page layout so far? (I know there isnt much to it at the mo)
The plan is to have the bullet points as links that take you to an almost completely different site that is taylored towards the type of customer I get for each type of work (domestic is very friendly, commercial/industrial abit more serious, CCTV very slick and sharp, energy efficency abit green and hippy esque etc), on those pages will be contact details, a form that they can enter their details and it emails me so I can call them, some pictures of my work and a bit of a write up.

Clock'd 0Ne

IMO I'd try and keep it quite thematic and maybe just change the colour scheme depending on the section they arrive in? You don't want it to be too different or people are going to wonder what type of operation you are and whether they are getting a professional outfit or some kind of ad-hoc.

This is quite an old client site from a few years back so is a little outdated but its the same principles in operation for their three main sections: http://www.e-volution-training.co.uk/

I'd steer away from the bullet points idea and have some proper tabs along the top or photo/image buttons that stand out quite clearly to show the different sections. People are going to land on the site and see quite a plain looking affair with just text and not instantly think that the bullet points are clickable (if you assume not everyone visiting will be web savvy).

That's my tuppence anyway :)

DEViANCE

Quote from: Clock'd 0Ne on June 22, 2011, 00:24:00 AM
IMO I'd try and keep it quite thematic and maybe just change the colour scheme depending on the section they arrive in? You don't want it to be too different or people are going to wonder what type of operation you are and whether they are getting a professional outfit or some kind of ad-hoc.

This is quite an old client site from a few years back so is a little outdated but its the same principles in operation for their three main sections: http://www.e-volution-training.co.uk/

I'd steer away from the bullet points idea and have some proper tabs along the top or photo/image buttons that stand out quite clearly to show the different sections. People are going to land on the site and see quite a plain looking affair with just text and not instantly think that the bullet points are clickable (if you assume not everyone visiting will be web savvy).

That's my tuppence anyway :)

good advice thanks, I like the idea of clickable images instead of the bullet points.