Question

I have used the following tutorial to make a text block over an image: http://css-tricks.com/text-blocks-over-image/. I found it really easy actually, and quite useful, but there is one thing I could never work with, and these are span tags.

The issue I’m having is that I want to format the second part of the text in the span to have a lower font size and have a left padding. I’ve tried including a second span and defining it in the css file, but it doesn’t really do anything, just stays where it is. I also tried extending the block until the end of the picture, but a width of 1000px on each wouldn’t work.

Here’s some pictures, as they speak a thousand words…

How it looks on mine…

And how I want it to look…

And here’s some code…

<div class="img_destination">

      <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />

      <h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>

</div>

CSS…

    /* Featured Destination */

.img_destination {
   position: relative;
   width: 100%; /* for IE 6 */
}

h2#featured_destination {
   position: absolute;
   top: 355px;
   left: 0;
   width: 100%;
}

h2#featured_destination span {
   color: white;
   font: bold 28px/45px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgba(00, 36, 63, 0.7);
   padding: 10px;
}

h2#featured_destination span.spacer {
   padding:0 5px;
   background: none;
}

Answer 1

Is this the effect you’re after: jsFiddle example.

I changed the text div to:

<h2 id="featured_destination">
    <span class="bold">>> Explore Fuerteventura</span><span class='spacer'></span><span class='spacer'></span>The island of natural beauty
</h2>

I wrapped the first chunk of text in its own span so you can style it with a bold font face while the rest of the text has a normal weight.

And this is the CSS I modified:

/* Featured Destination */
.img_destination {
    position: relative;
    width: 100%;
/* for IE 6 */
}

h2#featured_destination {
    position: absolute;
    top: 355px;
    left: 0;
    width: 100%;
    background: rgba(00,36,63,0.7);
    font: 28px/45px Helvetica, Sans-Serif;
    color: #FFF;
    letter-spacing: -1px;
}

h2#featured_destination span {
    padding: 10px;
}

h2#featured_destination span.spacer {
    padding: 0 5px;
    background: none;
}

.bold {
    font-weight: 700;
}