Menu
I have a list of businesses separated by categories. Next to each category name, starting at about 20px apart, I'd like to have a 3px tall border stretching to the end of the div. I would like for that border to be filled with a pattern, or image. Initially, I tried just using an image, but as each category name is a different length, that proved to be impractical.
I'm sure there is a relatively easy way to go about this, I'm just not certain on how to make it happen. Ideas?
Thanks.
updated image
919
here I'm using a <div> to show the border behind the <h1> category where both the <body> and <h1> have matching background patterns (that are also lined up)
example jsfiddle
CSS
body {
background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png');
font-family:helvetica,arial,sans-serif;
}
#container {
margin:0 20px;
position:relative;
}
h1 {
position:relative;
float:left;
padding-top:6px;
padding-right:20px;
font-size:2em;
background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png')
}
.border {
background:url('http://s3.amazonaws.com/creattica/uploaded-images/0016/6142/patterns_009_blue-hexagon-pattern_crop-iphone_web_for-creattica.jpg') repeat-x -10px 0;
position:absolute;
top:20px;
width:100%;
height:3px;
}
.listings {
clear:both;
}
HTML
<div id="container">
<div class="border"></div>
<h1>Catering</h1>
<div class="listings">
<ul>
<li>
Catering Company 1
</li>
<li>
...
</li>
</ul>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
