I have 6 of these navigational boxes on my side.
They are made up of 2 divs.
Here is the CSS:
background:transparent url(img/heading.png) no-repeat scroll 0 0;
The problem is that the HeaderBoxContent div does not align exactly under the HeaderBox div.
I want a 1 px gap between both of them as shown in the picture but I have to use margin-top:6px; via trial and error to get that effect.
The HeaderBoxContent div will otherwise sit above the HeaderBox div and overlap it.
Does anyone have any idea how to fix this as it is causing me a lot of headache.
I also have 6 of these header/boxes on my site, and each one has a different name even though they are all the same values but placed elsewhere on the site.
Is there an easier way to manage them instead of having 6 seperate things in my css sheet to replace the repetitiveness. HeaderBoxContent1 HeaderBoxContent2 HeaderBoxContent3 HeaderBoxContent4 etc
I think what I mean is, everytime I use a <h2> tag can I have it automatically use the HeaderBox template? (the background rounded image) instead of creating a whole new style everytime.