Solved

H2 element with background image, need to indent text without moving background

Posted on 2009-07-14
4
423 Views
Last Modified: 2012-08-14
Here is my heading:

<h2 class="navheading"><span class="white">Health Management</span></h2>

CSS is attached. I need to move the text to the right (indent), but if I add padding, then padding is added around the background image. How can I move the text without moving the background or changing the specified width and height? Want to keep it within 192x30, with the background image, just indent the text. Thanks.
h2 {
		font-family: Trebuchet MS, Trebuchet, Helvetica, Arial, sans-serif;
		font-size: 15px;
		line-height: 17px;
		color: #153c77;
		margin: 0px;
		padding: 0px;
		font-weight: bold;
	}
h2.navheading {
		background: #2344a5 url("http://secure.bbdesign.com/lifespanfitness2/art/gr_navheading.png") no-repeat top right;
		width: 192px;
		height: 30px;
	}

Open in new window

0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
ryangiglio earned 500 total points
ID: 24850461
Have you tried putting padding-left on the span instead of the h2?  That shouldn't cause the h2 background image to move over.
0
 

Author Comment

by:bbdesign
ID: 24850587
Yes, that works, thanks!

I actually found that by adding padding, but reducing the width and height accordingly, that works too.
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24850592
that or change the margin of the span.

h2 span{position-absolute; margin-left:10px}


0
 

Author Comment

by:bbdesign
ID: 24850768
What I missed is that I also needed to add some space above the text, and I wasn't able to do that with padding on a SPAN element. I guess you can only go left-to-right within a SPAN.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question