Reduce width and center the page -- any simple way?

All style (template, theme and imageset) related questions for the new release; advice, feedback here please.
Klors
Registered User
Posts: 95
Joined: Fri Sep 19, 2003 2:08 pm

Re: Reduce width and center the page -- any simple way?

Post by Klors »

If you're literally inserting

Code: Select all

<div id="whatever">
after < body class...> etc. You should just need.

Code: Select all

#whatever {
width: 770px;
margin-left: auto;
margin-right: auto;
}
lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

that did it! many many thanks!

so, just for the record (and anyone who reads this in a future forum search), i finally inserted

Code: Select all

<div id="whatever">
after <body class="{S_CONTENT_DIRECTION}"> in /template/overall_header.html, and added

Code: Select all

#whatever {
width: 770px;
margin-left: auto;
margin-right: auto;
}
to /theme/stylesheet.css
mjd76384
Registered User
Posts: 6
Joined: Sun Jan 07, 2007 5:31 pm

Re: Reduce width and center the page -- any simple way?

Post by mjd76384 »

Here is what I did.

Edit stylesheet.css:

Add width: 770px; to #wrapheader, #wrapcentre, and #wrapfooter.

Edit overall_header.html:

Add <div align="center"> after <a name="top"></a> and before <div id="wrapheader">.

Edit overall_footer.html:

Add </div> after </div> and before </body>.

This is what I got. Looks right in FireFox 2.
My wife is married to a rock star!
Cap'n Refsmmat
Registered User
Posts: 219
Joined: Tue Jan 25, 2005 11:31 pm

Re: Reduce width and center the page -- any simple way?

Post by Cap'n Refsmmat »

Why do you even want fixed-width forums? I'm on a 1400x1050 screen, and they look ridiculous on it.

If you want nice white margins, use a percentage width so you don't irritate people with widescreens.
lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

hadn't thought of that, actually. but how about the lo-res folks -- if you've got the page at 60% width or something, it's a pain in the behind on an 800x600 screen, right?
User avatar
Highway of Life
Registered User
Posts: 1399
Joined: Tue Feb 08, 2005 10:18 pm
Location: I'd love to change the World, but they won't give me the Source Code
Contact:

Re: Reduce width and center the page -- any simple way?

Post by Highway of Life »

I'm with Cap'n there too...

I have a 1440x900 screen, and it looks pretty awful.
Image
Klors
Registered User
Posts: 95
Joined: Fri Sep 19, 2003 2:08 pm

Re: Reduce width and center the page -- any simple way?

Post by Klors »

lodp wrote: that did it! many many thanks!

so, just for the record (and anyone who reads this in a future forum search), i finally inserted

Code: Select all

<div id="whatever">
after <body class="{S_CONTENT_DIRECTION}"> in /template/overall_header.html, and added

Code: Select all

#whatever {
width: 770px;
margin-left: auto;
margin-right: auto;
}
to /theme/stylesheet.css

You could maybe change it to

Code: Select all

#whatever {
width: 80%;
min-width: 770px;
margin-left: auto;
margin-right: auto;
}
I really can't be bothered going through my testing procedures for the different browsers right now though, don't think I've done any min/max-width testing on IE7 :)
Daworm
Registered User
Posts: 10
Joined: Mon Jan 08, 2007 4:51 am

Re: Reduce width and center the page -- any simple way?

Post by Daworm »

Maybe... set a min-width as pixels, and a max width as percentage ??
User avatar
Nicholas the Italian
Registered User
Posts: 659
Joined: Mon Nov 20, 2006 11:19 pm
Location: 46°8' N, 12°13' E
Contact:

Re: Reduce width and center the page -- any simple way?

Post by Nicholas the Italian »

Daworm wrote: Maybe... set a min-width as pixels, and a max width as percentage ??

This shouldn't work. Instead, you may try min-width: 80%; min-width: 770px. Theoretically, the largest of the two should apply. Does it work? ;)
Klors
Registered User
Posts: 95
Joined: Fri Sep 19, 2003 2:08 pm

Re: Reduce width and center the page -- any simple way?

Post by Klors »

Code: Select all

#whatever {
width: 80%;
min-width: 770px;
margin-left: auto;
margin-right: auto;
}
I've just tested this and it does work in IE7 (pretty sure it won't in IE6 though, can't test here). When the browser window width is smaller than around 1000px width the forum width doesn't drop below 770px, when it's larger the forum expands out to be 80% of the width.

Of course, that might not be the exact behaviour you're after.
Post Reply