CODEWITHSUNDEEP
css
dot
dot

Reputation: 15670

css newbie looking for a more elegant css solution to indent text

I have the following css class: 

#header h1 {
   float:left;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: 2.5em;
   margin-top: 8px;
   margin-left: 0.8em;
   padding-left: 40px;
   background: url("h1bkgrnd.png") no-repeat left center;
   height: 100px;
}

And this html:

 <div id="header">
   <h1><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Services</h1>
</div>

it works fine, but as you can see, I have a bunch of &nbsp; to push the text to the right. Otherwise, it sits on top of the picture. Is there a better way to do this?

Thanks.

Upvotes: 2

Views: 199

Answers (5)

Wish
Wish

Reputation: 23

Separating out the image in an image tag looks like the best option if you do not really want the image to be in the background of the text.

HTML:

<img src="http://placekitten.com/g/50/100"/>
<h1>Our Services</h1>

CSS:

img{
 float:left;
 width:50px;
 height: 50px;
}

h1{
 padding-left: 60px;
}

http://cssdeck.com/labs/xixebfxw. In this case, I had to re-size the image by giving appropriate width and height as the text! Also margin-left also can be used alternatively for padding-left.

And if the spacing is not a matter of concern and you just need to place the text to the right and image in the left without removing the image as the the background, you can do: http://cssdeck.com/labs/wml9occf But this may not be the best option.

Upvotes: 0

Cam
Cam

Reputation: 1902

It depends, what are you trying to indent, are you indenting from another element or from another text.

p {
  margin-left: 20px;
}

p {
  text-indent: 20px;
}

Upvotes: 0

A. Cristian Nogueira
A. Cristian Nogueira

Reputation: 735

Add:

#header h1 {
    padding-left: 20px; /*Or according with the picture size you have*/
}

Must work.

Upvotes: 1

Julio
Julio

Reputation: 2290

You have a few choices, but text-indent seems the most appropriate.

Upvotes: 0

user229044
user229044

Reputation: 239481

Unsurprisingly, to indent text you should use the text-indent CSS property.

#header h1 {
  text-indent: 1em;
  /* ... */
}

Upvotes: 8

Related Questions