CODEWITHSUNDEEP
htmlcss
kamil1995b
kamil1995b

Reputation: 151

Text block over image

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...

enter image description here

And how I want it to look...

enter image description here

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;
}

Upvotes: 2

Views: 3480

Answers (3)

Rob
Rob

Reputation: 570

<div class="img_destination">
  <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
  <h2 id="featured_destination">
      <span> &gt; &gt; Explore Fuerteventura
           <span class="smaller">The island of natural beauty</span>
      </span>
  </h2>
</div>

and CSS:

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

h2 span.smaller {
    padding-left: 20px;
    font-size: 10px;
}

Try that. Here is example: http://jsfiddle.net/8PLaB/ Is that what You are looking for?

Your spans .spacer doesn't work because they are empty and browser simply doesn't show them. I think that if You insert in them   then they will do their job but it's not good solution in my opinion. Empty tags never are good solution.

Upvotes: 1

j08691
j08691

Reputation: 207900

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;
}

Upvotes: 1

ph33nyx
ph33nyx

Reputation: 301

Here is what you posted:

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

I would suggest a couple different things. Firstly, instead if using >> for those arrows, use the &gt;&gt;. Sometimes extra symbols get rendered incorrectly by the browser, so it is always safest to encode them when you want the display to be literal. Also, I would not use an empty span tag to create whitespace since it tends to clutter up the markup.

But your primary issue is that you need to change the way your span tags are nested to NOT include the ">>Explore Fuerteventura" inside any span tags so that the two sections of text are styled differently. I think your aims can be achieved by simply cleaning up your markup to something more like this:

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

Upvotes: 2

Related Questions