/    Sign up×
Community /Pin to ProfileBookmark

How to create a custom underline?

Copy linkTweet thisAlerts:
Dec 19.2009

Hi!
I want to create a custom underline for a h6-element…the problem is that the “original underline” is way to thick…so I thought that there might be some way to tweak or fake an underline and to create my own underline.
I have tried to simply create a background containing the underline..but the problem is that since the h6-element is treated as a block-elemnt, the underline wont just underline the chars/words, it will underline the whole square-shaped block-element…

So is there anyway to create a custom underline that ONLY underlines the chars/words?

One thing to keep in mind is that I might need to use multiple lines(a text with linebreaks)…and thats where the tricky part comes in if you only want to underline the chars/words..

Any idea how to do this?

Here is a link to the current page:
[URL=”http://lix.hisvux.se/~mattiasa/Blog/test.php”]http://lix.hisvux.se/~mattiasa/Blog/test.php[/URL]

Thanks in advance!

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadDec 19.2009 — Hi there Inx51,

place the words that you want underlined in a [b]span element[/b], like this example...
[color=navy]
<h3 class="article_headline"><span [color=red]class="underline"[/color]>Tesasdasdt</span></h3>
[/color]
Then change this in your stylesheet...
[color=navy]
h3.article_headline {
color:#412900;
font-family:Rockwell;
font-size:35px;
font-weight:normal;
background-image:url(../images/headline_u.gif);
line-height:35px;
width:auto;
}
[/color]
...to this...
[color=navy]
h3.article_headline {
color:#412900;
font-family:Rockwell;
font-size:35px;
font-weight:normal;
line-height:35px;
width:auto;
}
.underline {
background-image:url(../images/headline_u.gif);
background-repeat:repeat-x;
background-position:0 3px;
}
[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@Inx51authorDec 19.2009 — Thanks alot ?!
Copy linkTweet thisAlerts:
@cootheadDec 19.2009 — [indent]No problem, you're welcome. ?[/indent]
Copy linkTweet thisAlerts:
@mordaukDec 21.2009 — You could make it even simpler, and avoid using an image, by applying a border to your css class.

Example html:

[CODE]<p>this is underlined text</p>[/CODE]

Accompanying css:

[CODE]
p {
border-bottom: 1px solid #ccc;
}
[/CODE]

Then you could play around with the line height and padding to place the border exactly where you want.
Copy linkTweet thisAlerts:
@Inx51authorDec 23.2009 — You could make it even simpler, and avoid using an image, by applying a border to your css class.

Example html:

[CODE]<p>this is underlined text</p>[/CODE]

Accompanying css:

[CODE]
p {
border-bottom: 1px solid #ccc;
}
[/CODE]

Then you could play around with the line height and padding to place the border exactly where you want.[/QUOTE]


Hi! Well Im trying the above..but with a span-element instead of the p-element...but the thing is...that everything works great in FF but in IE it only renders one border/underline for the very first row of each headline..is there any way to get around this?

This is the site and the problem can be seen there:

http://lix.hisvux.se/~mattiasa/Blog/test.php

Thanks in advance!
Copy linkTweet thisAlerts:
@rnd_meDec 23.2009 — Hi! Well Im trying the above..but with a span-element instead of the p-element...but the thing is...that everything works great in FF but in IE it only renders one border/underline for the very first row of each headline..is there any way to get around this?

This is the site and the problem can be seen there:

http://lix.hisvux.se/~mattiasa/Blog/test.php

Thanks in advance![/QUOTE]

not really.

inline elements have border issues in old IE. It looks like firefox in IE8...

you can switch it to display:block; overflow:visible; and see if that helps, but it might be hard to make everything fit...
Copy linkTweet thisAlerts:
@Inx51authorDec 23.2009 — not really.

inline elements have border issues in old IE. It looks like firefox in IE8...

you can switch it to display:block; overflow:visible; and see if that helps, but it might be hard to make everything fit...[/QUOTE]

Yeah..I just updated from IE7 to IE8, I figured it might be the problem, since IE7 is a real pain in the ass :mad:...but hey!..atleast its better then IE6 (thumbs up for Microsoft)....well updateing my browser solved it..so now I guess I just need a way to make it work in IE7 for those poor people who havn't updated yet..I will try what you said there ?

Thank you ?
Copy linkTweet thisAlerts:
@TancrediDec 24.2009 — by the way a span element is an inline element so if you want the border line to look the same i all browsers add a display:block; to the CSS.
×

Success!

Help @Inx51 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...