SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Issue when clicking Link

    A minor annoying problem...

    In my Page Header, I have this welcome...
    PHP Code:
    if (isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == TRUE){
        
    // Logged In.
        // Display Member Welcome.
        
    echo "<div id='welcome'>
            <span>Hello, <a id='firstName' href='/account/profile.php'>" 
    htmlspecialchars($memberFirstNameENT_QUOTES) . "</a>!</span>
            </div>"
    ;
    }else{
        
    // Not Logged In.
        // Display Visitor Welcome.
        
    echo '<div id="welcome">
                <span>Hello.</span>&nbsp;
                <a href="/account/log_in.php">Log In</a> to access premium content. &nbsp;
                        Not a Member? &nbsp;<a href="/account/create_account.php">Start Here</a>
            </div>'
    ;


    And these styles...
    Code CSS:
    #welcome span,
    #welcome a#firstName{
    	font-weight: bold;
    	color: #FF9900;						/* Orange */
    }

    When a person is NOT logged in, I want the hyperlinks to be normal, blue, underlined.

    When a person is logged in, I want the Username to be bold, orange, underlined so it matches the word "Welcome, "

    I seem to have accomplished this, however, if you click on the hyperlink when you are NOT logged in and then drag your cursor off the link - so it doesn't fire - then the hyperlink turns and stays ORANGE which is annoying...

    What is going on?

    And is there maybe a better way to do my CSS so things are cleaner and don't act weird like they are now??

    Attached is a Before, During, and After screen-shot...
    Attachment 59770

    Attachment 59771

    Attachment 59772


    Thanks,


    Debbie

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am guessing here since you posted only a small snippet of your code. But I think you have a rule somewhere for visited links which is what is turning your links orange a you described.

    I think your nested ID selector is overkill. IDs are unique. If the rest of your code is done correctly, you should only need:
    Code:
    #welcome span, #firstName{...}
    OT:
    you could stream line your PHP as well:
    PHP Code:
    <div id='welcome'>
    <? echo (isset($_SESSION['loggedIn']) && $_SESSION['loggedIn']) ? 
            
    "<span>Hello, <a id='firstName' href='/account/profile.php'>" htmlspecialchars($memberFirstNameENT_QUOTES) . "</a>!</span>":
            
    "<span>Hello.</span>&nbsp;<a href='/account/log_in.php'>Log In</a> to access premium content. &nbsp; Not a Member? &nbsp; <a href='/account/create_account.php'>Start Here</a>";

    ?>
    </div>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I am guessing here since you posted only a small snippet of your code. But I think you have a rule somewhere for visited links which is what is turning your links orange a you described.

    I think your nested ID selector is overkill. IDs are unique. If the rest of your code is done correctly, you should only need:
    Code:
    #welcome span, #firstName{...}
    How do you set visited links?

    BTW, would it look weird to have things styles like this...
    Hello, Debbie!
    ...versus like how I am trying below...
    Hello, Debbie!
    (All of this started when I added a hyperlink behind the username tonight so there is an easy way to get to the Member's Profile...)

    Thanks,


    Debbie

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #welcome span, #firstName,#firstName:visited{...} should do it.
    All of this started when I added a hyperlink behind the username tonight so there is an easy way to get to the Member's Profile...)
    Makes sense, as :visited is UNIQUE to anchor links.

    Hope that helps.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    #welcome span, #firstName,#firstName:visited{...} should do it.

    Makes sense, as :visited is UNIQUE to anchor links.

    Hope that helps.
    Gonna answer my other question???


    Debbie

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    BTW, would it look weird to have things styles like this...


    ...versus like how I am trying below...

    The first option is definitely the far better method as it's clear and concise, people will much more easily recognize that they've visited that link before whereas the underline in the second example isn't obvious enough.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Personally, I never bother with visited styles any more. I don't like them much, except on sites like Google, where it's handy to know where you've been. You can choose whatever colors you like for visited links, but there's no guarantee that people will know what that color means—unless perhaps your links are blue by default and turn purple once visited ... the usual browser default.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member
    Join Date
    May 2012
    Location
    Norway :)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Gonna answer my other question???


    Debbie
    He just answered you question. You have to add pseudo styles to your html element.

    Example of pseudo attributes you can use:

    a:link
    {
    color: #FF0000;
    }
    /* unvisited link */
    a:visited
    {
    color: #00FF00;
    }
    /* visited link */
    a:hover
    {
    color: #FF00FF;
    }
    /* mouse over link */
    a:active
    {
    color: #0000FF;
    }
    /* selected link */

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So it sounds like we have votes for the two-tones Welcome...

    Hello, Debbie!

    Debbie


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
  •