Does anybody here know how to make an image have the same height as it's parent element?
Eg. if it's inside a <p> or a <div> then it'll get the same height.
I've tried to use height="100%" but then it gets 100% of the browser window height which makes it look incredibly messed up.
This is what it get's with height="100%": http://img153.imageshack.us/my.php?image=nahrw4.jpg
The code:
| Code: |
...
<p align="center" style="background-color:#ce0000;"><img src="navbar_lt.png" alt="" style="position:absolute; left:0px;" /><img src="navbar_t.png" alt="" width="100%" height="10px" /><img src="navbar_rt.png" alt="" style="position:absolute; right:0px;" /><br />
<img src="navbar_l.png" alt ="" style="position:absolute; left:0px;" /> <!-- This is the image -->
... |
I guess that it has something with position:absolute; to do but I need it to be to the left, is there any other way to do that? you can't for <p> or "normal" <div> but you will have no problem with floating <div> (the one with style="position:absolute")
first you give your image & div an id to refer to it later:
<img name="image_id" id="img_id" src="image.url" />
<div name="div_id" id="div_id" style= ......... >
then get your <div> height:
var new_height = document.getElementById('div_id').style.height
then set the height of your image:
document.getElementById('img_id').style.height = new_height + 'px'
you should also calculate and set new width so the image will not look distorted.
Still doesn't seem to happen anything.
And on FF Error Console it says:
| Code: |
Warning: Error in parsing value for property 'height'. Declaration dropped.
Source File: http://catscratches.frih.net/artistsden/test/index.php
Line: 0 |
| Quote: |
| <div align="center" id="navbardiv" style="background-color:#ce0000;"><img src="navbar_lt.png" alt="" style="position:absolute; left:0px;" /> |
image cannot be floating. only div can. duh...
also, try to use onload function to call nav_img() so that the page is fully loaded.
and if you want me to help you, try with simple page first, not the whole complete page. it will be easier for me to check. once it's ok, then you can copy paste it back to your real page.Yes, of course I appreciate your help!
Here's a link to a testpage: http://catscratches.frih.net/artistsden/test/tst.php
And a link to downloadable source (.txt): http://catscratches.frih.net/artistsden/test/tst.txt change <body> to <body onload="nav_img()">
change
| Code: |
<div align="center" id="navbardiv" style="background-color:#ce0000;">
<img src="navbar_lt.png" alt="" style="position:absolute; left:0px;" />
<img src="navbar_t.png" alt="" width="100%" height="10px" />
<img src="navbar_rt.png" alt="" style="position:absolute; right:0px;" /> |
to
| Code: |
<div align="center" id="navbardiv" style="background-color:#ce0000;position:absolute; left:0px;top:0px">
<img src="navbar_lt.png" alt="" style="left:0px;" />
<img src="navbar_t.png" alt="" width="100%" height="10px" />
<img src="navbar_rt.png" alt="" style="right:0px;" />
</div> |
for testing purpose, use html instead of php & strip off everything, like
| Code: |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="verify-v1" content="l2DE5eaX+tKkuCtQRiADzhrgtH19DoTlgHeCNFyGzCQ=" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>ArtistsDen</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function nav_img() {
var new_height = document.getElementById('navbardiv').style.height;
document.getElementById('navbarl').style.height = new_height + 'px';
document.getElementById('navbarr').style.height = new_height + 'px';
}
</script>
</head>
|
to a simple
| Code: |
<html>
<head>
<script type="text/javascript">
function nav_img() {
var new_height = document.getElementById('navbardiv').style.height;
document.getElementById('navbarl').style.height = new_height + 'px';
document.getElementById('navbarr').style.height = new_height + 'px';
}
</script>
</head> |
it will be easier for me to check it. this is just commonsense, if it's easy to read, a lot of people can spot the mistake, if it's so hard like this, they just ignore it and skip to next thread to earn their points. it just not worth it to spend half an hour for few points. they rather read more interesting topic about current event and give few paragraphs of their opinion in 5 minutes and got double points than helping you with your cryptic code here.
before you reply, just create a very, very, very damn simple html page from scratch using notepad, containing only the necessary elements then we begin from there. dump your php page now. drag it to recylce bin and fire up notepad. why do you have to stick with your cryptic web page when you don't understand basic html? (img don't float, only div can float. move the position:absolute to div)
like they said, simplify.. simplify...
can't we start over form html that only have 1 div and 1 img first? once you understand the basic, then you can slowly build your nice red box with rounded corner with any height you want.
ok, try to understand this code first:
| Code: |
<div id="navbardiv1" name="navbardiv1" style="background-color:#ce0000;position:absolute; left:0px;top:0px;height:10px">
<img src="navbar_l.png" id="navbarl1" name="navbarl1" />
</div>
<script>
var new_height = document.getElementById('navbardiv1').style.height;
document.getElementById('navbarl1').style.height = new_height + 'px';
<script>
|
if you notice, i set the initial value of the div's height to 10 pixel. try to change the div height to other value and see the image height will also change.
now you should understand how to make an image have the same height as it's parent element. But if I already know the height It's easy. Then I could just set width="10px" from the beginning. The problem is that I don't know what height it will get cause of different text size and browser. So I want the box to be intact even if the user has a larger or smaller text size than default.
you are the one who set the text size, not the user. yes, if you set the text too small, the user CAN resize it, but that is not what you should worry about.
maybe you mean screen resolution. it that is the case
1. you can detect the screen resolution
2. decide the relative position of the layer and put it there
3. decide the relative size of the layer and set it
then you will get a page that look more or less the same no matter what the screen resolution is.
but if it really about user keep changing their font size manually when they browse your site, then nobody can help you. maybe your user need a shrink.
There actually are people who have a bad eye sight, they need to change the text size and that should always be possible to do in your browser. It's very important to have it possible for others than just yourself to be able to view your page.
in that case, you should keep the page as "Accessibility" as possible on all devices, OSes and browsers, which left you to only 1 option: text only.
or the hard way, learn what you can do here: http://www.w3.org/WAI/guid-tech.html I managed to fix it with em. It goes wrong when having 1px textsize (which is impossible to read anyways 
) or when the textsize si so big that it divides into several rows.
Thanks for the help anyways!
