PDA

View Full Version : Centered Layout


wolfmanbc
11-17-2008, 10:01 PM
I am trying to design a site where everything is centered. The best example I can give is Collegehumor.com. When you expand the browser window everything aligns within the window to remain centered.

I am new to web design and I am having trouble reaching this result. If i center the background it looks right but the tables I've created don't line up when I expand the browser, they both attempt to stay centered but the relative position to each other changes. I feel like this has to be an easy solution but since I'm new to this I just don't know what to do.

I've played with cell padding (using %) on the tables but I dont know how to do that with the background, I dont know if this is the solution or not, Im looking for any help someone can offer on the subject, thanks.

I just want to line up my text inside the right border of my bg image and have it stay there no matter the browser window size.

Chapo
11-18-2008, 01:44 AM
Thats simple.... you need to add CSS to center you table. just add a new rule and name it, then with your box option put the margins to auto. Thats all.
Thers is a tutorial here in DW Club for this.

wolfmanbc
11-18-2008, 07:23 PM
thanks, where do i put that code thats in the tutorial? do I have to create a css style sheet or just throw it into the body somewhere?

Corrosive
11-18-2008, 07:26 PM
thanks, where do i put that code thats in the tutorial? do I have to create a css style sheet or just throw it into the body somewhere?


The CSS style goes in either the <head> tags or in a separate style sheet. I'd recommend the separate option.

The 'wrapper' code goes all the way round the code in your <body> tags. I.e. <div id="wrapper">Put your website code here</div>

wolfmanbc
11-18-2008, 08:38 PM
ok just one question that might help alot, should the background be centered here or not, because its seems like thats where i might be having problems. Can I add padding or margins to my background image?

Chapo
11-18-2008, 09:55 PM
Well..... once you have centered your table the background should also be centered, i don't think there is no problem with that..... it will be better to see your site if you can.

wolfmanbc
11-19-2008, 12:52 AM
well i dont have any site yet, its all based on the layout that I had in mind. I can show u the background if that will help. How could I show that in this forum?

edbr
11-19-2008, 12:59 AM
I just want to line up my text inside the right border of my bg image and have it stay there no matter the browser window size.
if you make a div float righty and put text in it this should be what you want i think

Corrosive
11-19-2008, 06:19 AM
Well..... once you have centered your table the background should also be centered, i don't think there is no problem with that..... it will be better to see your site if you can.

Actually, if you have added your background by using the 'page properties' button then it is adding the background style to your <body> tags. As your 'wrapper' comes in between the <body> tags it will not be centred by the wrapper.

Make sense?

Chapo
11-19-2008, 05:55 PM
Yeah.... Corrosive is the Man.... it makes sense

Corrosive
11-19-2008, 06:04 PM
Yeah.... Corrosive is the Man.... it makes sense

Thanks Chapo :wink:

Chapo
11-19-2008, 09:48 PM
Hey Corro.... i like very much the new look you gave to your site... it really rocks....!!!!

Chapo
11-19-2008, 09:51 PM
Did you use frames or the hide/show behavior for changing pages from home to contact ?

bee80
01-03-2009, 08:25 PM
Ive just read this article and the tutorial, so i tried the tutorial, on a basic html page it worked, but how do we apply it to a frameset as i could not manage this :(