tags:

views:

82

answers:

1

Hi, I'm having a hard time finding the resources to solve my particular dilemma.

I'd like to make a simple horizontal type scroll bar site. This site would contain nothing but images stacked up side by side and each image would have a 100% browser screen height. No text, menu buttons, etc.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="margin:0; padding:0; overflow:scroll; height:100%;">
<div>
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/1.jpg" />
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/2.jpg" />
</div>

</body>
</html>

Floating works when the combined image widths don't overlap the width of the browser window, but when I set the image style heights to 100% they don't float left, they stack up over each other.

Is there a way I can make the images continue to overflow to the right of each other?

Seems crazy that I'm having so much trouble with something that seems like it should be easy to implement.

Thanks very much for looking, I really hope this is possible.

E.

+1  A: 

height: 100% is not really possible with CSS, since the height attribute doesn't refer to the browsers viewport, but the height of the parent element (which is the div or body in your case). The body again will not expand to the browsers viewport, its height will autoshrink to your content.

I would heavily suggest to use JavaScript for this task. It will save you a lot of PITA.

Using jQuery for instance, you could do something like

$(document).height() - $('body').offset().top 
$(window).height() 

Or with "native" JavaScript: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ (which is not so much fun... cross browser issues, as always...).

Mef
Damn shame. Thank you for your response, I appreciate it.
Emile