Question

I have the hardest time with CSS because it is so fickle it seems. Need to help with this.

I want my “section.png” image to be the Header Bar, which is clickable, and a table Expands and Collapses as you click the Header Bar.

<table width="100%">
 <tr>
 <td width=80% align=left>
 <font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font>
 </td>
 <td align=right><font color="white" size="2">
    <div id='oc5' style="border-style: none; vertical-align:bottom;">
<img src="http://.../images/expand.png" width="15" height="15" style="border-style: none; vertical-align:top;">&nbsp;Show&nbsp;
</div></font>
</td>
</tr>
</table>
</div>

^^^
Everything in the “Div” above needs to be on top of the section.png image.
^^^

<div id="id5" style="display: none">    

<table width=80% align="center">
<tr align="left">
    <td colspan="2" align="right">
   Hidden text - Until Header Bar is Clicked.
    </td>
</tr>
</table>
</div>

I have looked around for answers, regarding this issue. I know it has to do with CSS and float or position and absolute or relative. IDK, I cant figure it out. Can someone steer me in the right direction.

Answer 1

The correct way to do this, would be to set a background instead of adding a image element

<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
    <div class="text">...</div>
</div>