Re: Can't get page to center

Posted 20 September 2012 - 11:08 AM

The main cause of your problem is that you're using absolute positioning for all of your elements in your CSS file. However, simply removing the position: absolute; statements isn't going to clear up your problem.

The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.

Re: Can't get page to center

Posted 20 September 2012 - 11:13 AM

Mina-no-Hime, on 20 September 2012 - 11:08 AM, said:

The main cause of your problem is that you're using absolute positioning for all of your elements in your CSS file. However, simply removing the position: absolute; statements isn't going to clear up your problem.

The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.

I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?

Re: Can't get page to center

I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?

Photoshop's slicing mechanism puts every "slice" of the image into an image tag, which in turn is contained within a div tag containing absolute positioning in the generated CSS. For starters, images used as decoration (such as rounded borders and the like) should not be done in img tags -- they should be handled as CSS.

If you want to center your page on screen, you aren't going to be able to use absolute positioning (unless you intend to constantly recalculate the appropriate positions based on the size of the browser window). Slicing itself is a great tool for layout prototyping, and for getting your images split and getting a general idea of how you should set things up with regard to where CSS images should be placed.

It is not a good tool for creating your pages or layouts for you. Scaffolding (to step out of Photoshop-centric language) is not intended for that purpose. Just to give you an example, try adding text over whatever image appears in your main_con div.

Re: Can't get page to center

I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?

Photoshop's slicing mechanism puts every "slice" of the image into an image tag, which in turn is contained within a div tag containing absolute positioning in the generated CSS. For starters, images used as decoration (such as rounded borders and the like) should not be done in img tags -- they should be handled as CSS.

If you want to center your page on screen, you aren't going to be able to use absolute positioning (unless you intend to constantly recalculate the appropriate positions based on the size of the browser window). Slicing itself is a great tool for layout prototyping, and for getting your images split and getting a general idea of how you should set things up with regard to where CSS images should be placed.

It is not a good tool for creating your pages or layouts for you. Scaffolding (to step out of Photoshop-centric language) is not intended for that purpose. Just to give you an example, try adding text over whatever image appears in your main_con div.

Well to avoid the problem of the text going 'funny' as it were I just place another DIV on top of the one with the design on it, I changed the positioning from absolute to relative and everything is dandy