Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By mlseim

Thread: CSS basics

  1. #1
    Junior Member MrCat's Avatar
    Join Date
    Apr 2018
    Location
    Scotland
    Posts
    8
    Member #
    58735

    CSS basics

    Hi there folks, I have a small CSS problem I'm sure is simple but haven't been able to crack it yet.

    I have a simple menu using plain text and the CSS below. At the moment the text links are white, and turn black on rollover or hover. I would like the 'active' / selected page link text to be black.

    The menu can be found here

    Code:
    .topnav {
      overflow: hidden;
      background-color: #6C7CB5;
      	-webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    
    }
    
    .topnav a {
      float: left;
      display: block;
      color: #F3F3F3;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #CCCCCC;
      color: #000000;
    }
    
    .active {
      background-color: #CCCCCC;
      color: #000000;
    }
    
    .topnav .icon {
      display: none;
    }
    
    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
    Hope that makes sense...Any thoughts?

    Cheers

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,529
    Member #
    5580
    Liked
    702 times
    This is your current CSS for the active class ...

    .active {
    background-color: #CCCCCC;
    color: #000000;
    }


    Change it to this ...

    .topnav a:active {
    background-color: #CCCCCC;
    color: #000000;
    }


    I keep seeing this title ...
    Camus Arsa

    And I keep thinking it says ...
    Camus Arse



    Last edited by mlseim; Apr 13th, 2018 at 08:59 PM.
    MrCat likes this.


  4. #3
    Junior Member MrCat's Avatar
    Join Date
    Apr 2018
    Location
    Scotland
    Posts
    8
    Member #
    58735
    Ahh fantastic thanks! I knew it was some kind of 'a' tag appendage thing but tried a few ideas to no avail...

    Haha yes it's the name of a cabin, named by someone else for a laugh, 'Arsa is the island directly opposite, Camus meaning something like 'behind' or 'round the back of' I was going to change it but I quite like it now

    Cheers!

  5. #4
    Junior Member MrCat's Avatar
    Join Date
    Apr 2018
    Location
    Scotland
    Posts
    8
    Member #
    58735
    Great, just tested now, and to round off this thread:

    The colon in
    Code:
     .topnav a:active
    didn't work properly, the background for the active tab didn't change.
    Changing it to
    Code:
     .topnav a.active
    worked a treat.

    I don't know why as I'm no good at css really haha but somebody might find that useful!

    Cheers folks.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,529
    Member #
    5580
    Liked
    702 times
    You have a class named "active" and that same word is a CSS property of the "a" tag.
    It's one of those things where you happen to use a 'reserved' word (or more accurately, a "keyword").

    CSS keyword index

    It just happened to process them in the correct order so it works. When you get into SQL (MySQLi, PDO) you'll come across the same thing. There are certain database words that are "reserved". Using them can cause errors if you are not careful. Some you cannot use at all.

    When is your 'arse' cabin opened for rental?



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com