Wed, 2008-12-03 16:37
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;
}
Wed, 2008-12-03 17:15
#1
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;
}
Thu, 2008-12-04 02:56
#2
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 }
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Thu, 2008-12-04 17:35
#3
mm thanks but
thanks but niether of those work.
Thu, 2008-12-04 17:54
#4
Worked on my machine
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.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2008-12-05 15:26
#5
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