...

View Full Version : Looking for a href override code.



Basza
11-25-2011, 02:10 PM
I am having problems with some css code that I found. The problem is that whenever I insert a link, the link appears within a larger box / image. I am just looking for something like a inline override or something similar so that the a href link appears as a normal link.

obenns
11-25-2011, 03:39 PM
Hi,

I assume you have styled the <a> somewhere in your CSS, that has effected the whole lot.

To override this, you will probably need to include a child selector (that will replace the adult.)

E.g.

#nav a {
default css properties here (blue text, underlined etc.)
}


Or you could remove the css before, which could be universal, <Body> , #wrapper etc.

Basza
11-25-2011, 09:22 PM
Hi,

I assume you have styled the <a> somewhere in your CSS, that has effected the whole lot.

To override this, you will probably need to include a child selector (that will replace the adult.)

E.g.

#nav a {
default css properties here (blue text, underlined etc.)
}


Or you could remove the css before, which could be universal, <Body> , #wrapper etc.

Thank you for your reply.
Yes the <a> is styled somewhere within the css. I have been doing some searching of the subject for about a couple of days but can't seem to get any thing to change it. I was looking for something that could be added into the <a class="????" href , but nothing changes it.

Excavator
11-25-2011, 09:47 PM
Hello Basza,
It would be easier if we saw your code so we can understand where the styling is coming from. Then it would be easy to see what can override that styling for the one link you want to appear "as a normal link".

Basza
11-25-2011, 10:18 PM
Hello Basza,
It would be easier if we saw your code so we can understand where the styling is coming from. Then it would be easy to see what can override that styling for the one link you want to appear "as a normal link".

Thank you for your reply.
I will add the css as an attachment due to the size.
at http://www.nzbytes.com at the bottom of the page you will see a link called " test link back to front page" this link is within the image I need to remove. I need to be able to add normal links at certain times.

Excavator
11-25-2011, 10:38 PM
No need to attach CSS. We can see it just fine.

You are styling all anchors in .indexWrap with this bit of CSS:


.indexWrap a {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-transition: all 0.3s ease-in-out 0s;
background-color: #FFFFFF;
background-image: url("images/shared/btn-1.png");
background-repeat: repeat-x;
border-color: #E6E6E6 #F4F4F4 #F4F4F4;
border-radius: 5px 5px 5px 5px;
border-right: 1px solid #F4F4F4;
border-style: solid;
border-width: 1px;
box-shadow: 2px 3px 3px #999999;
color: #000000;
display: block;
font-size: 11px;
height: 90px;
margin: 0 10px 15px 0;
max-width: 70px;
min-width: 70px;
padding: 10px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 70px;
}


To target an anchor in .indexWrap with different styling, give that anchor an id or class... like this:


rning how to code , it's going to take a couple of months to get something going.</p>
This is just a test link.<a href="http://www.nzbytes.com/index.php" target="_blank" id="testLink"> test link back to front page</a>
</div>


<center>Copyright
And give it different styling with some CSS like this -
#testLink {
border: none;
background: none;
box-shadow: none;
text-decoration: underline;
}

Basza
11-25-2011, 10:58 PM
No need to attach CSS. We can see it just fine.

You are styling all anchors in .indexWrap with this bit of CSS:


.indexWrap a {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-transition: all 0.3s ease-in-out 0s;
background-color: #FFFFFF;
background-image: url("images/shared/btn-1.png");
background-repeat: repeat-x;
border-color: #E6E6E6 #F4F4F4 #F4F4F4;
border-radius: 5px 5px 5px 5px;
border-right: 1px solid #F4F4F4;
border-style: solid;
border-width: 1px;
box-shadow: 2px 3px 3px #999999;
color: #000000;
display: block;
font-size: 11px;
height: 90px;
margin: 0 10px 15px 0;
max-width: 70px;
min-width: 70px;
padding: 10px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 70px;
}


To target an anchor in .indexWrap with different styling, give that anchor an id or class... like this:


rning how to code , it's going to take a couple of months to get something going.</p>
This is just a test link.<a href="http://www.nzbytes.com/index.php" target="_blank" id="testLink"> test link back to front page</a>
</div>


<center>Copyright
And give it different styling with some CSS like this -
#testLink {
border: none;
background: none;
box-shadow: none;
text-decoration: underline;
}
Thanks for your reply.

That has kinda worked. There is still a transparent border / image in the background as it is not showing up as a normal text link. But you have pointed / shown me in the direction that I should be looking at. A little bit more searching and hopefully I can get rid of it.

Excavator
11-25-2011, 11:15 PM
Thanks for your reply.

That has kinda worked. There is still a transparent border / image in the background as it is not showing up as a normal text link. But you have pointed / shown me in the direction that I should be looking at. A little bit more searching and hopefully I can get rid of it.

It might be easier to put a class on the links you're actually putting all that extra styling on, rather than putting it on all links in .indexWrap and working to remove it.

It's all about specificity (http://reference.sitepoint.com/css/specificity).

Maybe this would be easiest:
.indexWrap ul li a {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
...

That would target only anchors in a ul contained in .indexWrap

Basza
11-25-2011, 11:27 PM
It might be easier to put a class on the links you're actually putting all that extra styling on, rather than putting it on all links in .indexWrap and working to remove it.

It's all about specificity (http://reference.sitepoint.com/css/specificity).

Maybe this would be easiest:
.indexWrap ul li a {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
...

That would target only anchors in a ul contained in .indexWrap

Thank so much for your help.

That has fixed it a treat.

I am still learning and at my age lol it takes time for new things to set in. It just that over the years I have seen so many people being ripped off over the net, that I have decided to try a setup a no crap system. I know its going to be a mission for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum