[cs_gal]

Once again i am facing the same center alignment issues. This time i tried to remove the extra spacers from both sides of my web page and then used a wrapper div with margin:auto, but the page is still not exactly center aligned. I tried to position the wrapper div by giving some value for left, but it gives me a horizontal scroll bar on the page. Here is the page, please check and give suggestions on how to align it in center.
http://tinyurl.com/35jymvk

[PhunkRabbit]

Put a decent doctype in your HTML, XHTML 4 strict is a nice one.

Read about using Divs and CSS Floats to make layouts, the HTML and CSS is a mess, you seem to be using Photoshop/image ready to generate the HTML, this is not good.

If you want to learn how to make websites then start with the basics of learning hand coded HTML and CSS.

Adding and hacking the generated code is not going to teach you anything worth while.

[Shado3225]

To centre a wrapper or any other div for that matter you should use margin: 20px auto, with 20px being what ever you need it to be 0px is also ok. The div you are centring needs to at least have a width for it to work.

VERY NB what Phunk said about doc type.

FYI - I like the look of the design, clean and tidy just as I like it. You might want to look at your font usage though. You have such nice clean font in your headers and the ugly times font in your content. You can also remove the STYLE tags and blank lines in your css, it only takes up space and adds to the size in your external.

@PhunkRabbit - I swear our thinking is on the same path it's down right scary.

[PhunkRabbit]

Thanks Shado3225

I tryed centering it for him using Firebug but the standard method wasnot working (it did last time he had this issue). There is some left padding and or margin stuck in there somwhere, the inherant problem is coming from the way his site is stuctured, i.e. the positioning method.

A floated and well coded layout would solve this issue completely.

[Quin]

You should only use one CSS file for your site's layout, also a nice aesthetically pleasing formatting of your code would be nice :-)

Apart from that, as far as I know, you cannot have absolute positioning and centre alignment.
The code to centre align any element (i.e. the first DIV that wraps all the others)

margin:0 auto;

where the first value is for the top and bottom margins (0) and the second value is for the left and right (auto). You can also use

margin: 'top' 'right' 'bottom' 'left'

(put in a value instead of the name, no apostrophes)

[PhunkRabbit]

Quin, on 26 October 2010 - 10:26 AM, said:

You should only use one CSS file for your site's layout, also a nice aesthetically pleasing formatting of your code would be nice :-)

Apart from that, as far as I know, you cannot have absolute positioning and centre alignment.
The code to centre align any element (i.e. the first DIV that wraps all the others)

margin:0 auto;

where the first value is for the top and bottom margins (0) and the second value is for the left and right (auto). You can also use

margin: 'top' 'right' 'bottom' 'left'

(put in a value instead of the name, no apostrophes)

Dont forget the parent needs to have center aligned text for the child with margin:0 auto to align.

i.e. body - text-align:center, div - margin:0 auto; text-align:left;

[Quin]

Ahh, yes true, though I thought that had already become redundant.

[PhunkRabbit]

Quin, on 26 October 2010 - 10:41 AM, said:

Ahh, yes true, though I thought that had already become redundant.

not AFAIK however I will have a look as I am now interested to know

[Lemur]

Text-align fixes a few IE bugs.

Either way, agreed. I started with Photoshop slicing like that back when it still used tables to do it (v7, not sure how long it lasted) and I really wish I had learned the code instead of trying to hack that garbled mess. That was probably back in my 8th grade year.

[Shado3225]

cs_gal I hope you don't mind but I had some time on my hands and I could not get your coding out of my mind. Anyway I have worked a bit on your code hoping it would help you but I must confess I have run out of time so the pages have only been tested in FireFox and they have also not been validated neither has it been indented.

The mock up I did of your design can be found at here

I have tried to keep to your original design how ever graphics are not my strong suit so you would need to work on a few things there.

Well I hope it helps and you don't need to use it if you would prefer to carry on with your own pages but like PhunkRabbit said your code was a bit hackie.

If you would like me to mail you the files let me know.

[cs_gal]

Thanks a lot PhunkRabbit and others. My issue was solved by just changing the Doctype to XHTML 4 and by setting wrapper div as

margin:auto 0 0 35px;
position:absolute;

I don't understand why setting 'position:relative" does not center the wrapper.

I know my code is messed up, because it was an auto generated one. I will surely rewrite it after i have a good grasp of CSS and Div structure. I just had 2 classes of CSS so far.

Shado3225, on 26 October 2010 - 10:19 AM, said:

cs_gal I hope you don't mind but I had some time on my hands and I could not get your coding out of my mind. Anyway I have worked a bit on your code hoping it would help you but I must confess I have run out of time so the pages have only been tested in FireFox and they have also not been validated neither has it been indented.

The mock up I did of your design can be found at here

I have tried to keep to your original design how ever graphics are not my strong suit so you would need to work on a few things there.

Well I hope it helps and you don't need to use it if you would prefer to carry on with your own pages but like PhunkRabbit said your code was a bit hackie.

If you would like me to mail you the files let me know.

Thanks a lot, it looks great now, with a clean and short css and nice fonts. Please do mail me the files.

[Shado3225]

No problem

If you really want to learn CSS download one of those free website templates off the internet and mess around with it. Practise is the fastest why to learn and their structures are pretty much set out for you.

[PhunkRabbit]

Glad you fixed it

[cs_gal]

Since all of you said, auto-generated code is a mess, i tried rewriting the code again. Check and see if you guys think its fine. Now I want to get rid of the white space on the top of my page and i don`t know how to do it. Also i still can't align the page with wrapper div and need help centering the page.
http://tinyurl.com/3xyoprl

This post has been edited by cs_gal: 29 October 2010 - 06:10 AM

[PhunkRabbit]

Nice attempt, honestly.

Change the width set on container from 1200px to 944px. That will fix the alignment issue.

I dont have the time atm but will pop back in tomorrow and write a basic structure for you to see since you took the time to give it ago.

Nice work.