Results 1 to 7 of 7

Thread: Resizing Divs

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2009
    Location
    Los Angeles
    Posts
    1,335

    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 .......
    Attached Files Attached Files

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Resizing Divs

    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.

  3. #3

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2009
    Location
    Los Angeles
    Posts
    1,335

    Re: Resizing Divs

    Quote Originally Posted by SambaNeko View Post
    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?

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Resizing Divs

    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.

  5. #5

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2009
    Location
    Los Angeles
    Posts
    1,335

    Re: Resizing Divs

    Quote Originally Posted by SambaNeko View Post
    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?

  6. #6
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: Resizing Divs

    Quote Originally Posted by billboy View Post
    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.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  7. #7
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Resizing Divs

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width