Question

I’ve been trying to create this look:

What I thought was a clever way of doing it was to create an unordered list, have the bars on the left/right use 100% of the width not taken by the logo.

Apparently, I’ve failed at this.

The site in question is live, and you can visit it here (to see the code I’ve created so far): http://amydemosphotography.smugmug.com/galleries

I’ve not been able to make the bars and the logo occupy the same vertical space, and I haven’t been able to solve the issue of how to make them grow/shrink with the browser window while allowing the logo to 1) always stay cenetered, and 2) always have padding on the left/right (so the lines don’t ever touch/go under it).

What am I doing wrong?

Answer 1

Here is how I would do it:

<h1><img src="http://cdn.smugmug.com/photos/2254208423_RS5b5Z6-O.png" alt="Logo"></h1>

—

body {
    padding-top: 3em;
}
h1 {
    color: #333;
    display: table;
}
h1:after,
h1:before {
    background-image: -webkit-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:    -moz-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:     -ms-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:      -o-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:         linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    content: '';
    display: table-cell;
    width: 50%;
/* Everything below allows us to have a little bit of space between the title and the decoration */
    -webkit-background-clip: padding;
       -moz-background-clip: padding;
            background-clip: padding;
}
h1:after {
    border-left: 1.5em solid transparent;
}
h1:before {
    border-right: 1.5em solid transparent;
}
​

And here is a live example: http://jsfiddle.net/joshnh/XjXYE/