Background

[unidox]

I have this:

 

div.admin_side_txt {
    width: 193px;
    height: 29px;
    color: #FFFFFF;
    font-size: 10px;
    background-image: url(../images/admin_side_bg2.gif);
}

 

and here is the html:

 

<div class="admin_side_txt">Hi1</div>
            <div class="admin_side_txt">Hi2</div>
            <div class="admin_side_txt">Hi3</div>

 

Now what I am trying to do is leave the background in the same place it is now, but have the text move over 15 px to the right and 15 px from the top. How do I do that.

[Stooney]

div.admin_side_txt {
    width: 193px;
    height: 29px;
    color: #FFFFFF;
    font-size: 10px;
    background-image: url(../images/admin_side_bg2.gif);
    margin-left: 15px;
    margin-right: 15px;
}

[unidox]

But that moves the background over...

[Stooney]

Whoops, by margin I meant padding.  I apologize.

 

padding-left: 15px;

padding-top: 15px;

[unidox]

I got this so far:

 

div.admin_side_bg2 {
    width: 193px;
    margin-top: 0px;
    margin-left: 0px;
    background-image: url(../images/admin_side_bg2.gif);
}
div.admin_side_txt {
    color: #FFFFFF;
    font-size: 10px;
    text-align: left;
    margin-left: 15px;
    height: 29px;
    width: 193px;
}

 

<div class="admin_side_bg2">
                <div class="admin_side_txt">Hi 1</div>
                <div class="admin_side_txt">Hi 2</div>
                <div class="admin_side_txt">Hi 3</div>
            </div>

 

Just the text isint going down 15 px. Now what

[TheFilmGod]

.admin_side_bg2 {

width: 193px;

margin: 0;

padding: 15px 0 0 15px

background: url(../images/admin_side_bg2.gif);

}

.admin_side_bg2 p {

    color: #fff;

    font-size: 10px;

    line-height: 29px;

}

 

<div class="admin_side_bg2">

<p>Hi 1</p>

<p>Hi 2</p>

<p>Hi 3</p>

</div>

[unidox]

Nope

 

Is there a different approach?

[nano]

You could just create a new div for the background/box and then a sep. div for the text.

 

and for the background just have a position: absolute; with background: url(image.gif) center center no-repeat;

 

That way you can control both elements separately?

 

Cheers.