dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS styled hyperlinks in <div> tag?

  1. #1
    Join Date
    Dec 2006
    Location
    San Diego, CA
    Posts
    13

    CSS styled hyperlinks in <div> tag?

    Is it possible to set a style to all hyperlinks that display inside a <div> container? Text blocks which include hyperlinks is dynamically generated into this div container, so the traditional way I've always done it (adding a class to the actual <a href=> tag) is not practical. Thanks.

    Jim Epler
    San Diego, CA
    http://www.mytechmusings.com

  2. #2
    Join Date
    Jul 2007
    Posts
    113
    sure say your have:
    Code:
    <div id="nav">
    <ul>
    <li><a href="link1.html">link 1</a></li>
    <li><a href="link2.html">link 2</a></li>
    </ul>
    </div>
    then CSS of
    Code:
    #nav a {
     all your styles
    }
    will affect only the links in the nav div

  3. #3
    Join Date
    Dec 2006
    Location
    San Diego, CA
    Posts
    13
    okay, so obviously I'm still doing something incorrect. Here's the code:
    .link {

    a:link
    text-decoration: none;
    color: #FFFFFF;

    a:visited
    text-decoration: none;
    color: #FFFFFF;

    a:hover
    text-decoration: none;
    color: #FFFFFF;

    a:active
    text-decoration: none;
    color: #FFFFFF;

    }
    and my div tag looks like this:

    <div id="link"><?php echo $row_query['desc']; ?></div>
    James Epler
    San Diego, CA
    http://mytechmusings.blogspot.com

  4. #4
    Join Date
    Sep 2005
    Posts
    597
    You defined the .link as a class and are calling it as an ID. Change it to div class=link vice div id=link.
    css/xhtml firefox dsl ubuntu

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Your css should look like
    Code:
    #link a {
    text-decoration: none;
    color: #FFFFFF;
    }
    #link a:visited {
    color: #EEEEEE;
    }
    #link a:hover {
    color: #DDDDDD;
    }
    #link a:active {
    color: #CCCCCC;
    }
    As link is an id, use the # in the css to identify an id. Each psuedo class requires a separate css entry. The first declaration above styles all <a> tags within #link, so subsequent psuedo classes only need to contain what is different (in this case the colour).

  6. #6
    Join Date
    Dec 2006
    Location
    San Diego, CA
    Posts
    13

    Smile

    ahhhhhhh.....

    Now I understand. Excellent! Thank you!
    James Epler
    San Diego, CA
    http://mytechmusings.blogspot.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles