Hi everyone,
I just joined BleepingComputer today and I'm glad I did. I've learned so much from this website and I appreciate all your help. Bleeping Computer has a great community of people. Hopefully someone can assist me with my problem I am having. I've been trying to find information on how to fix it but everything I have tried never worked.

Ok here's the problem. My website is http://www.cchelpme.com . When you view my website with the screen resolution 1280 x 1024, it looks exactly how I want it to look. But when you view my website with the screen resolution 800 x 600, you have to scroll left and right with the horizontal scrollbar. I would like my website to be able to auto adjust so a user to my website doesn't have to scroll left and right. Like if you go to http://answers.yahoo.com with the screen resolution set to 800 x 600, it looks perfect, you don't have to scroll left or right to view the entire page. I'm clueless on how to fix this problem.

Is it even possible to fix this problem with some code tweeking? So I don't have to redesign the entire website again?

another good website example is http://www.google.com . When you view that website on all resolutions its always centered on the screen. I would like my website to be that way.

Thanks for reading, any help towards this problem is very appreciated

You can not use an absolute layout. Absolute layout means that the layout is, well, absolute. It doesn't change. Ever. In your code, the very first div contains instructions for absolute positioning. For instance, you could change this: to this:


See what happens then.

I deleted this line of code from all my pages since I had 2 of the same pictures loading on top of each other.
<div Id="image0" name="globalObject0" style="position:absolute;left:145;top:-1;z-index:4001"> DELETED

I did what you said to this line of code
<div Id="image0" name="image0" style="position:absolute;left:145;top:-1;z-index:4001">

I then changed it to
<div Id="image0" name="image0" style="margin: 0 auto;">

It just put my logo all the way on the left of the screen.
I did this same technique to all of my other images and they all went to the left of the screen.

i kept messing around with the code but I couldn't get it so everything would be centered on all resolutions.

I'm still confused Is is possible for you to download my code of my homepage and edit it and then ill download that? Then I can look at the code and see what was changed. Thanks for your quick response. sorry if im sounding stupid, I'm not very good with html coding. I used the built in PageWizard Site Builder from bluehost.com to build my website.

I'm sorry. I do not have the time to take on any more clients at the moment. What I would recommend is that you start all over and get one thing aligned at a time.


I make a living from writing code, and am happy to help nudge you in the right direction so that you can learn. I am also happy to critique code as necessary. I will not write it for you though. Sorry.

You need a div centered on the page. This div will in turn contain all of the other elements of your web page. Then you need to use relative positioning to place the elements where you want them. Once you get the div centered, it will be centered, regardless of the screen resolution.

i call it my floaty code, used it on this site, http://www.fleetilya.com/

It's np groovicus I understand. Thanks for showing me the right direction. I did learn alot and atleast I'll be heading in the right direction now. So thank you for all you help

Splodge I tried what you said but I'm not sure if it worked or not. I may have put it in the wrong spot. Can you take a look at my code on my homepage at http://www.cchelpme.com and tell me where to exactly put the code. Sorry for asking so much, I just want to figure this out so bad. The one thing I'm not good at is html code

If I do redo my entire site, Is there a good program out there I could use that will do it the way I want it. A program that isn't too hard to use? I know there's alot of site builders but what do you guys suggest?

Thanks again for all the help everyone

that's some funky code you got there with no end tags, i wouldn't know where to put the floaty code, i think it ought to go before your first table tag and right at the end of your code, i would love to rebuild the site in dreamweaver but like groovicus i make a living out of this and you site is a bit to involved for a freebee

Thanks Splodge for your help. Do you or anyone else know of a free website builder like dreamweaver? Something that is not too hard to learn and understand.
I used PageWizard Site Builder from my bluehost.com hosting package. I guess that's why its funky lol.

Ok I have decided to redo my entire website like groovicus had said. Just one quick question. Should I design my website for 1024 x 768 or should I design it for 800 x 600? Which one would be the better choice and why? Thanks in advance

Design it for 600X800 because it is the lowest common denominator. Many of the businesses that I design for are still running old systems in which they are not interested in snazzy graphics, or the latest and greatest. I have one company that is still running Windows ME. Those same companies have 15 inch monitors, on which 1024*768 is too small to read easily.

your art work is to big for 800 x 600, try this for a template, change all the _blank links to direct links,
http://www.hallcross.co.uk/comcrisis/index.html
i was going to rebiuld the whole site but a bottle of Vodka from a greatfull client got in the way
i downloaded all yout artwork so if you want that resizing let me know, i know sod all about computers but i run photoshop, illustrator, dreamweaver and flash all day, any work you could send my way???
(i'll resize artwork for free, blue host does a terrible job of it)

Thanks for the quick response I didn't even think about 600x800 because my computers can't even be set that low. Before I read this post I downloaded a program called WYSIWYG Web Builder from www.wysiwygwebbuilder.com. I created a simple page that is just a black layer. It's currently being hosted at http://www.brunswickshops.com . So far this program is working like I want it to. I'm able to view this webpage in any resolution, except for 600x800 I suppose.

One more question if you guys don't mind, I'm still a little confused.
When you go to http://www.bleepingcomputer.com and view it on any resolution, the entire screen is always taken up by the website layout. All the space is used except for the little white borders on the sides. The white borders are always the same size on any resolution.

Now when I go to http://www.brunswickshops.com and view it on let's say 1280x800, there are the white borders but they are huge. Now when I view http://www.brunswickshops.com on resolution 800 x 600 it's simply just all black, there are no white borders.

Does this have something to do with a percentage setting for width?

which resolution is http://www.bleepingcomputer.com designed for?

Thanks again for all the help, I just want to make sure I fully understand this topic.

================================================================================
======================

Wow Splodge the template you made is pretty nice. I'm very impressed, thank you so much.. I didn't even expect you to do that for me.
Tomorrow I'll get all my images ready and see which ones need resizing(probably all of them). Thanks for offering to do that for free, I really appreciate it. I'll let you know whats up once I get ready to work on my website some more. Also, the template that you created for me, did you design that for 1024x768 resolution?

you have a table width of 800 pixels, page margin set to 0 pixels
bleepingcomputers have a table width of 100% but with a page margin of about 15 pixels at the side, 7 at the bottom and 25 at the top, i think thats the old standard, but it's "page margin" you are looking for

Oh ok, thank you for clarifying that for me Splodge.

most common screen resolution is 1024, i set the template @ 1000 pixels leaving 24 pixels for the scroll bar and zero page margin, i dont know how your WYSIWYG program works, but if there is a setting for page margins (usualy in page properties) type zeros in the boxes, leaving them blank will give you the old standard page margins, this fools a lot of people.
if you want to make the page 800 wide the two pieces of art work on the home page need to be a lot smaller or double stacked

Thanks again Splodge,
When I start creating my website I'll make it suitable for 1024x768. Since that is the most common. Thanks again.

Ok, so now I'm creating my website. Everything is going fine but one thing. Whenever I view my website in Internet Explorer it looks pretty good, but when I view it in Mozilla Firefox, the spacing is different and my horizontal line intersects my navigation buttons. Why is it that my website looks different in different browsers? The website I am talking about is http://www.brunswickshops.com . The same thing happens when I go to http://www.hallcross.co.uk/comcrisis/index.html . It looks different in both of the browsers.

Now when I go to http://www.bestbuy.com . Everything looks the same in both browsers, or atleast I'm pretty sure it does.

Is this problem I'm having related to how the website is built/coded?

Thanks in advance for all the help.

The problem lies in how each browser parses the html. In many case, Firefox is much more forgiving (unless you are using the Firefox 3 Beta). IE, especially IE7, is much more fussy about well formed html. This is a common and constant battle that web developers face since no two browsers render code quite the same way.

Thanks for the explanation groovicus. You answered my question perfectly. Time to work on my website again

looks like you fixed it,


try changing the two 'auto' to '0px' see if that clears up the 92 pixel page margin you have on the left of the screen

Yup, I finally got everything fixed and the way I want it. I couldn't have done it without splodge and groovicus. Thank you guys so much for your help and support. If you want to check out the final version of my website, it's at http://www.cchelpme.com . Thanks again