5 replies [Last post]
shadiadi
Offline
newbie
Last seen: 5 years 33 weeks ago
Joined: 2008-11-23
Posts: 4
Points: 0

I have the folowing in my css stylesheet I am using an inage for the background but the text keeps appearing near the top of the image how can I get it nearer to the bottom of the background image?

#content h1{
height: 40px;
color: #fff;
font-family: tahoma, helvetica, verdana, arial, sans-serif;
font-size: 17px;
font-stretch: ultra-expanded;
font-weight: 500;
text-decoration: none;
background: url(../pix/headerbg.png) repeat-x left bottom;
margin-left: 0px;
margin-top: 15px;
margin-bottom: 0px;
padding-left: 15px;
padding-bottom: 0px;
}

thedooropens
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

TOp Padding might Help

Try adding top padding, which should not displace your background image.

Also, you may want to looks up some shorthand methods for your selectors (just to make it leaner)

i.e. -

{
padding:10px 0 15px 0;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 weeks 5 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

span it!

wrap the text inside the h1 like this.

XHTML

<h1><span>heading text</span></h1>

CSS

#content h1{
height: 40px;
color: #fff;
font-family: tahoma, helvetica, verdana, arial, sans-serif;
font-size: 17px;
font-stretch: ultra-expanded;
font-weight: 500;
text-decoration: none;
background: url(../pix/headerbg.png) repeat-x left bottom;
padding: 0 0 0 15px;
margin: 15px 0 0 0;
 
#content h1 span {
position: relative;
top: XXX
left: XXX
}

shadiadi
Offline
newbie
Last seen: 5 years 33 weeks ago
Joined: 2008-11-23
Posts: 4
Points: 0

mm thanks but

thanks but niether of those work.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 weeks 5 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

Worked on my machine

shadiadi wrote:

thanks but niether of those work.

This worked for me on my machine. You have a div with a background image. You want to move the text somewhere inside the div, right? The above code works for that need. Why dont you post a link to your live test site, so we can "see" whats going on.

virgil
Offline
newbie
Cebu, Philippines
Last seen: 5 years 33 weeks ago
Cebu, Philippines
Joined: 2008-12-05
Posts: 5
Points: 0

hi shadiadi, remove or

hi shadiadi,

remove or decrease the height: 40px;
if you need some spacing at the bottom, use padding-bottom

hope that helps.

you may also want to try this Dynamic Text Gloss Effect