PDA

View Full Version : Help centering my site


djt
01-22-2010, 08:12 PM
I have asked this question before on one of my previous sites and somebody very kindly gave me some code to add to the CSS file.

I have copied and pasted this code on another site and it worked but on my latest one it hasn't.

Please can somebody help me out?

www.puntersprofits.com

Ricky55
01-22-2010, 09:31 PM
That file looks a bit of a mess mate your HTML that is, although using Divs and CSS is the way to go using them badly like this is almost as bad as tables.

You should name you Divs semantically not pic1 pic2 pic3, also images don't need to be placed in anything unless they are background images.

Also when you have an external CSS file put all your style in that don't have an external file and style in the head of your doc as well thats just silly.

The code you need just changes the margin of the wrapping div to auto for this to work it must also have a width.

for example

#wrapper {
width: 800px;
margin: 0 auto;
}

I was going to look through your code but it gave me a headache.

gentleone
01-22-2010, 09:36 PM
The CSS code to center your page is almost there and you forgot to put the necessary div into your HTML.

First go to your stylesheet and add the following to #wrapper
text-align:center;

Then you have to clean up some divs in your HTML code, because it looks a bit messy. To do this you have to go into code view, so don't be afraid ;)

Delete the following in your HTML:
<div id="3"></div>
<div id="1"></div>
<div id="2"></div>
<div id="4">
<div id="5">
<div id="6"></div>
</div>
</div>
<div id="7">
<div id="8"></div>
</div>
<div id="9"></div>
<div id="10">
<div id="11"></div>
</div>
<div id="12"></div>
<div id="13"></div>

Then add also in code view this after the opening <body> tag (this is actually where <div id="1"></div> was:
<div id="wrapper">

finally you have to close that wrapper div and you do that at the end of your code right before the closing </body> tag:
</div>

Just let me know if this worked out for you!

gentleone
01-22-2010, 09:41 PM
I was going to look through your code but it gave me a headache.

I do agree with Ricky55. It's good that you try to layout your page with div's and CSS, but there are some kind of rules and guidelines that you have to follow to get a proper and semantic webpage.

djt
01-22-2010, 09:45 PM
Thankyou for your comments.

I am new to this and don't really understand what you are saying is wrong with my site?

I don't use code at all, I just use div tags to insert the images and text boxes etc.

Thanks for having a look anyway.

djt
01-22-2010, 09:57 PM
The CSS code to center your page is almost there and you forgot to put the necessary div into your HTML.

First go to your stylesheet and add the following to #wrapper
text-align:center;Then you have to clean up some divs in your HTML code, because it looks a bit messy. To do this you have to go into code view, so don't be afraid ;)

Delete the following in your HTML:
<div id="3"></div>
<div id="1"></div>
<div id="2"></div>
<div id="4">
<div id="5">
<div id="6"></div>
</div>
</div>
<div id="7">
<div id="8"></div>
</div>
<div id="9"></div>
<div id="10">
<div id="11"></div>
</div>
<div id="12"></div>
<div id="13"></div>Then add also in code view this after the opening <body> tag (this is actually where <div id="1"></div> was:
<div id="wrapper">finally you have to close that wrapper div and you do that at the end of your code right before the closing </body> tag:
</div>Just let me know if this worked out for you!

Yay, it worked.

Thanks very much for a detailed explanation.

Could you please give me some pointers on how to improve the way I build my sites if I am going about it incorrectly?

Cheers

Dan

gentleone
01-22-2010, 09:58 PM
Thankyou for your comments.

I am new to this and don't really understand what you are saying is wrong with my site?

I don't use code at all, I just use div tags to insert the images and text boxes etc.

Thanks for having a look anyway.

You positioned all your divs with position:absolute and then put them with 'top' and 'left' where ever you want them, but this is not the way you supposed to position.

The way it should be is with float, margin and padding to give structure to your page.

gentleone
01-22-2010, 10:02 PM
But I have to say... your design looks nice... now the coding part ;)

Corrosive
01-23-2010, 06:06 AM
I have to agree. That site is really nice. Something different to what you usually see.

djt
01-23-2010, 07:58 AM
Ok thanks.


Can you give me an example of how I should create my div?

I was only taught to do it the way I have, I didn't realise there was an alternate / better way.

gentleone
01-23-2010, 08:23 AM
Ok thanks.


Can you give me an example of how I should create my div?

I was only taught to do it the way I have, I didn't realise there was an alternate / better way.

I think it's impossible to put everything in one example by what we mean with 'the right way'.

If you want to put some effort in learning the basics then the following tutorial is really a good place to start. It's quite a ride and perhaps there are things that you already know, but if you've finished it then you know how to develop/code the right way.

http://articles.sitepoint.com/article/html-css-beginners-guide

djt
01-23-2010, 09:29 AM
I think it's impossible to put everything in one example by what we mean with 'the right way'.

If you want to put some effort in learning the basics then the following tutorial is really a good place to start. It's quite a ride and perhaps there are things that you already know, but if you've finished it then you know how to develop/code the right way.

http://articles.sitepoint.com/article/html-css-beginners-guide


Excellent, i've bookmarked it and will have a read through.

Cheers

gentleone
01-23-2010, 10:47 AM
your welcome and good luck!