Resizing Divs

Can someone help me resize this webpage. I am new to html and got this template I like alot, but I cannot figure out how to resize it so it looks better on 17-19" monitors. The width of most of the divs is set to 1180px wich looks great on my 22' monitor with a high resolution but terrible on 17" monitor

I have been fiddling on and off with this for weeks now. I watched a ASP.NET training video that said I could make the divs 100% wide instead of set pixel amount so they would resize according to different monitor sizes as well as resolution settings. This is exaclty what i would like to happen.

The webiste is www.bill-moran.com and I have attached the original css as well as my attempt at revising it, which is not working so well .......

The width is 1180px because the background image is designed to fit exactly that width. Changing the width to 100% is trivial, but your layout will be visually "broken" as a result. You would need to revise the design to work properly with percentage dimensions.

Quote:

---

Originally Posted by SambaNeko

The width is 1180px because the background image is designed to fit exactly that width. Changing the width to 100% is trivial, but your layout will be visually "broken" as a result. You would need to revise the design to work properly with percentage dimensions.

---

Thank you so much for taking the time to help me with this.

Is it do to the fact the in the CSS the body background is set to the image that is so big? The background image is 1416 x 616?

To redesign I am assuming I would have to elimate the background image?

The problem isn't simply that the background image is "big," but that it's designed to match up with the markup at a specific size. The space between the visual "edges" (where the blue ribbon folds and there's a drop shadow) on the image is 1180px wide: this fits with the div's width of 1180px, so that your primary content stays contained within the middle of the image. If you change the div's width to 100%, then your content is allowed to outgrow the 1180px visual area of the background image.

You could eliminate the background image, but it seems like that would be removing much of the design. You might want to look for a different template with what's often called a "liquid layout" - these are designed with percentage dimensions to fit any resolution.

Quote:

---

Originally Posted by SambaNeko

The problem isn't simply that the background image is "big," but that it's designed to match up with the markup at a specific size. The space between the visual "edges" (where the blue ribbon folds and there's a drop shadow) on the image is 1180px wide: this fits with the div's width of 1180px, so that your primary content stays contained within the middle of the image. If you change the div's width to 100%, then your content is allowed to outgrow the 1180px visual area of the background image.

You could eliminate the background image, but it seems like that would be removing much of the design. You might want to look for a different template with what's often called a "liquid layout" - these are designed with percentage dimensions to fit any resolution.

---

Thanks again for sharing your insight and knowledge with me.
I am curious though, Why would someone design a site to only work on such a big monitor?

Quote:

---

Originally Posted by billboy

Thanks again for sharing your insight and knowledge with me.
I am curious though, Why would someone design a site to only work on such a big monitor?

---

Maybe they favour one size over another but it is the same for people whom insist on creating websites that only works with a particular browser, for example Internet Explorer. That is rather annoying in my opinion, the fact that the site is customized to one particular browser.

Quote:

---

I am curious though, Why would someone design a site to only work on such a big monitor?

---

As a general trend, monitor resolutions are increasing and designers like taking advantage of the available space. You'll see fixed-size layouts more frequently than percentage-based ones as well, because it's easier to design around fixed spaces (as well there are usability considerations: it's more comfortable to read text that wraps within a reasonably-sized area than extends to a length of 1920px).

Usually (for a fixed-size layout) you'll pick a target size based on your audience. If your site's for tech geeks, they'll probably have higher res monitors, whereas if it's for the elderly, lower res means things look bigger, so 800x600 might be a good choice. These are generalizations, but there are actual demographic analytics out there somewhere, waiting to be Googled.