SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member Catlikemeow's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy simple text rollover question

    Hi there. Long time lurker, new poster.

    I'm getting to know CSS decently, but the following isn't behaving like ( I think) it should, and I'm having a hell of a time figuring out why.

    The page is http://www.3fortygrill.com/indexold.php , and the problem comes when the menu bar links are visited. They're supposed to go to white background/dark red text, but the text isn't changing. Here's the CSS involved, and I can't tell what's going on. Any help would be much appreciated.

    Here's the html for that section

    Code:
    <td height=15 class="menu" align=right>
    <a href="menu.php">menu</a> . 
    <a href="contact.php">contact</a> . 
    <a href="restaurant.php">location</a> . 
    <a href="aboutus.php">about us</a> . 
    <a href="lounge.php">lounge</a> .
    
    </td>
    and here's the CSS


    Code:
     .menu {font-size:0.8em; color:#ffffff; background-color:#990000;}
    .menu a:link{color:#ffffcc;  font-weight: bold; text-decoration:none;}
    .menu a:hover{color:#990000; font-weight: bold; text-decoration:none; background-color:#ffffff}
    .menu a:visited{color:#ffffcc;  font-weight: bold; text-decoration:none;}
    .menu a:active{color:#ffffcc;  font-weight: bold; text-decoration:none;}
    A:link{color:#990000;  font-weight: bold; text-decoration:underline}
    A:visited{color:#990000; font-weight: bold; text-decoration:underline}
    A:active{color:#990000; font-weight: bold; text-decoration:underline}
    A:hover{color:white; font-weight: bold; text-decoration:none; background-color:#990000}
    Thanks a bunch.

    And if you're interested/live near Hoboken, NJ, the place holder page is at http://www.3fortygrill.com . Raw bar, martini lounge, great seafood. Whoo hoo.

  2. #2
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this will solve your problem:

    Take "class="menu" out of the td and put it inside each link, like this:

    <a href="menu.php" class="menu">menu</a>
    <a href="contact.php" class="menu">contact</a>

    etc.

    Then change your CSS like this:

    a.menu:link {blah, blah}
    a.menu:hover {blah, blah}
    a.menu:visited {blah, blah}
    a.menu:hover {blah, blah}
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  3. #3
    SitePoint Member Catlikemeow's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I'll try that, but I want to figure out why some of the changes work for the menu links, and some don't. Regular a hover has maroon background and white text, but menu text is always going to be on a dark background, so I want the hover to be of white (or another light color) background, and maroon text, which is, I think, what the css is saying. But it doesn't seem to be cooperating. I'd usually just keep reconstructing it from scratch till something worked, but I'd like to figure out why it's doing this. And I'm trying to get a demo of the site up by friday.

    All I'm trying to do is something like this page, where the links on lighter backgrounds are blue->orange and on the darker are white->orange
    Last edited by Catlikemeow; Oct 8, 2003 at 16:11.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The menu class is fine where it is, I think. It's less typing like that, and the selectors in the existing style sheet ought to pick it up just fine.

    Next, sort the link pseudo classes into the order link, visited, hover, active, like this:
    Code:
    .menu a:link{...}
    .menu a:visited{...}
    .menu a:hover{...}
    .menu a:active{...}
    If the order is different, strange things can happen - as you're seeing. If they're in the order you've given above (link, hover, visited, active) the "visited" style will override the "hover" style if both apply - which they probably will in your case, since you're the web author, and you've probably visited all pages in the site recently...

    Once all that's done, your links should be turning red-on-white when you mouse over them. I'm not sure if that's what you want, but it looks like that's what you're trying to code.

  5. #5
    SitePoint Member Catlikemeow's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my god, thank you so much. That's one of those ridiculous little things that would have taken me hours to stumble upon. I really appreciate it.

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem


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
  •