SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Link Format

  1. #1
    SitePoint Addict I don`t mind's Avatar
    Join Date
    Feb 2006
    Location
    LA
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link Format

    Hello there,

    need your help

    I have four links and when someone clicks on one of the links, that one is getting bold ... my problem is that when I click somewhere else after that the link is not bold any more ...

    CSS:

    Code:
    a:active { text-decoration:none; font-weight:bold; color:black; }

    Thanks in advance
    Words are weapons of Mass Destruction.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    This should do the trick,

    Code:
    a:active, /* When the user clicks the link */
    a:visited  /* after the user has clicked the link { 
      text-decoration:none; 
      font-weight:bold; 
      color:black; }
    Woo hoo, I get a second little sitepoint flag thingo!

  3. #3
    SitePoint Addict I don`t mind's Avatar
    Join Date
    Feb 2006
    Location
    LA
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well but when I click first on link one and then on link 2 both links are bold … but only the second one should be bold … this is driving me crazy



    Words are weapons of Mass Destruction.

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that you only want the link bold while the visitor is in a certain page?

  5. #5
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <body id="home">
    <a href="index.html" class="bold_link">link to this page</a>
    </body>
    Code:
    #home a.bold_link {
    text-decoration:none;
    font-weight:bold;
    color:black;
    }
    So when someone is in index.html the link will be bold.

    EDIT: Let me know if you need more info

  6. #6
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you have the styles in the correct order :

    Link; Visited; Visited; Hover; Acitve ( LoVeHA :-)

    Nadia

  7. #7
    SitePoint Addict I don`t mind's Avatar
    Join Date
    Feb 2006
    Location
    LA
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I should explain it more …

    That’s the menu

    Link1 Link2 Link3 Link4
    So when click on Link1 … a submenu is opened below it …

    Link1 Link2 Link3 Link4
    Sub1 Sub2 Sub3

    So I know that the sub links are from Link because it is bold … but when I click somewhere else now the link is not bold any more

    CSS file:

    HTML Code:
    a
    {
    	color: #636363;
    	text-decoration:none;
    }
    
    a.visited
    {
    	color: #636363;
    	text-decoration:none;
    }
    
    a:hover
    {
    	color:red;
    }
    
    a:active
    {
    	text-decoration:none;
    	font-weight:bold;
    	color:black;
    }
    Words are weapons of Mass Destruction.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no way of dynamically doing this through CSS so you'll need to do something like Rob_D's suggestion above or manually put a class on the menu item that you want to be bold.

    The active value is simply the visual appearance of the link when it is clicked on and nothing more so you are expecting it to do more than it was made to do.

    HTML
    Code:
    <ul>
    <li class="selected"><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    </ul>
    <ul>
    <li><a href="#">Sub 1</a></li>
    <li><a href="#">Sub 2</a></li>
    <li><a href="#">Sub 3</a></li>
    </ul>
    CSS
    Code:
    .selected {
        font-weight: bold;
    }
    Although personally I'd nest your sub links in the unordered list like this as it makes much more semantic sense.

    Code:
    <ul>
      <li class="selected"><a href="#">Link 1</a>
        <ul>
          <li><a href="#">Sub 1</a></li>
          <li><a href="#">Sub 2</a></li>
          <li><a href="#">Sub 3</a></li>
        </ul>
      </li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>


Bookmarks

Posting Permissions

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