how to: dynamic navigation bar size depending on dynamic image size?
Question
I've got an image on my page consuming 25% of the width. Now I want the navigation bar on the right of it to have the same height as the image. How do I do that? I would prefer an CSS or JS solution, if possible... And I dont want to use a table...
Thanks in advance!
PS: The navigation bar is a variation of this: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
This is a part of the main page:
<style type="text/css">
#Logo {
position: absolute;
margin-left: 20px;
margin-top: 20px;
width: 25%;
border: 2px solid black;
}
#Nav {
position: absolute;
margin-left: 30%;
margin-top: 20px;
}
</style>
</head>
<body text="#000000" bgcolor="#ABECEE" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img src="xxxxxxxxxxxxxxxxx" id="Logo"></img>
<div id="Nav"><?php include("navi.html"); ?></div>
2 answers
solution1
0 2011-08-17 15:30:20
am not sure I get you right, but from what I understood you want a scrollbar for the image, so you could do something like this:
<html>
<body>
<div class="myimage">
</div>
</body>
</html>
.myimage
{
background-image: url('to-my-image');
overflow-y: scroll;
/*whatever the width and height of your image*/
height: 40px;
width: 50px;
}
solution2
0 ACCPTED 2011-08-17 15:46:37
You can't have #Logo's height affecting #Nav's height of they are both absolutely positioned (without using JS). Would something like this do the trick instead?
Update
This fiddle fits the OP's requirements more closely.
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.