Forum Moderators: not2easy
I have had a homepage design through that I need to chop up and I am not sure that the requested effect is possible. Well I can't see how/where to start. Does anyone have any ideas as to whether the following is possible and if so, I would be very grateful for any suggestions.
The problem as best as I can describe it:
* The site is left aligned, with a header and footer bar that runs 100% width
* The layout is too wide to display on a 1024 monitor (intentionally)
* There is an image that runs to the left hand side of the screen, to about half way across
* There is a gap of about 50px to the left of the rest of the content. This is the largest this gap should be
* On 1024 monitors the content should slide over to the left so that the gap is only about 10px
* The image should then shift with the content and therefore 40px of it will be out of the left of the screen
* What is more fun is that the image needs to be hooked into JQuery to provide interaction and change when the user rolls over a list of options.
A rough outline of layout - <sorry, no personal links>
I have been partially successful in the implementation but only in Firefox. IE and Safari are not interested. Any suggestions in about the implementation in general appreciated.
Many thanks for your time and suggestions.
[edited by: tedster at 3:22 am (utc) on May 21, 2008]
Interesting concept!
But links aren't allowed out here, try posting some code instead.
Here is the HTML & CSS of the partially working prototype.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
* {
padding:0;
margin:0;}#head {
display: block;
background-color:#0099FF;}
#foot {
display: block;
background-color:#663399;}
#wrapper {
border: 1px solid blue;
max-width: 1000px;
min-width: 755px;}
#container {
border: 1px solid green;}
#compress {
border: 1px solid red;
float: right;
max-width: 1000px;
min-width: 755px;
height: 400px;}
.crush {
max-width: 630px;
min-width: 400px;}
#rhContent {
border: 1px solid #000;
width: 355px;}
</style>
</head>
<body>
<div id="head"> MAIN NAVIGATION UP HERE </div>
<div id="wrapper">
<div id="container">
<div id="compress">
<table>
<tr>
<td style="border: 1px solid #EDFE0D;"><img src="images/DSC_0799-1.JPG" alt="Alt text" /> </td>
<td><div id="rhContent"> THIS AREA SHOULD NOT COMPRESS </div></td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="foot"> FOOTER DOWN HERE </div>
</body>
</html>
Thanks
I'm still getting a handle on why it works at all, cause your image is content, and gets pushed off screen due to width limitations, without creating a scrollbar.
My initial reaction would to use the image as a background in the CSS and actually let the block shrink with positioning of the background to create the same effect.
What were the dimensions of your jpg ? (Seems to work in Safari without the image being there). And just how far of the let was the border to where you wanted it seen ?
The idea of using a background image top right and using overflow hidden may be the way forward.
Image was 630px wide, shrinking to about 400.
I think that for IE 6 I would forget the effect and hard code the widths.
Safari stops the compression when you get to the width of the image, as does IE7. The bg image may get round this though - I'll give it a try.
Thanks again.
