Alignment issue

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 1285 Views - Last Post: 01 November 2010 - 08:00 AM

#1 cs_gal  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 31
  • Joined: 22-October 10

Alignment issue

Posted 26 October 2010 - 01:38 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Alignment issue

#2 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 26 October 2010 - 02:39 AM

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.
Was This Post Helpful? 1
  • +
  • -

#3 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Alignment issue

Posted 26 October 2010 - 04:02 AM

:genius:

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.
Was This Post Helpful? 0
  • +
  • -

#4 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 26 October 2010 - 04:07 AM

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.
Was This Post Helpful? 0
  • +
  • -

#5 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: Alignment issue

Posted 26 October 2010 - 04:26 AM

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)
Was This Post Helpful? 1
  • +
  • -

#6 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 26 October 2010 - 04:32 AM

View PostQuin, 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;
Was This Post Helpful? 0
  • +
  • -

#7 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: Alignment issue

Posted 26 October 2010 - 04:41 AM

Ahh, yes true, though I thought that had already become redundant.
Was This Post Helpful? 0
  • +
  • -

#8 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 26 October 2010 - 04:45 AM

View PostQuin, 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 ^^
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Alignment issue

Posted 26 October 2010 - 05:11 AM

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.
Was This Post Helpful? 0
  • +
  • -

#10 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Alignment issue

Posted 26 October 2010 - 11:19 AM

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 :whistling: 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.
Was This Post Helpful? 2
  • +
  • -

#11 cs_gal  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 31
  • Joined: 22-October 10

Re: Alignment issue

Posted 26 October 2010 - 11:36 PM

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.

View PostShado3225, 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 :whistling: 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.
Was This Post Helpful? 0
  • +
  • -

#12 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Alignment issue

Posted 27 October 2010 - 12:30 AM

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.
Was This Post Helpful? 0
  • +
  • -

#13 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 27 October 2010 - 01:03 AM

Glad you fixed it :)
Was This Post Helpful? 0
  • +
  • -

#14 cs_gal  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 31
  • Joined: 22-October 10

Re: Alignment issue

Posted 29 October 2010 - 06:07 AM

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

Was This Post Helpful? 0
  • +
  • -

#15 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Alignment issue

Posted 29 October 2010 - 06:25 AM

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.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2