SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resolution to Design For & Side-Scrolling

    Hi!
    I am designing a website for a coffee shop. I want the header image to be an awning that extends past the main content area of the website on each side. The main content is 1000 px wide, and the awning that I created is 1168px wide. Now I know a common resolution is 1024, but having just a 12px overhang on each side would not be enough, so I'm wondering if I can make it so that the side-scrolling doesn't occur on the smaller screens, and it just cuts off the edges? Also, is 1024px the best guideline to go by when designing web pages? Thanks. I'll attach a picture of the awning to give you an idea of what I mean. Thanks.


    header-bg.png

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You could use a centred background-image on a 100% wide div and then the div would just shrink as required without scrollbars. The div of course would need to be outside of any page containers. If the awning is the first thing on the page then just apply it to the background of the body element instead.

    Regarding page width then that's a contentious issue these days as there is no perfect width and the best approach is a fluid width that accommodates all devices. If you absolutely must have a fixed with then 980px would be better than a 1000px as that allows for the chrome on 1024px systems and is also the measurement that the ipad bases its initial scaling on so would fit neatly.

    With so many devices around these days you should be looking at responsive design. Do a search of this forum as there have been a number of recent threads about this.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips!


Bookmarks

Posting Permissions

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