How do I get the image to repeat the correct height?

[damezumari]

I have three div blocks defined like this:

#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}

#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}

#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}

The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.

Kind regards,

Jan Nordgreen

[SAM]

Re: How do I get the image to repeat the correct height?

damezumari a écrit :

I have three div blocks defined like this:
>
#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}
>
#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}
>
#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}
>
The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.

<script type="text/javascript">
function $(id) { return document.getEle mentById(id); }
function maxHeightDivs(d ivs) {
divs = divs.split(',') ;
var H = 0, ok=false;
for(var i=0; i<divs.length; i++)
if($(divs[i]) &&
$(divs[i]).offsetHeight &&
$(divs[i]).offsetHeight> H ) {
H = $(divs[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<divs.length; i++) $(divs[i]).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs(' left1,left2,lef t3');
}
</script>



Variante :

<script type="text/javascript">
function $(id) { return document.getEle mentById(id); }
function maxHeightDivs() {
var H = 0, ok=false;
for(var i=0; i<arguments.len gth; i++)
if($(arguments[i]) &&
$(arguments[i]).offsetHeight &&
$(arguments[i]).offsetHeight> H ) {
H = $(arguments[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<arguments.len gth; i++)
$(arguments[i]).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs(' left1', 'left2', 'left3');
}
</script>


not tested with IE

--
sm

[damezumari]

Re: How do I get the image to repeat the correct height?

Thank you!

I put your code just before </bodyand it worked like a charm!

Kind regards,

Jan Nordgreen