Re: Site Compatibility/Width & Height Issue

Looks like you have your width set to 960px. So depending on resolution of the viewers screen it may look differently. If your screen is 1000px, then 960 would nearly fill it at 96% of the screen..... If your friends is 1200 then it would only be 80% of the screen.

In some areas you set width to 100%, in others you set pixels width. The 100% will go full width of the screen regardless of size, when you set pixels it hits that pixel size regardless of screen.. so if your user has an 800px screen... thenat 960px it will go off their screen.

 

Re: Site Compatibility/Width & Height Issue

Great! So how would I be able to remove this?

 

Re: Site Compatibility/Width & Height Issue

Basically if you have to decide if you want to design your site by using fixed width, or relative/responsive to screen size. There isn't really a right or wrong way to do it, you just have to decide the style you want to go with.

Responsive will take some work to code all of your sections to work on varying display sizes and what happens with overflow on smaller screens etc..... Fixed width takes less work you just have to decide what you want your max width to be and work your sections to not exceed that width etc....

 

Re: Site Compatibility/Width & Height Issue

I think Ill go with fixed, but what fragment of code will I have to add? and where will I need to put it?

 

Re: Site Compatibility/Width & Height Issue

You will need to go into your stylesheet and set width in pixels for your classes where appropriate. You cannot use a width of "100%" because that is what will stretch that individual div to the full screen size.

I see a couple in your css that are set to 100%.

You also need to be mindful of your overall width. I think most users have a resolution of 1024x768 or higher these days Browser Display Statistics.

So for easy math... lets say your max width should be 1000px.

Then if you have 5 divs next to each other, there combined pixel width cannot exceed 1000. So your should have 5 divs with a width of 200pixels. If you had 4 divs at 200, and the last div at 250.. your total would be 1050, exceeding your max width by 50 pixels (off the screen, thus requiring scrolling).

So essentially, you decide your max width, and then make sure that your objects inside do not exceed that "alone" or when combined with their horizontal partners.

 

Re: Site Compatibility/Width & Height Issue

Also, consider doing some reading on Box Model Theory. This is how borders, margins, padding, etc... affect the pixel width of your divs. For example if you set your div width to 300px.... and set the margin to 20px... you total div width will actually be 340px (20 on left, 300 in the middle, 20 on the right).

There is a lot of articles out there on box theory. This one made sense to me: Box Model & Positioning - A Beginner's Guide to HTML & CSS and has good visuals of boxes.

 

Re: Site Compatibility/Width & Height Issue

Alright thank's Ill keep this thread open in case anyone else has anything to add

 

Re: Site Compatibility/Width & Height Issue

Instead of doing all of that couldn't I just do this?
ehow-make-website-resize-resolutionl

Or would that not fix the problem in my case?

EDIT: I don't think it fixes that, should I change my footer and header width (that are set to 100%) to like 1000px 1000px?

 

Re: Site Compatibility/Width & Height Issue

That will not cause something you have set at a "Fixed Width" of 960px to expand to more than 960px. If your screen is 1200 pixels wide, your "body" will stretch to 1200 pixels.... but your div that is set to 960px will still only be 960px... leaving a 240 pixel gap.

When you set a fixed width you are telling the browser "this object should be exactly 960 pixels wide, no more, no less."

Kind of like a cookie cutter, no matter how big your cookie dough is rolled out on the counter... your cookie cutter is not going to grow bigger just because you have more dough to cut out of.

 

Re: Site Compatibility/Width & Height Issue

I see...How do I make it so that the browser will scale to whatever resolution.
Much like in this site:
NARUTO Shippuden - OFFICIAL U.S. Site - Watch the Anime Online Here!

(When you zoom in and zoom out, the sites text and pictures just look smaller or bigger, it doesn't do what my site does).

I am sure there is a code that will let me do this,
or at least hint me to what I could change in order to do so

 

Re: Site Compatibility/Width & Height Issue

It is not a code or CSS Property that you can just add to a class. It would be a reworking of your layout.

Your entire page has to be built around what is called "Responsive Design" which is where all of the elements in your framework expand and contract in relation to the the size of the window.

You have to design each class and div with that in mind.

You can make any css class have a width of various "percentages".... which will cause your div's to stretch relative to screen size...

But then you have to consider things like font size and image size as well....

For example If your font size is 10. It might look ok when your div is only 200px wide, but when it "stretches" to say 400... then a size 10 font is going to leave a lot of "empty space" in the div. Your font size will not just automatically upsize itself to size 20. So you have to manage font as responsive as well.

So in short, it is a complete "method of design" not just a simple change you can apply universally to your site at once.

 

Re: Site Compatibility/Width & Height Issue

Also the example you posted. The only thing that is "responsive" or adjusting based on window size is the background... the rest of the site is "Fixed" but centered into the site. So if a person has a really large resolution it will be a tiny box in the middle of a huge background (like my attached picture).

You will notice if you shrink the window smaller than the fixed width "box" in the center with content it will simply just go off screen.

 

Re: Site Compatibility/Width & Height Issue

K I think I will restart to the point where it was working in different resolutions and use the site you posted to go on from there.

Thank's!