Question

I am trying to translate my PSD file to code and I am having problems with these headers. The header would contain the name of the header, and a horizontal purple bar that stretches from the right side of the end of the name to the end of the div. I am using Foundation (responsive framework) and so I have given my header a width of three columns. I have written some code, but I am unsure how to get the purple line to not appear under the title name.

Currently, I have saved the purple line as a tileable image and set it as the background of the h3 tag. I have tried to play with the background position, but I cannot get the line from not appearing under the title name.

Here is a screenshot of part of the PSD file. To clarify, the purple bar next to Hours, Phone, and Location is not for the user to type any information onto; it is a decorative piece used to separate the different regions of information.

My code:

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3>
    </div>
</div>

.contact h3 {
    color: #444;
    background: url(../img/purpleLine.jpg) bottom right repeat-x;
}

Answer 1

This would be a perfect time to use the HTML element <span> as this is pretty much exactly what it is meant to do. After the element, add <span></span>, give it the desired width you want, and set the background image for the span element. Not sure how your framework classes would be used to define the width, so I just put ‘whatever’ in that part. You might even be able to assign a class to the span element to define its width.

HTML:

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3><span></span>
    </div>
</div>

CSS:

.contact h3 {
    color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}