Question

I’m stumped on this one. What’s the most elegant/efficient way to make this happen? I’ve got an h3 to the left, the repeating symbol/image (“::::::”), and then a link. This occurs between several h3/link areas throughout the site.

Also note, I’m using the twelve column schema, specifically Foundation.

Answer 1

Set a background element with the repeating symbol and a width of 100%, and then set a white background to the text and place it over the background.

<div id="wrapper">
   <div id="text1">Featured Courses</div>
   <div id="text2">See All Courses</div>
</div>

And CSS:

#wrapper{
   width:100%;
   background:url(image.png) repeat-x;
   height:20px;
}
#text1, #text2{
   background-color:#fff
   padding:5px
   height:10px;
}
#text1{
   float:left
}
#text2{
   float:right
}

This is probably not exactly what you need but you get the idea.