CSS header with flexible decorative images on both sides
I am trying to make a decorative header with horizontal lines on both sides, similar to http://www.impressivewebs.com/centered-heading-horizontal-line/ but with the following restrictions:
- Custom title support
- Fluid - stretches to fit the page width
- Horizontal lines are images - each line consists of a decorative "tip" of the image, followed by a repeating section that must stretch as far as necessary to fill the width of the page
- Fixed-width tip decorative images (297 pixels each)
- The solution should work with a background image on a web page.
- As the page width decreases, the repeating sections of the images become smaller and eventually disappear. The heading text in the middle is then wrapped around multiple lines if necessary.
I am trying to use CSS only for the solution, although I would consider JavaScript help if this cannot be done with pure CSS.
I've seen several similar questions on SO, but I don't think any of the solutions will do what I'm looking for.
Here is my own naive attempt (also at http://jsfiddle.net/39qLr/1/ ). For simplicity, I've colored the "tip" of the images red and the flexible repeating images yellow. The obvious problem is that the yellow parts don't appear right now!
HTML:
<div class="heading-container">
<div class="left-tip"></div>
<div class="left-filler"></div>
<h1>Heading Text</h1>
<div class="right-filler"></div>
<div class="right-tip"></div>
</div>
CSS
.heading-container {
display: table;
width: 100%;
}
.left-tip, .right-tip {
background-color: red;
width: 297px;
display: table-cell;
}
.left-filler, .right-filler {
background-color: yellow;
display: table-cell;
}
h1 {
text-align: center;
display: table-cell;
}
I am very grateful for any guidance!
source to share
With the help of a colleague, we managed to get as close as we think, perhaps:
HTML (as before):
<div class="heading-container">
<div class="cell left-tip"> </div>
<div class="cell left-filler"> </div>
<h1 class="cell heading-text">Heading Text</h1>
<div class="cell right-filler"> </div>
<div class="cell right-tip"> </div>
</div>
CSS
.heading-container {
display: table;
width: 100%;
}
.cell
{
display: table-cell;
}
.left-tip, .right-tip {
width: 297px;
background: red;
}
.left-filler, .right-filler {
background: yellow;
}
.heading-text {
width: 1px;
white-space: nowrap;
}
The secret sauce that makes it work is as follows:
- width 1px in header element
- addition
white-space: nowrap
-
nbsp;
in empty DIVs
Granted, this doesn't meet my original criteria for wrap text across multiple lines, but I think the overall effect works as well as we could have hoped. Also, the markup is a bit heavy for DIVs that have no semantic purpose.
Thank you for all the suggestions and I hope it will be helpful to someone else one day!
source to share
I think you are looking for something close to this:
I have clicked the images inside your fillers so you can use the aboslute position in relative. Who will make them to the end.
Download with your widths to get the correct setting and take into account the height.
<div class="right-filler">
<div class="right-tip"></div>
</div>
.left-tip, .right-tip {
background-color: red;
width: 297px;
height:50px;
position:absolute;
}
.left-tip{
left:0;
}
.right-tip{
right:0;
}
source to share