...

View Full Version : Styling a link *SOLVED*



BabyJack
05-11-2008, 12:31 PM
Hey! Can someone tell me how to style within a link. :eek:
Here is the code:

<a href="downloads/lots.html" style="A:link: text-decoration: none"><img src="images/Housing.png"

class="gradualfader"></a>

I don't want a border or underline. Any idea?

Here's a screen: http://i29.tinypic.com/2j2aww6.jpg

Any help is very much appreciated! :thumbsup:

Apostropartheid
05-11-2008, 12:50 PM
<a href="downloads/lots/html" style="text-decoration: none;">
<img src="images/Housing.png" alt="" class="gradualfader">
</a>
But you shouldn't style inline at all. Use a stylesheet.

BabyJack
05-11-2008, 12:52 PM
Thanks CyanLight!

I do use a stylesheet! :D

BabyJack
05-11-2008, 12:55 PM
It didn't work. Here is my full code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-

20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="EA.ico" rel="Shortcut Icon" />
<title>Wifeeee! Sensational Simming Summer</title>
<script type="text/javascript" src="gradualfader.js"></script>
<style type="text/css">
/*<![CDATA[*/
div.c2 {text-align: center}
div.c1 {clear:both;}
/*]]>*/
</style>
</head>
<a href="index.html"><div id="logo"></div></a>
<div id="thanks">Welcome to Wifee - Enlighten your Simming Experience - <a href="index.php">Homepage</a></div>
<div id="wrapper">
<div id="nav">
<h1>Main Navigation</h1>
<a href="Downloads.html">Downloads</a><br />
<a href="Tutorials.html">Tutorials</a><br />
<a href="Information.html">Information</a><br />
<a href="Media.html">Media</a><br />
<a href="Upcoming.html">Upcoming</a><br />
<h1>Resources Navigation</h1>
<a href="Avatars.html">Avatars</a><br />
<a href="Blends.html">Blends</a><br />
<a href="Icons.html">Icons</a><br />
<a href="Templates.html">Templates</a><br />
<a href="Guides.html">Guides</a><br />
<h1>Community</h1>
<a href="Forums/index.html">Wifee Forums</a><br />
<a href="Guestbook.html">Guestbook</a><br />
<a href="Chat.html">Chatroom</a><br />
<a href="Contests.html">Competitions</a><br />
<h1>Miscellaneous</h1>
<a href="History.html">Site History</a><br />
<a href="Games.html">Games</a><br />
<a href="Books.html">Books and Poetry</a><br />
<a href="Movies.html">Movies</a><br />
<a href="Music.html">Music</a><br />
<h1>Updations</h1>
<strong>July 1st</strong> - Wifee Grand Opening!<br />
<strong>July 2nd</strong> - All pages opened!<br />
<h1>Site Stats</h1>
<strong>Webmaster</strong> - BabyJack<br />
<strong>Unique Hits</strong> - 294<br />
<strong>Staff Members</strong> - 8<br />
<strong>Downloads Total</strong> - 0<br />
<h1>Partner Sites</h1>
<a href="http://simsmad.co.uk" target="_blank">Simsmad.co.uk</a>
</div>
<div id="content">
<h1>Welcome to our Downloads!</h1>
<b>We need your help! We aim for users to get the most out of Wifee and by that, we need you to upload your spectacular

creations! If you are a download employee, then you are now a 'Wifee Featured Artist'. Your downloads will be displayed

right at the top! Woop!</b><br />
--<br />
Please choose a section<br>
<a href="downloads/lots.html" style="A:link: text-decoration: none"><img src="images/Housing.png"

class="gradualfader"></a>
<a href="downloads/objects.html" style="text-decoration: none;"><img src="images/Objects.png" class="gradualfader"></a>
<a href="downloads/sims.html"><img src="images/Sims.png" class="gradualfader"></a>
<a href="downloads/attire.html"><img src="images/Attire.png" class="gradualfader"></a>
<a href="downloads/food.html"><img src="images/Food.png" class="gradualfader"></a>
<a href="downloads/mods.html"><img src="images/Mods.png" class="gradualfader"></a>
<a href="downloads/hoods.html"><img src="images/Hoods.png" class="gradualfader"></a>
<a href="downloads/cas.html"><img src="images/CAS.png" class="gradualfader"></a><br><br><br>
Want a section added? Have we missed out something? Contact us <a href="Contact.html" class="gradualfader">here</a>
</div>
<div class="c1"></div>
</div>
<div class="c2" id="footer">Copyright Wifee 2008 - Designed and Partly coded by <a

href="http://ww.simsmad.co.uk">Ryan</a> - Modifyed by Me</div>
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>


and full CSS:

body {
width: auto;
height: auto;
background: url(images/back.jpg);
margin: 10px auto 10px auto;
scrollbar-arrow-color: #2aa1ff;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: ;
}


#logo {
width: 780px;
height: 180px;
font-size: 12px;
font-family: Tahoma, Verdana;
background: url(images/logo.png);
href: index.php;
border: 2px solid #FFFFFF;
margin: 10px auto 0px auto;
padding: 10px;
}
#wrapper {
width: 800px;
height: auto;
background: #FFFFFF;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
margin: 0px auto 0px auto;
}
#nav {
width: 190px;
height: auto;
float: left;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
margin: 0px;
padding: 5px;
}
#nav a {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
}
#nav a:visited {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
}
#nav a:hover {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #56CEFE;
}
#nav h1{
font-size: 11px;
color: #666666;
font-family: Tahoma, Verdana;
text-decoration: none;
border-bottom: 1px solid #cccccc;
margin-bottom: 0px;
}
#nav h2{
font-size: 11px;
color: #666666;
font-family: Tahoma, Verdana;
text-decoration: none;
margin-top: 0px;
}
#content {
display: inline;
width: 570px;
height: auto;
float: right;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
background-color: #FFFFFF;
border: 2px solid #ffffff;
margin: 5px;
padding: 5px;
}
#content a {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
border-bottom: 1px solid #56CEFE;
}
#content a:visited {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
border-bottom: 1px solid #56CEFE;
}
#content a:hover {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #56CEFE;
border-bottom: 1px solid #666666;
}
#content img {
margin: 2px;
}
#content h1{
font-size: 11px;
color: #666666;
font-family: Tahoma, Verdana;
text-decoration: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
}
#welcome {
font-size: 30px;
color: #666666;
font-family: Tahoma, Verdana;
text-decoration: none;
border-bottom: 1px solid #cccccc;
margin-top: 10px;
}

#content h2{
font-size: 9px;
color: #666666;
font-family: Tahoma, Verdana;
text-decoration: bold;
text-align: right;
margin: 0px;
}
#footer {
width: 790px;
height: auto;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
margin: 5px auto 0px auto;
padding: 5px;
}
#nav a {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
}
#nav a:visited {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #666666;
}
#nav a:hover {
margin-top: 0px;
font-family: Tahoma, Verdana;
font-size: 11px;
text-decoration: none;
color: #56CEFE;
font-weight: bold;
}

#thanks {
width: 790px;
height: auto;
font-family: Tahoma, Verdana;
font-size: 11px;
text-align: right;
text-decoration: none;
color: #666666;
background-color: #FFFFFF;
align: center;
border: 2px solid #FFFFFF;
margin: 0px auto 0px auto;
padding: 5px;
}
#thanks a:link {
font-family: Tahoma, Verdana;
font-size: 11px;
text-align: right;
text-decoration: none;
color: #666666;
border-bottom: 1px dashed #666666;
}
#thanks a:visited {
font-family: Tahoma, Verdana;
font-size: 11px;
text-align: right;
text-decoration: none;
color: #666666;
border-bottom: 1px dashed #666666;
}

.fader a:link {
text-decoration: none
}
.fader a:visited
text-decoration: none

#mytable {
width: 400px;
padding: 0;
margin: 2px auto 2px auto;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(/images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
width: 100px;
}

.download{
display:block;
width:110px;
height:35px;
background:#f8fcfe url(/images/download.gif) repeat-x;
border:1px solid #68a012;
-moz-border-radius:4px;
line-height:35px;
text-align:center;
font-size:12px;
text-decoration:none;
color:#000;
}

.blue-sec{
width:auto;
height:auto;
padding:5px;
background:#f8fcfe url(images/v12/hover_bg.gif) bottom repeat-x;
border:1px solid #99defd;
-moz-border-radius:4px;
}

.download-button:hover{
background-position:0 -35px;
color:#000;
text-decoration:none;
}


font-family: Verdana;
font-size: 11px;
width: 110px;
margin-right: 5px;
}

#login .theSubmit {
font-family: Verdana;
font-size: 10px;
background-color: #333333;
color: #FFFFFF;
margin-right: 5px;
}



How do I remove the border and underline? Can someone create me a section of the CSS to remove the underline and border, without effecting any other links.

Apostropartheid
05-11-2008, 01:01 PM
In your stylesheet (preferably right at the bottom):
.noborder {
text-decoration: none !important;
}
.noborder img {
border: 0 !important;
}
And in the HTML:

<a href="downloads/lots/html" class="noborder">
<img src="images/Housing.png" alt="" class="gradualfader">
</a>

BabyJack
05-11-2008, 01:06 PM
Thanks! Now how do I remove the underline? It's still there.

BabyJack
05-11-2008, 01:27 PM
*BUMP*

Hi, when I add this to the CSS that CyanLight gave me:


.noborder {text-decoration: none;}
a {text-decoration:none}

.noborder img {
border: 0;
a:link {text-decoration:none}
}

the border goes, but the underline doesn't; any idea?

Apostropartheid
05-11-2008, 01:34 PM
That's because it's malformed.

.noborder img {
border: 0;
}
a:link {text-decoration:none}
/* } This last bracket doesn't have a purpose */

BabyJack
05-11-2008, 01:43 PM
But the underlines are still there?
Will this have something to do with my JS?

JS:

//Gradual Elements Fader- By Dynamic Drive at http://www.dynamicdrive.com
//Last updated: Nov 8th, 07'

var gradualFader={}

gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader. baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')

gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
targetobject.currentopacity=value
}

gradualFader.fadeupdown=function(obj, direction){
var targetobject=obj
var fadeamount=(direction=="fadeup")? this.increment : -this.increment
if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
this.setopacity(obj, targetobject.currentopacity+fadeamount)
window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
}
}

gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
clearTimeout(window["opacityfader"+obj._fadeorder])
}

gradualFader.isContained=function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
}

gradualFader.fadeinterface=function(obj, e, direction){
if (!this.isContained(obj, e)){
gradualFader.clearTimer(obj)
gradualFader.fadeupdown(obj, direction)
}
}

gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}

gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("gradualfader")
for (var i=0; i<targetobjects.length; i++){
targetobjects[i]._fadeorder=i
this.setopacity(targetobjects[i], this.baseopacity)
targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}
}
}

BabyJack
05-11-2008, 02:04 PM
*BUMP*
Need answer quickly because I want to continue with my site and get it open veeeeery quickly. (TARGET: Mid-June)

FWDrew
05-11-2008, 02:27 PM
*sigh*

A bump after 20 minutes.....wow.


Do you have a link to this site, this will make it easier to see whats wrong rather than you posting long lines of code. And no I dont think its the JavaScript.

Drew



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum