Sat, 2011-05-07 21:09
I thought this would be straight forward at first but it's proving to be a tricky devil!
I'm wanting to have titles appear like this .......... Title ..........
But the dots (can be an image) would be centered vertically (i.e. not sit on the baseline as per my example above). My first attempt was to have the entire element as a h1 tag and than add a span tag for the title - then I could add a repeating image to the h1 tag and add a background colour to the span tag so that the dots didn't show up under the title. That works perfectly on solid colour backgrounds as I can specify that colour for the span background colour.
The problem with that is the background of the page varies and is often an image so the background colour of the span tag shows up.
Any help or ideas would be greatly appreciated as I've hit a brick wall with this one!
Sun, 2011-05-08 00:57
#1
You could have an image of
You could have an image of the dots actually inserted next to the title rather than a background image.
Something like:
<img src="imagePath/imageName.jpg" alt="yourAltTag" /> Title <img src="imagePath/imageName.jpg" alt="yourAltTag" />
Then they will not go underneath the text. All you'll need to adjust is padding on the word 'Title' as it will be aligned to the bottom.
Sun, 2011-05-08 03:01
#2
Do you mean something like
Do you mean something like this: http://feelerdealer.com/dots/
If I'm on the right track I can explain further.
Sun, 2011-05-08 11:40
#3
Yes that's it. But I've just
Yes that's it. But I've just tried a more complex background and changed the typesize as well as line height and it then doesn't seem to work as well and the background of the span element is clearly visible?
Sun, 2011-05-08 12:55
#4
greencode wrote: Yes that's
Yes that's it. But I've just tried a more complex background and changed the typesize as well as line height and it then doesn't seem to work as well and the background of the span element is clearly visible?
Notice the "fixed" on the background of the SPAN. It fixes it to the viewport allowing the background of the SPAN to move with the background of the BODY and since they are the same it looks seemless.
Mon, 2011-05-09 10:22
#5
I'm not too sure what I'm
I'm not too sure what I'm doing wrong then but if you take a look at this example you'll see that you can see the background behind the title:
Thu, 2011-05-12 09:54
#6
Anyone?
Could anyone help any further with this - from my example above you can see that it doesn't appear to work on complex backgrounds?
Thu, 2011-05-12 22:52
#7
Add fixed to the containing
Add fixed to the containing DIVs background as well and see if that helps. Oh, and use a proper doctype.