help with image border.

[MDanz]

here is the example on the website i'm creating.

 

http://www.learnated.com/test.php

 

as you can see i have a border problem.

 

i want the image and the border images surrounding it.  here's the code i did to do this.. but obviously it is not working. what is the correct way of doing this.

 

<style type="text/css">

.cornertl {
float:left;
background-image:url("b1.jpg");
width:25px;
height:20px;
}
.cornertr {
float:left;
background-image:url("b3.jpg");
width:25px;
height:20px;
}
.source {
float:left;
background-image:url("b5.jpg");
}
.leftb {
float:left;
background-image:url("b4.jpg");
width:25px;
height:20px;

}
.rightb {
float:left;
background-image:url("b6.jpg");
width:25px;
height:20px;
}
.cornerbl {
float:left;
background-image:url("b7.jpg");
width:25px;
height:20px;
}
.cornerbr {
float:left;
background-image:url("b9.jpg");
width:25px;
height:20px;
}
.top {
float:left;
background-image:url("b2.jpg");
width:25px;
height:20px;
}


.bottom {
float:left;
background-image:url("b8.jpg");
width:25px;
height:20px;
}

.layoutmiddle {
overflow:hidden;

}
.layouttop {
overflow:hidden;

}

.layoutbottom {
overflow:hidden;
}

</style>


<?php echo "
<div class='layouttop'><div class='cornertl'></div><div class='top'></div><div class='cornertr'></div></div>
<div class='layoutmiddle'><div class='leftb'></div><div class='source'><img src='$image'  /></div><div class='rightb'></div></div>
<div class='layoutbottom'><div class='cornerbl'></div><div class='bottom'></div><div class='cornerbr'></div></div>"; ?>

 

 

how do i do the image border correctly?

[ManiacDan]

Your "top" div has three children: top left corner, top border, top right corner.  The top border is set to 25px wide.

 

OUTSIDE of that, you have the image.  The image's width has no effect on your top border width.

 

-Dan

[MDanz]

is there a way to get the $image width?... the $image is not on my server so i cant use getimagesize()..

[ManiacDan]

No, you don't need to, you need to put the image inside the div so that the div auto-expands properly.  You could also use a table for this, as much as it pains me to say it.

 

-Dan