Hello people. I recently finished (or so I thought) my website for my Web Portfolio class. I designed the site using CSS for a 1024X768 screen resolution. The way the teacher taught us how to do it, was just make giant jpg files for the entire site, and image map links to them, which I don't really feel is web design.

 

Anyways, the teacher is now complaining about view-ability on his microscopic netbook, which is probably running a really low resolution. Obviously there would be scroll bars, which may annoy him but he's the one using the tiny wanna be laptop. The problem is that when you scroll left/right on a small window, the header doesn't move. I want the header to always stay at the top, but I would like it to scroll left/right if the window is small enough where that is required. Basically he is unable to click on any links that are in my header on the right side of the page.

 

If anyone can tell me what I can change to make the header both stay at the top when scrolling up/down, and scroll with the page left/right that would be great. Or any other ways to make my netbook loving teacher happy. :/

 

Here are the links to the site and my CSS. Just make your browser small enough that the horizontal scroll bar appears, and try using it, and you'll see the header doesn't move.

 

http://seanpennock.com

CSS File

 

Thanks

At the moment you have position: absolute and position: fixed in the same style for the #header. Position: fixed seems to have taken priority because it's coded last.

 

You can make position: fixed work vertically but move horizontally to center in different window resolutions.

 

One way is to use these styles (taken from a menu) at the top of a page:-

#menuh-container
{ position: relative; z-index: 5;
width: 770px;
margin: 0 auto;
	padding: 0; 
border: none; 
}
#menuh
{ background-color: #000000; height: 44px; 
position: fixed; top: 0;	
line-height: 1.5;
font-size: 14px;
width:770px;
margin: 0;
padding: 0; 
border: none; 
}

 

The #menu-container has a width and margin: auto; so it will move sideways to center in large window resolutions.

The menuh div is coded inside the #menu-container and has the same width and position: fixed; top: 0; (but no left or right sizes) so it stays at the top of the window as you scroll, but will move with the #menu-container when that div centers in large resolutions.

it's still not working, I changed my CSS file as follows and the header still does not scroll.

 

#container {
position:relative;
width:980px;
margin: 0 auto;
padding: 0;
}
#header {
position:fixed; top: 0;
width: 980px;
margin: 0;
padding: 0;  
}

 

I don't see the difference between what I changed and what you posted, other than I don't have text related things because I have no text in my header...

so is this impossible or something? It seems to me like it is. which means I will have to redesign the whole site smaller so the teacher can use his netbook :/

Cant you just remove position fixed from #header{} ?

I could, then the whole page would scroll. But the entire reason I am using css is to keep my email at the top of the page at all times so people don't have to look for it. and I plan on adding content which will make the page taller and don't want them to have to scroll all the way up to find it :/

 

If I can't fix it, I'll probably end up using javascript to detect screen resolution, and if its too low, send it to a version with the #header{} set to absolute and not fixed. then later if I feel like it I could actually redesign the page to be smaller and fit their screen...

 

I'd rather just be able to scroll left/right. It's not making sense to me why that should be a difficult thing to achieve.

You're correct that position: fixed doesn't scroll when the window is small. My solution only works to allow the position: fixed div to move and center in larger resolutions.