Our designer created this css for links
A
{
text-decoration: underline;
color: #E77C15;
}
A:link
{
text-decoration: underline;
color: #E77C15;
}
A:visited
{
text-decoration: underline;
color: #E77C15;
}
A:hover
{
text-decoration: underline;
color: #039;
}
A:active
{
text-decoration: underline;
color: #E77C15;
}
I need an image link with no border around it. Right now it has a border of the color from the css around it.
I have tried
<a href='myurl' style="border-style:none; text-decoration:none" >
<img src="myimage.png" style="width: 20px; height: 20px" alt="Remove" title="Remove" />
</a>
but the border still shows.
How can I remove the border around this link image.
Thanks!
You should add the CSS to <img>, not to <a>.
Better use a general CSS rule:
img { border:none }
a img {
border: 0;
}
Use border:none; on the img.
a img{
border:none;
}
Add the following rule to your CSS:
a img {
border: 0;
}
I'd encourage you, or your designer, to look into using CSS Reset Stylesheets.
Place this in your stylesheet:
a img {border:0px;}
The border is around the image, not the link.
Add:
a img {
border: none;
}
Try to add this to your CSS:
a img{
border:none;
}
Related
Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.
Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.
You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.
So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector
Given the following html:
<span data-icon="✪"></span>A Link
Is it possible to change the text-decoration (to none) on hover? The color will change, the text-decoration will not.
CSS:
a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
/*Doesn't work*/
text-decoration: none;
/*Works*/
color: red;
}
jsfiddle
As I explained in this other answer, you can use display: inline-block to prevent text-decoration set to an ancestor from propagating to your element:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a > [data-icon]:before {
display: inline-block; /* Avoid text-decoration propagation from `a` */
content: attr(data-icon);
}
a:hover > [data-icon]:before {
color: red;
}
<span data-icon="✪"></span>A Link
Make things easier and separate it out
http://jsfiddle.net/nyFxn/2/
<span data-icon="✪"></span><span class="text">A Link</span>
CSS
a:hover{ text-decoration: none; }
a:hover [data-icon] {
/*Works*/
color: red;
}
a:hover .text {
text-decoration: underline;
}
Using display: inline-block works in all browsers but IE. To get it to work in IE8+, add overflow:hidden to the pseudo element containing the icon.
If the underline still remains in IE, set line-height: 1 on the pseudo element, so in total you get
a [data-icon]:before {
display: inline-block;
overflow: hidden;
line-height: 1;
}
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !
In my page I have two types of links, text links and image links.
for text links, I have defined following CSS rules:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
border-bottom: 2px solid #333300;
padding-bottom: 0.25em;
}
For text links everything is OK! but for image links, underline is added when mouse goes over image. I added this code to define new rule for image links:
.bodyimage a:link, a:visited, a:hover, a:active{
border: none;
padding-bottom: 0px;
}
but this rule overrides previous links and underline do not show for text links.
What should I do?
Sorry for my horrible English!
The problem is the border is assigned to the (hover) link. In order to remove that when there's an image present you would need a parent selector, which doesn't exist, i.e. you would need to be saying - if this link contains an img, remove the border from the parent a
parent selectors are often wished for, and are possible with JS :)
The way around it is to classify (add class to) one of the options to target either a:hover or a:hover img
kind of like this..
CSS:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
padding-bottom: 0.25em;
}
a img {border: 0;}
a.txt:hover, a.txt:active {
border-bottom: 2px solid #333300;
}
HTML:
<a class="txt" href="#">text link</a> - <img src="http://dummyimage.com/100x100/000/fff" alt="" width="100" height="100">
If you've less image links it might be better to classify the links which contain images..
Try putting this in your CSS:
img
{
border:0;
}
And remove your bodyimage class. If this doesn't work, try:
img
{
border:0 !important;
padding:0 !important;
}
Sorry if I'm missing something, but is there a reason you are using border-bottom to add an underline to the text? if you use text-decoration:underline, your text gets underlined while images don't. Isn't that what you want?
If you want this effect only when you are hovering over the link, you want:
a {
text-decoration:none;
color: #ccb771;
}
a:hover {
text-decoration:underline;
color: #333300;
}
a img {
border:none;
}
That should give you the colours you wanted, and underline the text while leaving the images underlined.