CODEWITHSUNDEEP
csscss-floatcss-position
DJ Howarth
DJ Howarth

Reputation: 582

CSS Text on an Image

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.

Upvotes: 1

Views: 367

Answers (3)

Starx
Starx

Reputation: 78971

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>

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

i think you put the text on the image

you can used position on as like this

css

.parent{
    position:relative;
    width:600px;
}

.child{position:absolute;
    top:0;
    left:0;
    right:0;
    color:white;

}

HTML

<div class="parent">
    <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="" />
    <div class="child">This is dummy Text put here any text
        This is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is 
        dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any text</div>
</div>
​

Live demo here http://jsfiddle.net/rohitazad/R82Ge/1/

Upvotes: 1

sha256
sha256

Reputation: 3099

No, not like this. if you want text on image, you should use the section.png as div oc5's background image. and expand.png as div id5's background image. you can set both in css file or in <style> tag.

Upvotes: 2

Related Questions