webtodo2005
New Member
I am trying to translate my PSD file to code and I am having problems with these headers. The header would contain the name of the header, and a horizontal purple bar that stretches from the right side of the end of the name to the end of the div. I am using Foundation (responsive framework) and so I have given my header a width of three columns. I have written some code, but I am unsure how to get the purple line to not appear under the title name. Currently, I have saved the purple line as a tileable image and set it as the background of the h3 tag. I have tried to play with the background position, but I cannot get the line from not appearing under the title name.Here is a screenshot of part of the PSD file. To clearify, the purple bar next to Hours, Phone, and Location is not for the user to type any information onto. It is a decorative piece use to sepearte the different regions of information.
My code:\[code\]<div class="row"> <div class="three columns offset-by-one contact"> <h3>Hours</h3> </div></div>.contact h3 { color: #444; background: url(../img/purpleLine.jpg) bottom right repeat-x;}\[/code\]