Question

I am currently having a CSS problem and I hope someone can help me since I am a very beginner.
I am trying to overlay and image over another image.

When I use inline code it works fine, for example:

http://imageshack.us/photo/my-images/440/screenshot7cx.jpg/

    <div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
    </div>

But if I try to insert in my CSS file direct it not work.

http://imageshack.us/photo/my-images/577/screenshot8gvh.jpg/

    <style>
    #square_icon { position: absolute; top: 12%; left: 36%; };
    </style>

Why it not working when I include in my CSS file? Again I am sorry I am very amateur but I hope someone can help me understand this issue.

Thank you alot,
Patrick

Answer 1

if you want to style the div by id, you should give it an ID:

<div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
</div>

and not a class

The corresponding styles:

<style>
    #square_icon { 
      position: absolute;
      top: 12%;
      left: 36%; 
    }//there is no ';' here
</style>

Also you made a mistake as mentioned above.