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.
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.
Thanks for the tips!