ansaurus

Question

Answer 1

+2 A:

Set the text to be position:absolute and the containing div to be position:relative

And also center the div using margins and not the deprecated align attribute..

<style type="text/css">
    .container{
           position:relative;
           margin-left:auto;
           margin-right:auto;
           width:1024px;}
    #l1 {
       position: absolute;
       left: 20px;
       top: 30px;
       color: #03C;
       text-align:left;
    }
</style>


<div class="container">
    <div id="l1">
       some
   </div>
 <img src="some.jpg" width="1024" height="788" />
</div>

Gaby 2010-10-19 09:19:00

I tried but it doesn't work

demas 2010-10-19 09:23:47

@demas, i had an error .. i needed to set dimensions on the container div to match the image.. now it should be fine ..

Gaby 2010-10-19 09:26:08

Thanks. That is what I want :)

demas 2010-10-19 09:28:39

Answer 2

+1 A:

I would do it like this:

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /*reset default margins, paddings, set body font*/
        html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
        body { font:normal 62.5% tahoma }

        #my-image { 
            width:1024px; height:788px; 
            background:url(some.jpg); /* use image as background */
            margin:0 auto; /* this centers the div in the browser horizontally */
            position:relative; /* set positioning context for children */
        }

        #my-text { 
            position:absolute; 
            left:0px; top:0px; /* left and top are with respect to the parent div */ 
        }
    </style>
</head>
<body>

    <div id="my-image">
        <div id="my-text">some text</div>
    </div>

</body>
</html>

Moin Zaman 2010-10-19 09:20:06

I changed left and top in the #my-text, but nothing the change.

demas 2010-10-19 09:27:24

0 needs no unit. if you change it to a value other than 0 you need to add `px`.. so try something like this: `20px`

Moin Zaman 2010-10-19 09:38:51

Excuse me :) It was my mistake.

demas 2010-10-19 09:43:17

I can not edit my vote, because it is locked. But if you change your answer I'll do it.

demas 2010-10-19 09:44:28

I added px to the 0's

Moin Zaman 2010-10-19 11:55:47

ansaurus

tags:

views:

answers:

Positioning text on the image

related questions