Posted by shiolo on August 15, 2009 at 12:44am
It's clear. Can anybody help me (I don't manage CSS) to give me some code to show all links in the web with a dotted line under it? where should I place the code?
I' using Amity Island Theme.
Thanks for the help
Comments
Dotted Line CSS styling
Do you want the dotted line to appear on the page all the time or only when somebody hovers their mouse over the link? Assuming that you want it to only appear on hover, append the Amity Island's style.css file's a:hover rule with the following (approximately on line 24, after the text-decoration:none rule):
border: 1px black dotted;Note: You can modify the thickness of the line (in pixels by changing the 1px portion) and the color of the line (the black portion, using a named color or by using a hexedacimal (e.g. #000000) color number). Also, if you ever update the Amity Island theme, you will have to remember to put this rule back in place after each update.
I would like to show the
I would like to show the dotted line everytime (not when someone hovers the mouse), but when you hover it should be a normal line. (a complete line)
thanks for the answers
CSS Example
This would still be in your theme's style.css file and you will need to update your existing CSS Rules from:
a, a:visited, a:active {
color: #2d3644;
text-decoration: none;
}
a:hover {
color: #5493ff;
text-decoration: underline;
}
To (dotted line always shown on all links, underline on hover):
a, a:visited, a:active {
color: #2d3644;
text-decoration: none;
border-bottom: 1px blue dotted;
}
a:hover {
color: #5493ff;
text-decoration: underline;
border: none;
}
Thanks! I'll try it later on
Thanks! I'll try it later on the site!
mateo
Not going to work with images!
So, how would you solution work with images inside of anchor tag?
The rule a img {border:0} is not going to work, because border is applied to a, not img.
p.s. I'm sorry, but whole internet is full of wrong answers and this frustrates me.
Images
>So, how would you solution work with images inside of anchor tag?
Replace the "a" in the CSS rule, with "a img" - this reads as "an IMG element which is a child of (contained in) an A"
Images are not underlined even when linked, so the property you want to experiment with is 'border'.
So this code would be a great start:
a img , a:visited img, a:active img{
color: #2d3644;
border: 1px blue dotted;
}
img a:hover {
color: #5493ff;
border: 1px blue solid;
}
Double-check that code in case I mis-typed a property - I did not test it in a page, sorry.
However I am confident of the selectors and the technique.
NOTE: When playing around with border effects on links, be SURE that you do not cause anything to "shift" on the hover. Meaning, it's possible for your effects to cause the size of your linked item to change (as in increase the size of the bounding box around something). This would cause the page to re-flow which does not look great. This warning is true not just for border hover, but making links bold on hover, etc. You should not hit the problem using the above code, but you could when experimenting.
And as a tip, you'll notice the dotted border still provides some sort of "hint" that the target is still a link. If you went with border:none, then users will NOT know the image is a link. The only safe place to remove links hints is in the menus (and that is because the menu structure is a suitable hint).
The above is not a Drupal issue - it is a CSS issue. That is why you do not see much documentation on it here. You might want to get some "web developer extensions" for your browser, then when you are curious you can easily inspect the code on a page that you like (or troubleshoot your own page, etc).