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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Location
    Troutdale, OR
    Posts
    147
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Trouble with links style

    I am building a web site from scratch and I haven't done it for almost a year so I need a refresher. I've been fighting with link styles for couple days now, and still did not achieve desired result.

    Pretty much I am trying to have different style links for the menu bar and there rest of the website, but once link is clicked it changes style to the style of my menu bar

    http://76.115.57.103/index.php <-- click on one of the links on the right side under pictures (Facebook or Flickr link) and see yourself. When you go back to that page those two links will look like menu bar.

    Related CSS:
    PHP Code:
    .sidebar a:linka:activea:visiteda:hover {
        
    font-size100%;
        
    color#5A8EC6;
        
    text-decorationnone;
        
    font-familyTahoma;
        
    font-weightnormal;
        
    background-colorwhite;
    }

    .
    menu a:linka:activea:visited  {
        
    colorwhite;
        
    font-familyTahoma;
        
    font-size7pt;
        
    font-weightbold;
        
    border-right1px solid white;
        
    text-decorationnone;
        
    background-color#313031;
        
    padding5px;
    }
    .
    menu a:hover {
        
    background-color#5A8EC6;

    Menu bar HTML:
    PHP Code:
    <div id="logo"></div>
        <
    div id="menu">
        <
    span class="menu">
            <
    a href="/../index.php">Home</a>
            <
    a href="/../blog/index.php">Blog</a>
            <
    a href="/../event/index.php">Upcoming Events</a>
            <
    a href="/../store/index.php">Store</a>
            <
    a href="/../about/index.php">About</a>
            <
    a href="/../contacts/index.php">Contacts</a>
        </
    span>    
        </
    div
    Sidebar HTML:
    PHP Code:
    <img src="/../images/content/store_coming.jpg" alt="503 Store is coming" /><br />
    <
    img src="/../images/content/event_coming.jpg" alt="Event calendar is coming" /><br />

    <
    span class="sidebar">
    <
    a href="http://www.facebook.com/#!/group.php?gid=120272964680763">Facebook</a> | <a href="http://www.flickr.com/photos/TeamPlayerCo">Flickr</a><br />
    </
    span
    Thx in Advance.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,729
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    I’ve only had a glimpse at the CSS you posted here and I noticed one thing:

    Quote Originally Posted by RomanTaylor View Post
    PHP Code:
    .sidebar a:linka:activea:visiteda:hover {
        
    font-size100%;
        
    color#5A8EC6;
        
    text-decorationnone;
        
    font-familyTahoma;
        
    font-weightnormal;
        
    background-colorwhite;
    }

    .
    menu a:linka:activea:visited  {
        
    colorwhite;
        
    font-familyTahoma;
        
    font-size7pt;
        
    font-weightbold;
        
    border-right1px solid white;
        
    text-decorationnone;
        
    background-color#313031;
        
    padding5px;
    }
    .
    menu a:hover {
        
    background-color#5A8EC6;

    If you want the styles to apply to a specific element you need to use the specific selector throughout:
    Code:
    .sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}
    (same for the menu CSS)

    However, if you want all link states to have the same styles anyway you could just write .sidebar a {…}. This will apply to link, visited, hover, active, and focus pseudo classes altogehter.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Troutdale, OR
    Posts
    147
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by VIPStephan View Post
    I’ve only had a glimpse at the CSS you posted here and I noticed one thing:



    If you want the styles to apply to a specific element you need to use the specific selector throughout:
    Code:
    .sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}
    (same for the menu CSS)

    However, if you want all link states to have the same styles anyway you could just write .sidebar a {…}. This will apply to link, visited, hover, active, and focus pseudo classes altogehter.
    I want my menu to change bakcground color on mouse over. Other that menu I want different stlye links. However they somehow mix. After I click link that is not part of my menu bar it changes stlye and looks like my menu bar. Not sure if it make sence.

    Thanks for info, I'll look into that.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I am building a web site from scratch
    Off topic: I'd recommend you to read the following articles if you haven't read it before.

    http://boagworld.com/technology/sema...e-what-why-how
    http://csscreator.com/divitis
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Troutdale, OR
    Posts
    147
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by abduraooft View Post
    Off topic: I'd recommend you to read the following articles if you haven't read it before.

    http://boagworld.com/technology/sema...e-what-why-how
    http://csscreator.com/divitis
    Thanks for info, I'll read those when I have time.

    Problem is still unresolved. I am sure it's an easy fix, but I just can't understand what am I doing wrong.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Problem is still unresolved. I am sure it's an easy fix, but I just can't understand what am I doing wrong.
    VIPS has already given the solution.
    If you want the styles to apply to a specific element you need to use the specific selector throughout:

    Code:
    .sidebar a:link, .sidebar a:active, .sidebar a:visited, .sidebar a:hover {…}
    (same for the menu CSS)
    Code:
    .sidebar a:link, a:active, a:visited, a:hover
    The above highlighted snipper in your CSS is getting applied on all the anchors. You need to make them specific as given by VIPS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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