Query CSS - make active links of different color

I created this design and I want buttons in the gray navigation bar at the top to be more pale (same color as the hover) when the link is active, but can't seem to make it work!

Advice much appreciated!

This is my css navigation:

{.navbar}

color: #FFFFFF;

are-family: Arial, Helvetica, without serif.

are-size: 12px;

text-decoration: none;

vertical-align: middle;

-letterSpacing: 1 point;

background-color: #666666;

padding: 0px;

text-align: center;

background-image: url(main_images/rounded_corners/nav.jpg).

background-repeat: repeat-x;

}

.NavBar {a}

padding: 5px;

color: #FFFFFF;

text-decoration: none;

display: block;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #FFF;

}

.NavBar a: visited {}

color: #FFFFFF;

text-decoration: none;

display: block;

}

.NavBar a: hover {}

color: #333333;

text-decoration: none;

background-color: #CCC;

}

.NavBar a: active {}

color: #FFFFFF;

text-decoration: none;

background-color: #CCC;

display: block;

Give a unique ID to each link.  On each page, embed a small stylesheet aimed specifically at the related link.  For example -.

Whatever

...

Furthermore, your CSS is a little talkative.  Try this-

{.navbar}

color: #FFF;

do-family: Arial, Helvetica, without serif.

do-size: 12px;

letter-spacing: 1pt;

background-color: #666;

padding: 0px;

text-align: center;

background-image: url(main_images/rounded_corners/nav.jpg);

background-repeat: repeat-x;

}

.NavBar {a}

padding: 5px;

color: #FFF;

text-decoration: none;

display: block;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #FFF;

}

.NavBar a: hover {}

Color: #333;

background-color: #CCC;

}

.NavBar a: active {}

background-color: #CCC;

}

Tags: Dreamweaver

Similar Questions

  • How can I make multicolored links change their color reversal or stationary?

    I made links with distinct colors using css, but the links with new colors have no hover property. I want these links change color when the cursor passes over them in the same way other links on my page only. I tried to make a new css for < hover > rule and tried to write to the property in the css code, but without result. I searched the web and this forum for an answer and found notheing that works. Anyone know how to give links with several colors of a hover property that will make them change color? All my other links change color as defined in the properties page, but links with the new rules of color change of color more. It's probably pretty basic. I'm new to DW, using CS6. If anyone can provide a step by step and show where the code needs to be inserted, it would be very useful. Thank you in advance!

    For those looking for an answer on how to change the a: hover color for a single hyperlink, after a little greater experimentation, I found that adding to my CSS allows me to change the color of a single binding a: overview!

    . Wrapper (div/link here your name) a: hover {}

    color: #(votre couleur préférée ici);

    }

    A simple solution to a simple problem. I hope this is a help to someone out there.

  • Text links in different color on the same page

    Is it possible to create text links which are of different colors on the same web page? I use CS4 on Mac. I have CS6, but obviously, I know so little about the design of web sites that I'm terrified of switching. In any case, I just want to know if it's possible. Thank you.

    Julie

    Well Yes, you can do it using css.

    In the css to your page, you can add something like...

    {a.redlinks}

    color: Red;

    }

    {a.Bluelinks}

    color: Blue;

    }

    And in the html code, all the links that you want to be red, the value of their class to redlinks and links you want to display blue, add the class bluelinks.

    They end up that looks like this...

    A text

    A text more

  • Links of different colors

    Hello.

    I use Dreamweaver CS3 and I'm trying to get a different color link to my email. My nav bar links have white text with a yellow color reversal, but I want my black rolling black enamel with a color.

    This is what my code looks like now:

    Class = "style71" > < a href = "mailto:" > < /a > < /p > < table > ' "

    What do I need add or edit to have black text?, well now it is white, and since it's on a white background, I do not see.

    Any help would be appreciated, thanks.

    The answer is in my first post-

    Add this to your CSS-

    .style71 a {color: #000! important ;}}

    Immediately add superior

    OR (if it exists)-

    -->

  • How can I make my logo two different colors? I know that sounds simple

    I just want the half black and half white since im doing a two shirt.Screenshot (33).png

    The shape of the eyes is first a compound path. Then put a black rectangle behind it and mask it with the shape of the eyes. Direct, select the mask and make it white.

  • How can I make easy links? Problems with CSS

    Sorry, me again. I found how to facilitate the transition of the color of my text navigation links, and it seems easy enough. However, when I add to my code, it seems to work.

    I know that it will be a mistake on my part, I just don't know what I did wrong. Any ideas?

    <! - section nav HTML - >

    < nav id = "nav" role = "navigation" >

    < ul >

    < li > < a href = "Home.html" title = 'Go Home' rel 'next' = > FRONT PAGE < /a > < /li > "

    < li > < a href = "About.html" title = "On BGDR" rel = "next" > ON < /a > < /li > "

    < li > < a href = "CV.html' title ="CV"rel = 'next' > CV < /a > < /li >"

    < li > < a href = "Blog.html" title = "A blog of my work and thoughts" > BLOG < /a > < /li > "

    < li > < a href = "Contact.html" title = "contact me" rel = 'next' > CONTACT < /a > < /li > "

    < /ul >

    < / nav >

    <! - section nav CSS - >

    a: link{
    color: hsla(0,0%,0%,1.00);
    -webkit-transition: color background-2s ease-out;
    -moz-transition: color background-2s ease-out;
    -o - transition: color background-2s ease-out;
    transition: background-2s ease-out color;
    text-decoration: none;
    }

    a: visited{
    color: hsla(0,0%,0%,1.00);
    }

    a: hover{
    color: hsla(0,0%,72%,1.00);
    text-decoration: none;
    Police-family: quicksand;
    make-style: normal;
    Police-weight: 400;
    cursor: pointer;
    }

    / * Note that 4 the code snippets down I have a li {} expressions.* section 3.

    Li{
    float: right;
    display: block;
    Width: 10em;
    }

    Here is what you wrote in the original post

    a: link {}

    color: hsla(0,0%,0%,1.00);

    -webkit-transition: background color 2s ease-out;

    -moz-transition: background color 2s ease-out;

    -o - transition: background color 2s ease-out;

    transition: background color 2 s ease-out;

    text-decoration: none;

    }

    With this, you target the background color should be the foreground color. The above should be

    a: link {}

    color: hsla(0,0%,0%,1.00);

    -webkit-transition: ease of color 2 s - out;

    -moz-transition: ease of color 2 s - out;

    -o - transition: ease ofcolor 2 s - out;

    transition: ease of color 2 s - out;

    text-decoration: none;

    }

  • How can you make a single element in a CSS list a different color?

    Hello

    I created a CSS horizontal navigation bar and would like to know how I can have the title of the current page are displayed in a different color ('House' would be in a font while the other four or five headers in the navigation bar would have a few other common fonts), but I can't quite understand how to proceed.  It seems to be quite difficult given the dynamic nature of the present.

    Can anyone help?

    http://hicksdesign.co.UK/journal/highlighting-current-page-with-CSS

    Who will explain a simple sollution using CSS.

    It shows how to select a particular piece of nav using ID in your HTML code on the list item and the body tag, and then using this combination to write a CSS rule to target the element of list on a particular page.

    Martin

  • 2 different color side by side links

    Hello

    I need to make two links in a DL in two different colors and I tried just about everything I know and it still does not work.

    This is the css for the two different links markup:

    . Band, the .band: link {}

    color: #996600;  / * Crowns gold * /.

    text-decoration: none;

    }

    . Band a: visited {}

    color: #996600;  / * Crowns gold * /.

    text-decoration: none;

    }

    . Band a: hover, .band a: active .band, one: {emphasis

    color: #990033; / * Red * /.

    text-decoration: underline;

    }

    .ticket a, .ticket a: link {}

    color: #C00;

    text-decoration: none;

    }

    .ticket a: visited {}

    color: #069;

    text-decoration: none;

    }

    .ticket a: hover, .ticket a: active .ticket, a: {emphasis

    color: #069;

    text-decoration: underline;

    }

    then on the page I have this:

    < dl >

    < dt >

    "June 1 < a href ="... /... "/ store/index.asp" class = 'ticket' > TICKET EVENT - "$10" < /a >. "

    < /dt >

    < dd >

    M. December < foreigners >

    < dd >

    < a href = "www.mrdecembertheband.com" target = "_blank" class = "band" > www.mrdecembertheband.com < /a >

    < foreigners >

    < /dl >

    Here is the link to the site: http://www.crystalbasin.com/pages/cbc_events/summer-concert.html

    DRM for advice as to why it does not work.

    These small nuances of CSS can drive you crazy.

    change: .ticket has.

    and .band.

    to: a.ticket,

    and a.band,

    Things like fires me all the time.

    Nancy O.

  • How can I make the menu title of a different color when it is horizontal Spry menu menu?

    How can I make the menu title of a different color when it is horizontal Spry menu menu?

    Dreamweaver CS5.5

    Apple OS X.6.8

    Display of the site to: http://Dorsay-Easton-Indian-law.com/staging/index.html

    Steps to follow:

    1. click on the link to land on the home page

    2 link see Home in the Spry horizontal navigation menu

    Real:

    Title of the home menu is the same color as all the others.

    Expected:

    The title of the active menu is color: #FFC.

    I was hoping that a: active would give me this feature, but it's not how it is described. All suggestions are welcome!

    The tag BODY nothing that I tried in the editable model. This is why I wonder how to disconnect the model individual pages. Adding an ID to each body tag is a condition sine qua non of the how-to page that you provided.

    You are not theeditable in a template tag.

    You are the attributes of theeditable tag.

    Do not unplug the model child pages.

    Specify editable tag attributes in a template

    http://help.Adobe.com/en_US/Dreamweaver/CS/using/WScbb6b82af5544594822510a94ae8d65-7aa3a.h tml

    In the model:

    1. Select ittag (in the tag selector, or click inside the)tag in Code view)
    2. Modify > templates > make attribute editable
    3. Select the code in the drop down attribute
    4. If there is no ID attribute then click Add and type the ID in the next dialog box
    5. Attribute: ID
      Check the box 'Make attribute editable '.
      Enter anything in the field of the default label for example foo
      Ok
    6. Dreamweaver will change thetag to read
    7. The ID is now editable
    8. Save the model and update the child page

    In each page of the child:

    1. Edit > properties of the model
    2. Select the id attribute in the list (it's probably the only one listed)
    3. Change its name in the box to any name matches your CSS rule for the active state of the page
    4. Ok
    5. Save
    6. Download
  • Do the current ('active') in the bar a different color navigation tab

    Hi-

    How to make the 'active' tab in the navigation bar displayed in a different color, so that the user knows which page is currently viewing the color of the tab from the navigation bar?

    I tried to assign a unique ID to each element of the navigation bar (tab), so they can be decorated.  Then, I made a CSS rule for each tp tab set the same color (green) to indicate that the tab is "active".  I ran a test using the 'HOME' tab, but my procedure did not work.  Any ideas as to what I can do?

    Here's what I have for HTML and CSS:

    HTML:

    < div class = "navMain" >

    < ul >

    < li = "Home" tab id > < a href = "index.html" > home < /a > < /li >

    < id li = "AboutTab" > < a href = "about.html" > on < /a > < /li >

    < id li = "PortfolioTab" > < a href = "portfolio.html" > portfolio < /a > < /li > ""

    < id li = "ResumeTab" > < a href = "resume.html" > curriculum vitae < /a > < /li > ""

    < id li = "ContactTab" > < a href = "Contact.php" > Contact < /a > < /li > ""

    < /ul >

    < / div > <! - END navMain - >

    CSS:

    {#HomeTab}

    do-family: "Arial Unicode MS";

    do-size: 18px;

    make-weight: normal;

    text-transform: uppercase;

    Color: #0F0;

    text-decoration: none;

    }

    I also provided my reference site:

    http://www.sbaisden.com/

    Persistent Page indicator

    http://ALT-Web.com/articles/persistent-page-indicator.shtml

    Nancy O.

  • try to get a spry menu to show the links visited with different colors

    I know there are Javascript involved, that I was wondering if someone sent it upwards again. as one @ the downloadable file

    Visited links are not necessarily JavaScript engine.  They are mainly the CSS driven.

    / * link not visited * /.
    a: link {}
    Color: #FF0000;
    }

    / * visited links * /.
    a: visited {}
    Color: #00FF00;
    }

    / * mouse over link * /.
    a: hover {}
    color: #FF00FF;
    }

    / * selected link * /.
    a: active,

    a: focus {}
    Color: #0000FF;
    }

    FYI: Spry died.  Adobe abandons this end 2012.

    Nancy O.

  • How to make the second row in different color

    Hi gurus

    How can I make every second row in a different color.

    Thank you
    RGB

    Hello
    You can use the Type property of the bands of table.

    Thank you
    -Anil

  • Can I make Apple Notes different colors?

    Can I enter records in different colors Notes of Apple?

    If so, they will download to iCloud?

    I'm afraid, it is not possible- notes on iPhone, iPad and iPod touch - Apple Support.

    Inform Apple - http://www.apple.com/feedback/

  • Use active link query

    Requirements: -.

    (1) as to create an active link - check tab attachments for the description of the 'uninstall plan' (not case sensitive) when we click the button "Create referenced Change Control" in the "other information".

    Note:-Backou description of the plan can be in any order lines. Means, it may be the second, third... so now... in the description of the part attached.

    (2) please request a message to attach the plan to uninstall as an attachment, if it is not found.

    Please repost your question in the Forum scripts: http://social.technet.microsoft.com/Forums/en-US/ITCG/threads where people who specialize in the scripts will be happy to help you.  We do not deal with programming in these forums.

    Good luck!

    Lorien - MCSA/MCSE/network + / has + - if this post solves your problem, please click the 'Mark as answer' or 'Useful' button at the top of this message. Marking a post as answer, or relatively useful, you help others find the answer more quickly.

  • CSS a: active issue

    Hi all, I have a css one: active problem where I can not get the page to recognize that it is active and mark the CSS accordingly. Can you please specify? I have two places where a: active is applied, but none works!

    In general, it's css for text throughout the site links:

    a: link {}

    color: #ccc;

    text-decoration: none;

    make-weight: normal;

    -webkit-transition: color 400ms facilitated;

    -moz-transform: color 400ms facilitated;

    -o - transition: color 400ms facilitated;

    transition: color 400ms facilitated;

    }

    a: hover {}

    Color: #f00;

    }

    a: active {}

    color: #666;

    }

    And it's a very simple menu nav-specific:

    UL. NAV {}

    list-style: none;

    border-bottom: 1px solid #F00;

    margin-bottom: 40px;

    padding-bottom: 40px;

    }

    {ul li. NAV

    line-height: 27px;

    color: #fff;

    }

    UL. NAV a {}

    font size: 29px;

    padding: 0px 0px 0px 0px;

    display: block;

    text-decoration: none;

    color: #fff;

    }

    UL. NAV a: hover {}

    Color: #f00;

    }

    UL. NAV a: active {}

    color: #999;

    }

    Thanks in advance.

    Carpet

    Active = onClick.  It does not stick on successive pages.

    What you want is an indicator of page in large site menus

    http://ALT-Web.com/articles/persistent-page-indicator.shtml

    Nancy O.

Maybe you are looking for