Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Page resize problem
539907493_Inactive (New Admin) 9/4/2008 7:43 AM EST : Page resize problem
539907493_Inactive
Posts: 238
Fingers of Fury!

Ok, i have a problem, im running my resolution at 1440x900 (wide), however on a normal size screen the site is waaaaaaayyyyy too big, scroll to the right to fit everything in

DKOD

So my question is this, is there a way to auto resize the entire site to compensate for those monitors, or a way i can add a selection of resolutions for other monitors, lets say a 1440x900 or 1024x768 option?

Thx for the help i have recieved so far, wouldnt have gotten my site to the point it is now, if it werent for the ppl on here.

Thx
Cirax
TopBottom

Mottie (MVP) 9/4/2008 9:34 AM EST : RE: Page resize problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Here are a few things that should help:
  1. First off, you need to center your background image:
    body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }
  2. The space between your background borders is around 1175px... that's huge if you want it to show up on lower resolution monitors. Maybe you can leave that for your higher resolution setting (keep reading).

  3. To make your site work with different resolutions, try using this theme selector and make a theme named "1024x768" and one named "1440x900". You can then change the background image and then use this CSS to adjust the size of your left and right column boxes (I picked 200px but you can put whatever)

    .LeftContentZone {width:200px;}
    .RightContentZone {width:200px;}


TopBottom

539907493_Inactive (New Admin) 9/4/2008 11:21 AM EST : RE: Page resize problem
539907493_Inactive
Posts: 238
Fingers of Fury!

good news is the drop down menu is working i did not mess that part up, more good news is that the change happens when i select wide or normal, bad news is the side columns are not resizing, guess i did mess that part up, what did i do wrong? lol
TopBottom

Mottie (MVP) 9/4/2008 1:13 PM EST : RE: Page resize problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Oh, sorry I guess I should have explained better.

Since you're only changing the background and column size width, that's all you need in the extra CSS that loads. And I forgot to include the page width too... 

1440x900.css
.PageWrapper {width:1180px;}
.LeftContentZone {width:200px;}
.RightContentZone {width:200px;}
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }
1024x768.css
.PageWrapper {width:850px;}
.LeftContentZone {width:175px;}
.RightContentZone {width:175px;}
body{ background: #000 url('http://img168.imageshack.us/img168/8965/1024copybm4.jpg') center repeat-y fixed; }
Using "PageWrapper" will also limit the size of your expanding banner, so if that isn't want you want, then replace "PageWrapper" with "ctl00_ContentPlaceHolder1_ContentTable"

TopBottom

539907493_Inactive (New Admin) 9/4/2008 9:58 PM EST : RE: Page resize problem
539907493_Inactive
Posts: 238
Fingers of Fury!

sigh... i tried this on the normal css, not working, not sure why, but its not working, now nothing change when u select the "normal" setting css and web design is still partial greek to me /cry.

Not sure if i put it in the correct place, or if i should replace sumfin with it ect ect ect...

1024x768.css

.PageWrapper {width:850px;}
.LeftContentZone {width:175px;}
.RightContentZone {width:175px;}
body{ background: #000 url('http://img168.imageshack.us/img168/8965/1024copybm4.jpg') center repeat-y fixed; }

also i ran the 1024x768 css through VALIDATOR SERVICE and this is what it shows with regards to the pagewrapper :

.PageWrapper Lexical error at line 43, column 29. Encountered: "b" (98), after : "<" }br>.LeftContentZone {width:175px;}br>.RightContentZone {width:175px;}br>body .Tab { padding:0px;}

not a clue what that means lol, but it is probably why it isnt working like it is supposed to

i r css noob



TopBottom

Mottie (MVP) 9/5/2008 4:07 AM EST : RE: Page resize problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Ok, I figured out the problem... I actually hadn't tested the CSS until now *hang head*

It all needs an "!important" after the width to make it work. I also adjusted the size a tiny bit to make it bit better. Just remember, all that needs to be in the CSS files below is what you see, leave the CSS in the custom stylesheet alone.

1024x768.css
.resize {max-width:400px;}
.PageWrapper {width:840px !important;}
.LeftContentZone {width:175px !important;}
.CenterContentZone {width:490px !important;}
.RightContentZone {width:175px !important;}
body{ background: #000 url('http://img168.imageshack.us/img168/8965/1024copybm4.jpg') center repeat-y fixed;}
1440x900.css
.resize {max-width:700px;}
.PageWrapper {width:1150px !important;}
.LeftContentZone {width:200px !important;}
.CenterContentZone {width:750px !important;}
.RightContentZone {width:200px !important;}
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }
And you'll need to make a couple of changes to the images in the middle. The Congrats image and the monthly schedule image need to reduce in size to fit the "Normal Screen" size. All you have to do is add class="resize" into the img tag, see the examples below. I added the resize definition into the CSS of both files above.
<img class="resize" src="http://img255.imageshack.us/img255/3654/gratsod8.png">

<img class="resize" src="http://img126.imageshack.us/img126/9062/septse4.png">
I tested it this time and I know it works now! LOL
TopBottom

539907493_Inactive (New Admin) 9/5/2008 5:37 AM EST : RE: Page resize problem
539907493_Inactive
Posts: 238
Fingers of Fury!

sigh, i give up, click on the link to my site and select either of the 2 options, i did every thing exactly as u said, and yet i still cant get it to change when u select one or the other

DKOD

its making my head hurt.... make it stop! lol could there be clash between the new css's and the original, something that i am missing?

/sends mottie a crate of beer/ anti-depressants trust me ur gonna need to start popping pills or drinking alot when ur done with us
TopBottom

Mottie (MVP) 9/5/2008 8:20 AM EST : RE: Page resize problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I don't know what editor program you're using, but it's adding line breaks into your css
.resize {max-width:700px;}<br>
.PageWrapper {width:1150px !important;}<br>
.LeftContentZone {width:200px !important;}<br>
.CenterContentZone {width:750px !important;}<br>
.RightContentZone {width:200px !important;}<br>
body{ background: #000 url('http://img380.imageshack.us/img380/2965/testvy4.jpg') center repeat-y fixed; }
That's the problem I believe... since you're using ripway, just edit the file on that site

Edit: Here try linking to the files I made to test it...
http://h1.ripway.com/Mottie/test/1024x768.css

http://h1.ripway.com/Mottie/test/1440x900.css
TopBottom

539907493_Inactive (New Admin) 9/5/2008 8:30 AM EST : RE: Page resize problem
539907493_Inactive
Posts: 238
Fingers of Fury!

you are my hero! ty mottie

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%