PDA

View Full Version : Dotted title tag?


Mark_W
07-21-2007, 10:55 PM
Hello again, I've been trying to find out how to create a small effect, but I can't seem to work it out.

What I want to do is to have a piece of text, which isnt a link, and when a user places the mouse over the text a title pops out. Ive seen this done before, where the text has a dotted underline.

If anyone can help then it would be appreciated greatly.

Mark

Mark_W
07-21-2007, 11:04 PM
Ah I think I have got it, didn't think it was as simple as it was.

Edit/ ok it wasn't what I thought, but I have found out anyway, just in case anyone else wants to know how to do it, you need to use these CSS properties. (change the colors to what you want, and the border width)

text-decoration:none;
color: #000000;
border-width: 0px 0px 1px 0px;
border-style: none none dotted none;
border-bottom: #ffffff;

kate
07-22-2007, 03:14 PM
Hi,

Can we see an example?

Thanks!

:mrgreen:

Mark_W
07-22-2007, 03:51 PM
http://www.radiotimes.com/ListingsServlet?event=13&broadcastType=1&jspGridLocation=/jsp/tv_listings_grid.jsp&jspListLocation=/jsp/tv_listings_single.jsp&jspError=/jsp/error.jsp

Each programme title has the dotted underline. When you hover over the programme a title displays. That's similar to what I wanted to do a custom CMS I'm doing for a project of mine.

kate
07-22-2007, 05:12 PM
Hello,

Yes I see it lolol But the code does'nt work in DW8 for some reason..strange..

Well done!

:mrgreen:

chriskq
07-23-2007, 12:49 AM
easy to do, and you pretty much go it with your css.

say you have a div wrapping up all your links that you want dotted underlined.

div.classname a {
color: #000;
text-decoration: none
border-bottom: 1px dotted #000;
}
div.classname a:hover {
text-decoration: underline;
}