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

Klors · Post by **Klors** » Mon Jan 08, 2007 1:35 am

If you're literally inserting

<div id="whatever">

after < body class...> etc. You should just need.

Code: Select all

#whatever {
width: 770px;
margin-left: auto;
margin-right: auto;
}

lodp · Post by **lodp** » Mon Jan 08, 2007 2:22 am

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 · Post by **mjd76384** » Mon Jan 08, 2007 3:00 am

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.

Cap'n Refsmmat · Post by **Cap'n Refsmmat** » Mon Jan 08, 2007 3:32 am

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 · Post by **lodp** » Mon Jan 08, 2007 4:33 am

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?

Highway of Life · Post by **Highway of Life** » Mon Jan 08, 2007 5:09 pm

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

I have a 1440x900 screen, and it looks pretty awful.

Klors · Post by **Klors** » Mon Jan 08, 2007 5:27 pm

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 · Post by **Daworm** » Tue Jan 09, 2007 2:52 am

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

Nicholas the Italian · Tue Jan 09, 2007 3:02 pm

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 · Post by **Klors** » Tue Jan 09, 2007 4:07 pm

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.

Development Discussion Board

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

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

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

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

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

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

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

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

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

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

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