- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
How would you put a 1px solid border on a paragraphs of variable (font)size, spanning all the width including spaces.
Example: http://s.rough.dk/DQdG
Scalable background-img?
That certainly would be tough. You’d probably have to go pixel-based font sizing and use a specific line-height that is equal to the height of your repeatable background.
I don’t get the difficulty… all I see in that screen shot are caps with an underline. Wouldn’t just using text-decoration: underline;
work? Am I missing something?
@Mottie – specifically for a design like that, not really. Because the line is a certain distance from the words, I’m not sure you can adjust the underline.
@Mottie yeah I was wondering the same thing at first, but I think the spacing between the line and the text is a ‘big thing’.
Check this out – not too tricky :p : http://jsfiddle.net/TFW2E/1/
Edit: It’s not perfect though.
Edit: http://jsfiddle.net/TFW2E/4/ Line-height sorts it out
@jamy_za Nice work! And adding “padding-bottom” will adjust the distance.
http://jsfiddle.net/Mottie/TFW2E/5/
Edit: Oh and I did discover that the specs include a “text-underline-position” (ref), but it doesn’t seem to allow adjusting it by a pixel distance.
Working with an extra span, line-height and padding-bottom seems to do the job.
@mottie, no – not necessarily a big thing, but you know… the details ;-)
Thanks all of you!
Not entirely solved, I can’t seem to find a way to decrease the distance with negative padding, relative positioning and line-height. Increasing it works fine tho.