Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts

    Styling a link *SOLVED*

    Hey! Can someone tell me how to style within a link.
    Here is the code:
    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!
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    <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.

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Thanks CyanLight!

    I do use a stylesheet!
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    It didn't work. Here is my full code:

    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:
    Code:
    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.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    In your stylesheet (preferably right at the bottom):
    Code:
    .noborder {
     text-decoration: none !important;
    }
    .noborder img {
     border: 0 !important;
    }
    And in the HTML:
    Code:
    <a href="downloads/lots/html" class="noborder">
     <img src="images/Housing.png" alt="" class="gradualfader">
    </a>
    Last edited by Apostropartheid; 05-11-2008 at 12:04 PM.

  • Users who have thanked Apostropartheid for this post:

    BabyJack (05-11-2008)

  • #6
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Thanks! Now how do I remove the underline? It's still there.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #7
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    *BUMP*

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

    Code:
    .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?
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    That's because it's malformed.
    Code:
    .noborder img {
    border: 0;
    }
    a:link {text-decoration:none}
    /* } This last bracket doesn't have a purpose */

  • #9
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    But the underlines are still there?
    Will this have something to do with my JS?

    JS:
    Code:
    //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")}
    	}
    }
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #10
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    *BUMP*
    Need answer quickly because I want to continue with my site and get it open veeeeery quickly. (TARGET: Mid-June)
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #11
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    *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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •