Consider a PSD wordpress theme design with a blog post title like this:
Apparently there’s a whole image background on the page instead of a solid color wherein the page title falls into, making the situation a little more complicated. Because if it’s just a solid color, I can simply do the following to achieve a flexible page title with a floating complementary background (or a solid dark red border) to the right.
The HTML:
<h1><span>page title</span></h1>The CSS:
h1 {background:url(border-bg.png) repeat-x 0 50%} /* the dark red bar */
h1 span {display:inline;padding:0 4px;background:#fff} /* with #fff as the page background solid color */Short and sweet.
However, with a cloth of varying colors as the page background instead of a solid color such as the example shown at the beginning of this post, the situation is a little more complicated. And the span has to be no background at all but transparent.
The solution
The solution is to make separate elements for page title and the complementary background of dark red border, both floated left, with their parent fixed in width and overflow:hidden.
The HTML:
<h1>
<span class="wrap">
<span class="title">page title</span>
<span class="complementary"></span>
</span>
</h1>The CSS:
h1 {
width:500px; /* width of the title area */
overflow:hidden;
}
.wrap {
display:block;
width:5000px; /* sliding rail */
white-space:nowrap;
overflow:hidden;
}
.title {
/* no background for title text */
float:left; /* I slides on the rail */
padding:2px 8px; /* maybe just right padding or margin */
}
.complementary {
float:left; /* I slides on the rail, immediately after .title */
width:500px; /* equals or wider than the width of h1 */
background:url(border-bg.png) repeat-x 0 50%;
}It’s just like looking at a railway stretching from your far left to your far right through a window, and there’s 2 trains on it. One is constantly varying in length and the other is adjusting its position accordingly.