Different Monitor resolutions changing layout! Help

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Different Monitor resolutions changing layout! Help

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Different Monitor resolutions changing layout! Help

Page: [1]


ryankreeps Posts: 3 Joined: 11/6/2009 Status: offline	Different Monitor resolutions changing layout! Help - 11/6/2009 18:19:12 I'm trying to launch my website <a href="http://www.ryankreeps.com">http://www.ryankreeps.com</a> It looks fine on my macbook, but when I open it on a computer with a different resolution it looks terrible. Everything is out of place. This is based off a wordpress template that I've customized a bit. This is my first website and I'm pretty much clueless. I know it has something to do with using absolute, relative, or float positioning. Can anyone take a look and give me some hints what is wrong?! -Ryan


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/6/2009 18:28:18 positioning may be part of it... absolute SIZING is usually what gets you in trouble. You have two options... lay it out so it works no matter what resolution they use... make the page 800 px wide with some blank space around it, etc. Or you can make your widths in % rather than pixels... if all widths are in % of 100 then it will expand to fill the window regardless of screen rez. The really scary thing.. once you get screen resolution figured out have fun getting it to look the same in differing browsers... Your browser will see things differently than 97% of the world because they run PC, not Mac. Even IE from PC to Mac is a huge difference in how it renders the page... _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to ryankreeps)


ryankreeps Posts: 3 Joined: 11/6/2009 Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/6/2009 18:46:36 How would I go about changing the page size to 800px? I'm not sure. On changing the pixels to % does that mean every single px entry? or just certain ones? Thanks for replying so fast by the way. (in reply to bobby)


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/6/2009 19:21:56 Without digging too deep it looks like your formatting is all done on stylesheets? It would be any segment of the page that specifies a width... Sometimes tables are used, so each column has a width... It appears your page is set up using "div's" which also have widths. Honestly though, your site looks fantastic on my monitor. Win XP Firefox 3.5.4 1024 x 768 _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to ryankreeps)


ryankreeps Posts: 3 Joined: 11/6/2009 Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/6/2009 19:39:26 Cool, so are you saying that everywhere I see a width in my style sheet just change the px to % ? But I know 960px to 960% doesn't sound right...ahhhh welp glad it looks good on your screen! (in reply to bobby)


Tailslide Posts: 6758 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/7/2009 1:26:20 The full width of the screen would be 100% so you'd use that or smaller percentages - e.g. you could use 80% and margin:0 auto to have a small gap on either side of a centralised box which will always be 80% of the width of the viewport no matter how wide the user has their screen. You need to be a bit careful though - you need to ensure that the page still works at narrower widths (e.g. 800 px wide) as you never know how wide someone has their browser and I'm amazed at how many of my clients still use the narrower width. You also have to ensure that the text doesn't become too hard to read at large screen widths because a long line of text makes it hard for the eye to travel down to the next line. I tend to use % but then restrict the overall width of the div with max-width and min-widths to prevent such problems. IE of course is not up to par and you need to add special IE measures to get this to work properly in older versions of IE. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to ryankreeps)


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/9/2009 19:22:23 if 960px is your total width, then change that to 100% and adjust the rest accordingly... IOW, if you have a column that is 320px, it would now be 33%... 480px would be 50% (of 960) If you set up your page to be "fluid" like this it will expand to fill the open window of you visitors browser... or shrink to fit accordingly... since 100% is 100% of whatever the available real estate is. Now instead of always being 960px wide it will be 800 px wide on 800x600 resolution... and fill a 1024 wide window... rather than having a side scroll or wasted, unused space. That being said... it may be more difficult to make all of the changes to your template than it would be to start a new page... or modify one that you built and would therefor be more familiar with the structure and code. _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to Tailslide)


womble Posts: 6283 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/10/2009 6:03:46 quote: ORIGINAL: bobby That being said... it may be more difficult to make all of the changes to your template than it would be to start a new page... or modify one that you built and would therefor be more familiar with the structure and code. Good point Bobby... It may be an idea to check out some basic Wordpress templates/frames, if not to base your layout on, to get a better idea of where the 'hooks' are in Wordpress to hang the layout on. This site, the CSS Tinderbox has some basic Wordpress template frames that can easily be customised for your site, and no doubt there'll be other Wordpress frameworks out there. Another one to check out if you're wanting a simple two column layout similar to the one currently on your site is Mike Cherim's lovely accessible Wordpress theme, which is very easy to adapt by simply swapping the graphics if you're happy with the layout. My blog (unfortunately I've not had chance to update it recently) uses Mike's theme, as does Jaybee's (hahaha! at least it's not just me who's not updated their blog recently! ). It's as easy as identifying which images go where on the page and what their name is, and then replacing them with your own graphics, suitably re-sized to fit the appropriate spaces, and naming them as the original graphics were named. Okay, so it's a bit more complicated than that, but it's very easy to do, and on Mike's blog for the Greenbeast theme there are instructions on how various elements work and how you can customise things further. (BTW, I love your tutorial on integrating swear-words into everyday conversation, you $!#&+@*/!!!. I shall have to try and implement some of those tips into my conversations ...I do have problems sometimes though mixing my words up, so I'd perhaps better be cautious when trying out some of the techniques mentioned...) _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to bobby)


Donkey Posts: 4077 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/10/2009 13:07:40 I wouldn't feel guilty about not updating your blog, I haven't wrote a thing on mine for over a year. 1) It is not worth writing anything unless you have something interesting to say. It is difficult to make a blog post interesting if you are just writing for the sake of it. 2) There are too many blogs already. Every half wit and BBC journalist (the two are not mutually exclusive) has a bloody blog and they advertise them during the news programs. THere is not enough time in the day or even the rest of my life to read all this cr@p. Not blogging is possibly the best way to serve humanity that most of us can aspire to. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to womble)


treetopsranch Posts: 1651 From: Cottage Grove, OR, USA Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/10/2009 13:45:17 Right on Donkey! _____________________________ Don from TreeTops Ranch, Oregon "I've got a taste for quality and luxury" (in reply to Donkey)


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Different Monitor resolutions changing layout! Help - 11/13/2009 17:56:39 I find that I have too much to say that nobody wants to hear or read... before I selected "bobby" for a user name here it was going to be "pontificus" but I decided against that at the last minute. Needless to say, i have not blogged in over two years... _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to treetopsranch)