Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jul 2011
    Posts
    14
    Member #
    28499
    I've got my CSS layout divided into divs. Now, I know the code to add to my style sheet to customize links as I would like(change the color, hover, etc.) The problem is I have multiple divs with links and I want those links to have their own unique styles. How can I make a specific set of style rules for my links within EACH div rather than one style for the entire page? Let me elaborate with some code.

    My index page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <body>
    <title>Free Fantasy Football Prep</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    <img src="http://www.freefantasyfootballprep.com/ffbplogo.jpg" height="200px" width="100%"></img>
    
    <div id="top">
    <a href="C:\Users\Marcus\Documents\Site\link.html">Home</a>
    <a href="C:\Users\Marcus\Documents\Site\contact.html">Contact Us</a>
    <a href="C:\Users\Marcus\Documents\Site\link.html">Archive</a>
    <a href="C:\Users\Marcus\Documents\Site\link.html">Staff</a>
    </div>
    
    <div id="top2">
    
    <table border="1" cellpadding="5" cellspacing="2" bgcolor="Navy" width="100%">
    <th colspan="100%"><p style="color: silver">Our Features</p></th>
    <tr><td>
    <a href="C:\Users\Marcus\Documents\Site\link.html">Hot Topics</a></td>
    <td>Discussing popular "news of the moment" in football and its fantasy ramifications.</td></tr>
    
    <tr><td>
    <a href="C:\Users\Marcus\Documents\Site\link.html">To Play or Not to Play?</a></td>
    <td>A weekly list of players to leave in and out of your lineup, with a review of the past weeks picks.</td></tr>
    
    <tr><td>
    <a href="C:\Users\Marcus\Documents\Site\link.html">Fantasy Faceoff</a></td>
    <td>FFF Prep experts Hurricane Hugo and Big Daddy Rhino debate critical fantasy football issues.</td></tr>
    
    <tr><td>
    <a href="C:\Users\Marcus\Documents\Site\link.html">Florida Fury's Road to 300,000</a></td>
    <td>Follow along with Hurricane Hugo and Big Daddy Rhino on their attempt to win the World Championship of Fantasy Football</td></tr>
    
    </table>
    
    </div>
    
    <div id="left">
    <p>Resources<br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">Articles</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Rankings</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Depth Charts</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Hot Topics</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Diamonds in the Rough</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Feedback</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Archives</a><br /></p>
    <p>This week in fantasy<br />
    <a href="C:\Users\Marcus\Documents\Test\link.html">To Play or Not to Play?</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Fantasy Faceoff</a><br />
    <a href="C:\Users\Marcus\Documents\Site\link.html">Florida Fury's Road to 300,000</a><br /></p>
    </div>
    
    <div id="middle">
    <p>
    <div id="topsub">This will be an independent tab.</div><br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    This web site will help you hone your skills as a fantasy football expert so that you can win your league.<br />
    <div id="topsub2">This will be an independent tab.</div><br />
    This will contain additional info regarding some of the latest headlines.
    </p>
    </div>
    
    <div id ="right">
    <p><b><font size="5">Advertise here</b></font><br />
    If you are interested in advertising, please
    <a href="C:\Users\Marcus\Documents\Site\contact.html">contact us</a> in order to discuss details.</p>
    </div>
    
    </body>
    </html>
    My style sheet:
    Code:
    body
    { 
    background-color: #FFFFFF;
    font-family: Trebuchet, Tahoma, verdana, arial, sans-serif;
    margins: 0px
    padding: 0px
    }
    
    #top {
    float: left;
    width: 96%;
    color: #FFFFFF;
    background-color: GoldenRod;
    text-align: center;
    padding: 1% 2% 1% 2%;
    }
    
    #top2 {
    float: left;
    width: 96%;
    color: #FFFFFF;
    background-color: Navy;
    font-size: 12px;
    text-align: center;
    padding: 1% 2% 1% 2%;
    }
    
    
    #left {
    float: left;
    width: 14%;
    height: 100%;
    min-height: 600px;
    color: #FFFFFF;
    background-color: DimGrey;
    text-align: center;
    padding: 2% 2% 2% 2%;
    }
    
    #middle {
    float: left;
    width: 60%;
    color: #000000;
    background-color: #FFFFFF;
    text-align: center;
    padding: 2% 2% 2% 2%;
    }
    
    #topsub {
    float: left;
    width: 96%;
    color: #000000;
    background-color: GoldenRod;
    text-align: center;
    padding: 1% 2% 1% 2%;
    }
    
    #topsub2 {
    float: left;
    width: 96%;
    color: #000000;
    background-color: GoldenRod;
    text-align: center;
    padding: 1% 2% 1% 2%;
    }
    
    
    #right {
    float: right;
    width: 14%;
    height: 100%;
    min-height: 600px;
    color: #000000;
    background-color: DimGrey;
    text-align: center;
    padding: 2% 2% 2% 2%;
    }
    Now, if you'll notice I have links inside divs labeled 'left', 'top' and 'top2'. But I don't want those links to abide by the same style guidelines, because their divs have different color schemes. So for instance, I tried adding the following code to my style sheet(this code is actually the style I want for my links in the 'top 2' div:
    Code:
    a:link { 
        color: GoldenRod;
        }
    a:visited { 
        color: GoldenRod;
        }
    a:hover { 
        color: Silver;;
        text-decoration: underline;
        }
    a:active { 
        color: #FFFFFF;
        }
    The problem is simply by adding that code to the style sheet it makes it the style for ALL the links on my page. This doesn't work because, although I would like my 'top2' links to be goldenrod, I can't have the 'top' div links goldenrod because that's what the background color is.

    How can I set up my style sheet so that each div has its own link style guidelines?

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    In CSS, generally you should use ID`s (divs) when you want to apply the style to only one thing on a page, and use classes when you want to apply the style to more than one occurrence on the page.

    So you could do something like this:
    [COLOR=rgb(20, 20, 20)]#top2 a:link { color: GoldenRod; } [/COLOR]
    [COLOR=rgb(20, 20, 20)]#top2 [COLOR=rgb(20, 20, 20)]a:visited {[/COLOR][/COLOR]color: GoldenRod; }
    [COLOR=rgb(20, 20, 20)]#top2 [/COLOR][COLOR=rgb(20, 20, 20)]a:hover {[/COLOR]color: Silver;; text-decoration: underline; }
    [COLOR=rgb(20, 20, 20)]#top2 [/COLOR][COLOR=rgb(20, 20, 20)]a:active {[/COLOR]color: #FFFFFF; }


    [COLOR=rgb(20, 20, 20)]#left a:link { [COLOR=rgb(20, 20, 20)] color: red; } [/COLOR][/COLOR]
    [COLOR=rgb(20, 20, 20)]#left [COLOR=rgb(20, 20, 20)]a:visited {[/COLOR][/COLOR][COLOR=rgb(20, 20, 20)]color: red; } [/COLOR]
    [COLOR=rgb(20, 20, 20)]#left [/COLOR][COLOR=rgb(20, 20, 20)]a:hover {[/COLOR][COLOR=rgb(20, 20, 20)]color: black;; text-decoration: underline; } [/COLOR]
    [COLOR=rgb(20, 20, 20)]#left [/COLOR][COLOR=rgb(20, 20, 20)]a:active {[/COLOR]color: #666666; }

    That way, by putting the div ID in front of your link styling, you can have a different style for each div. Of course you'd use whatever colors you want, instead of the ones I gave in the example.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    Yes that will work, but dang, that's too much coding for one simple task, go read my article on [ Edit: Link removed.Read the rules. AlphaMare. ]

    You only need to add the following.

    #top2 a { color: GoldenRod;}
    #top2 a:hover, #left a:hover { font-decoration: underline;}
    #top2 a.active { color: #FFF;}

    #top2 a { color: red;}
    #left a:hover {color:black;}
    #left a.active {color:black;}

    You do not need to type everything out, you can use shorthand CSS coding and some clever techniques, that'll make it easier and faster. You'll notice that I added some classes together that share the same styling, just for an example, that saves CSS file sizes and faster coding.

    I'll be posting about this on my blog, with some more information and best ways to actually use CSS in multiple ways without rewriting everything every time.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by christopher_b, post: 217642
    #top2 a { color: GoldenRod;}
    #top2 a:hover, #left a:hover { font-decoration: underline;}
    #top2 a.active { color: #FFF;}

    #top2 a { color: red;}
    #left a:hover {color:black;}
    #left a.active {color:black;}
    You're talking about using shorthand, but there isn't any there. Not to mention, your code is error-ridden. But damn, sure got that link to your blog in there.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    I wasn't really showing any shorthand things, just minor ways to reuse code that got already used...
    and where is my code in error, please point that out for me.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    #top2 a { color: GoldenRod;}
    #top2 a:hover, #left a:hover { font-decoration: underline;} /*text-decoration*/
    #top2 a.active { color: #FFF;} /*colon*/

    #top2 a { color: red;}
    #left a:hover {color:black;}
    #left a.active {color:black;} /*colon*/
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    oh haha, yeah I always get mixed up with font and text.

    the colon I added, because it works best for me to add a "active" class to a link than using the :active
    Specially since I use django as a web development framework, it works best that way.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com