I have a fairly simple looking style sheet that gives me a 3 column page with fixed width left and right columns in which I have put an image each side and a fluid center column.
The only problem that I have is that right hand image is only partly shown and the browser window always opens up with the bottom scroll bar indicating that there is more content to the right ie the missing part of the image.
I would be really grateful if somebody could point me in the right direction with this please
Example can be seen at havenswift dot co dot uk slash ian dot html
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Your solution has got rid of the initial problem that I had but I now have an issue when I add images to the centre block.
When I make the browser window smaller than the width of the largest image all of the text and images disappear completely.
I have had a play around with different things and I guess it is something to do with the way that I have added the images in the html code but I am still learning about all of this and not sure how to change it so this doesnt happen.
I was able to re-produce the problem. Question now is how you want it solved. If the image is too big, what do you want to happen?
- Should the image auto scale to fit?
- Should there be a horizontal scroll bar and the right curtain should shift to the right to create room for the image
- Other options?
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
1) I would be very interested to know how to auto scale the images to fit the available width - I think this would be useful although I am not sure if that would be the best way for this page
2) I presume you are saying that the left and right curtains would stay the same width and a horizontal scroll bar would appear when the width is less than the image width. I guess this would then make it appear that the curtain would slide across the centre column.
I think option 2 would be the best way but as I said above I would be very interested in both solutions.
OK here's the first solution. Note that if you change the Width, the Height gets adjusted relative to the width change. So heigth and width aspect ratio stay the same. However, because you are changing the width/height on screen, images could look pretty poor. Just test to see if it works for you. Changes in red. I will get back to you with the second option soon. Just add id='img' to all images on your main content pane.
The best option by the way would be not having to display images that are too wide to fit the content
Code:
<!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=utf-8" />
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.mybody #container {
width: 100%;
text-align: left;
background: #000000;
color: red;
}
.mybody #img {
/* Width of screen - side curtains and padding and margin */
width:expression(document.body.clientWidth - 460);
}
.mybody #left {
float: left;
width: 200px;
height:844px;
padding: 15px 0;
background: #000000;
background-image:url(http://havenswift.co.uk/images/RedCurtainLeft.jpg);
background-repeat:no-repeat;
}
.mybody #right {
float: right;
width: 200px;
height:844px;
padding: 15px 0;
background: #000000;
background-image:url(http://havenswift.co.uk/images/RedCurtainRight.jpg);
background-repeat:no-repeat;
}
.mybody #left h3, .mybody #left p, .mybody #right p, .mybody #right h3 {
margin-left: 10px;
margin-right: 10px;
}
.mybody #mainContent {
margin: 0 12em 0 12em;
padding: 0 2em 0 2em;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body class="mybody">
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
<div id="mainContent">
<img src='yourimage.jpg' id='img'><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br class="clearfloat" />
</div>
</body>
</html>
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Left and right curtain stay where they are. If needed (because of wide image or long text) a horizontal and vertical scrollbars gets displayed on the maincontent div. So not all the way to the right of the screen to the right of the right curtain, but on its left side. When you scroll left/right or top/down the curtains stay where they are. Changes in red:
Code:
<!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=utf-8" />
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow:hidden;
}
.mybody #container {
width: 100%;
text-align: left;
background: #000000;
color: red;
overflow:hidden;
}
.mybody #left {
float: left;
width: 200px;
height:844px;
padding: 15px 0;
background: #000000;
background-image:url(http://havenswift.co.uk/images/RedCurtainLeft.jpg);
background-repeat:no-repeat;
}
.mybody #right {
float: right;
width: 200px;
height:844px;
padding: 15px 0;
background: #000000;
background-image:url(http://havenswift.co.uk/images/RedCurtainRight.jpg);
background-repeat:no-repeat;
}
.mybody #left h3, .mybody #left p, .mybody #right p, .mybody #right h3 {
margin-left: 10px;
margin-right: 10px;
}
.mybody #mainContent {
margin: 0 12em 0 12em;
padding: 0 2em 0 2em;
height:844px;
overflow:auto;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body class="mybody">
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
<div id="mainContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br class="clearfloat" />
</div>
</body>
</html>
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Last edited by Yeroon; 02-23-09 at 09:58 AM.
Reason: Changes in red
Please note that in the current setup you assume a visitor always has a minimal browser window height of 844pixels. People with a smaller viewport might get a weird effect where the bottom arrow of the vertical scrollbar sits outside the visible part.
Will think of a better solution. But the high side curtain images kind off force us to use the big height.
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Many thanks for all your suggestions and apologies for not coming back to you sooner - I never received an email to say that there had been an update to this thread so didnt come back and see your answers straight away !!
I have chosen to go with the second option and while I know that having images of this size isnt ideal my partner is insisting that this is the look that she wants !!
Is there any way of preventing the scroll bars from appearing in the maincontent div as I think it would look much better if these didnt show
Slowly starting to get to grips with CSS now so many thanks to you again !!
To hide scrollbars on any element specify the overflow:hidden; css attribute for it.
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Linear Mode
