Desperate image positioning problem
Question
What I want is this: http://www.freeimagehosting.net/image.php?11b1fcb689.png
Edit: Added a fuller picture of what I'm trying to do. I can make it look right using absolute positioning, but when the window size is too small, the content slides off the page without a horizontal scrollbar. That's why I want to use relative positioning for the divs. Thanks again. http://www.freeimagehosting.net/image.php?75c33eaf6e.png
I only know how to do this using absolutely positioned divs, but content in absolute divs will slide off the page when the window is too small. Essentially, the image is vertically centered and aligned right on the left half of the screen. If the window is too small, I'd rather have a horizontal scrollbar than losing part of the image.
Any help would be appreciated greatly!
Mike
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
margin: 0;
}
.footer {
color: #202054;
text-align: left;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}
a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
a.footer:hover {
color: #EE001E;
text-decoration: underline;
}
</style>
</head>
<body>
<img style="position: absolute; right: 50%; top: 50%; margin-top: -128px;" src="Resources/chart.png" width="432" height="256"/>
<div style="position: absolute; left: 50%; top: 50%; margin-top: -200px; width: 368px; height: 400px;">
<!-- text content -->
</div>
<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
<a style="text-decoration: none;" href="http://www.company.com" >
<img class="footer" src="Resources/logo.png" alt="company" width="21" height="13"/>
</a>
<a class="footer" href="#">Terms of Use</a>
<a class="footer" href="#">Privacy Policy</a>
<span class="footer" style="color: #7E7E7E;">Copyright © 2009 Company Inc. All rights reserved.</span>
</div>
</body>
</html>
2 answers
solution1
0
It can work with either absolute or relative positioning as long as the image width and height are defined.
Update for your recent edit
The issue is that you need to use relative positioning. You should also have a container DIV for the image and the sidebar div, because they will still act incorrectly with only the body as a parent.
You then need a min-width on the container div, set to the min-width which you illustrate in the newer image. These things together will give you what you want.
Note that the sidebar content needs a different margin in this code I'll be posting. I'm not sure why because I'm a little rusty with my CSS but now that both are relative positioned, if you have no negative margin on the sidebar content, the top of it will be aligned to the bottom of the image. I know that margin-top: -256px will get it aligned with the top of the image. Then to vertically center them you need to add half of their difference or (256 - 400) / 2 , so you add -72px to the -256px margin to center them again.
Here's the code that works for me:
<html>
<head>
<title>Title</title>
<style>
body {
margin: 0;
}
#container {
background: #DDD;
position: absolute;
height: 100%;
width: 100%;
min-width: 900px;
}
img#image {
position: relative;
left: 50%;
top: 50%;
margin: -128px 0 0 -432px;
background: black;
display: block;
}
div#sidebar {
position: relative;
left: 50%;
top: 50%;
margin: -328px 0 0 0;
width: 368px;
height: 400px;
background: grey;
}
.footer {
color: #202054;
text-align: left;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}
a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
a.footer:hover {
color: #EE001E;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<img id="image" src="" width="432" height="256"/>
<div id="sidebar" style="">
<!-- text content -->
content
</div>
</div>
<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
<a style="text-decoration: none;" href="http://www.company.com" >
<img class="footer" src="" alt="company" width="21" height="13" />
</a>
<a class="footer" href="#">Terms of Use</a>
<a class="footer" href="#">Privacy Policy</a>
<span class="footer" style="color: #7E7E7E;">Copyright © 2009 Company Inc. All rights reserved.</span>
</div>
</body>
</html>
Note I added colors to help me along, and also I found that you must add display: block to the image.
Hope this helps.
Note: The min-width value was arbitrary. It just needs to be greater than the width of both elements. You may want to play around and see what width the sidebar starts to fall off the page (clipping to the right is unavoidable in browsers)
solution2
0 2009-07-12 08:33:26
I think you might want something like this:
<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto"> <img src='...'> </div>
But to center image vertical you will need to put it into table or use JavaScript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.