newb webpage question - best option for an idea

fRostiE

fRostiE

fRostiE

Soldato
Joined
20 Oct 2002
Posts
6,212
Location
UK
basically i have to create a 10 page website, using a CSS to make things easier.. how do i set it so that the main content of the site appears centre aligned on all resolutions with all browsers ? i've heard that tables are just messy ?

im using dreamweaver MX2004, trying to keep my pages xhtml scrict

using my sisters site as an example: http://www.beespokecards.co.uk/

the content isnt in the centre on my resolution 1280x1024, but is on hers 1024x768

whats my best option ?
 
Being a bit more specific:

Just inside your HTML <body> tags, add <div class="container"></div>, and put all of your content inside that div.

Then in your CSS file, add the following (change width to preference):

.container {
width: 600px;
margin: 0 auto;
}

That should give you a centred page, 600 pixels wide.
 
sara said:
Being a bit more specific:

Just inside your HTML <body> tags, add <div class="container"></div>, and put all of your content inside that div.

Then in your CSS file, add the following (change width to preference):

.container {
width: 600px;
margin: 0 auto;
}

That should give you a centred page, 600 pixels wide.
Click to expand...

am i right in saying that the div groups all objects.. so then the CSS will centre all included in the tag.. fantastic thankyou :)

why not use my sisters site as an example, shes only 14 !
 
fRostiE said:
am i right in saying that the div groups all objects.. so then the CSS will centre all included in the tag.. fantastic thankyou :)

why not use my sisters site as an example, shes only 14 !
Click to expand...
That CSS tag tells the div to assume no margin at the top or bottom, and then put in automatic amounts of margin on the left and right. This tends to put it in the middle! It does nothing to the contents of that div, unless you class them all as "container".

A couple of tips:

Try to use DIVs instead of tables.
Don't specify fonts, colours or backgrounds in your HTML, stick all that in the CSS.
Add this tag into your CSS file if your tags aren't behaving as expected:

div {
border: 1px solid pink;
}

That'll help you see where they are and what to do with them.

Finally, use http://www.w3schools.com/css/default.asp to help your with your CSS, and it's very useful to be able to validate your code, it can help your de-bugging instead of spending hours tearing your hair out: http://www.w3schools.com/xhtml/xhtml_validate.asp

Good luck!


PS: Your sister's site is nice for a 14 year old, but she's got tons of tables and un-needed font formatting all over the place. You can make life much easier and neater than that :)
 
You must log in or register to reply here.
Back
Top Bottom