Help with a header

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

13-Dec-11 13:24
I'm in the process of designing my first site. I'm designing it using only html and css (that's all I've started to learn so far). One of the many problems that I have run into is the ability to scroll to the far right of the page on my mac or on my phone (if I zoom all the way out). What happens is the majority of the body stays at around 1024px (or whatever size the window was before I started to scroll) but the header goes to around 2500px (because thats how long I made it in order to keep it extending when i make my browser window larger). I hope I'm explaining my problem right .

The site is: demo.lorianhealth.com/NewHome.html

If you visit the site and make the window larger and smaller it will most likely look how I'd like it to. But if you view it on your phone or on a mac or a pc that lets you scroll to the right, you will see the problem.

Do I need to make the banner 1024px wide and make a sprite that will go behind it? If so, can I make the sprite start at a certain point and only extend right?

The styling on the body is currently:


width:100%;
overflow-x:hidden;
height:923px;
min-width: 1024px;



I appreciate any help that I can get regarding this issue!

Thanks!
17-Dec-11 03:57
Hi DHlebo,

It's a bit hard to figure out exactly what you want to do, but it sounds like you just want that purple rectangle to stretch across the viewport width (regardless of how wide the viewport is)?

I'd do that with a horizontally repeating purple background image on the body element. Then give your logo container and the container with the phone number a white background (if you haven't already done so) to obscure the body background image.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
20-Dec-11 23:10
Thank you so much for your help!
07-Jan-12 03:42
@DHlebo: You're welcome Looks like you got it working!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

 
New posts
Old posts

Follow Elated