Skip navigation
pausepause
Currently Being Moderated

How can I make multi-colored links change their rollover or hover color?

Feb 9, 2014 1:39 PM

I have made links with seperate colors using css, but the links with new colors have no hover property. I want these links to change color when the cursor hovers over them the same way the other links on my page do. I have tried making a new css rule for <hover> and tried writing the property into the css code but to no effect. I have searched the web and this forum for an answer and found notheing that works. Does anyone know how to give links with multiple colors a hover property that will make them change color? All of my other links change color as defined in the page properties, but the links with new color rules don't change color anymore. This is probably pretty basic. I'm new to DW, using CS6. If anyone can provide a step by step and show where the code should be inserted, this would be very helpful. Thank you in advance!

 
Replies
  • Currently Being Moderated
    Feb 9, 2014 2:17 PM   in reply to pausepause
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 9, 2014 3:33 PM   in reply to pausepause

    Yes.  Don't use APDivs for any of this.  It's a fool's folly when you use APDivs in primary layouts because it removes content from the normal document flow.

     

    In any case, you still need to define the 5 pseudo-classes for this to work. 

     

     

    #divName a:link,

    #divName a:visited {color:red}

    #divName a:hover,

    #divName a:active,

    #divName a:focus  {color:gold }

     

     

    HTML: 

    <div id="divName">

         <a href="#">Some Link</a>

    </div>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2014 10:47 AM   in reply to pausepause

    But the text and links wouldn't stay positioned correctly when the page resized and the result was useless.

    That's because you're using APDivs for primary layout.  Best practice is to avoid positioning.  Learn to use CSS floats and margins. 

     

    You're not ready to tackle a Responsive Web Design until you can build a stable, fixed-width layout.  So don't even go there.

     

    DW assumes you have a good grasp of coding fundamentals & web design theory.  If you don't have those skills,  DW will only frustrate and confuse you.

     

    Spend some time learning HTML & CSS fundamentals first.

     

    Then work through this 5-part tutorial:

     

    Creating  your first web site in DW CC -

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

     

    Good luck!

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2014 12:44 PM   in reply to Nancy O.

    Just to add another voice to Nancy's comments, she is ABSOLUTELY correct (no pun intended). Absolute positioning should never be used as a general-purpose layout tool.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2014 4:49 AM   in reply to pausepause

    why did they ever call it absolute positioning? What exactly is the ap div absolutely positioned to?

     

    It's called absolute positioning because the location of the element is absolute, and does not depend on any other element on the page (notice how enlarging text may make content spill out of the absolutely positioned elements, or content elsewhere may 'subduct' the absolutely positioned element which is rock solid in its location on the page, unaffected by these changes.

     

    The reference point for an absolutely positioned element is the location of its nearest positioned ancestor. If there is no positioned ancestor, then the reference point becomes the 0, 0 position of the body tag (usually the upper, left-hand corner of the viewscreen. You can fiddle with the location of these absolutely positioned elements by nesting them (thereby creating a positioned ancestor). But all of the disadvantages of their use still apply.

     

    One useful concept to get is the difference between absolute positioning and relative positioning. A relatively positioned element is referencing the place where it would have been located were it not positioned. That means that instead of depending on the location of the body tag, it depends on where the normal flow would have put it on the page originally. So - if you nest an absolutely positioned element within a relatively positioned element, the absolutely positioned element will now track the normal flow of the page and move as the text gets larger or smaller (this still doesn't prevent the overflow effect you get when you make the text larger).

     

    Because of these unexpected behaviors of absolutely positioned elements, it's best to avoid their use as a general-purpose layout tool.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2014 12:33 PM   in reply to pausepause

    Basic HTML5 Layout with Multi-colored menu.

    basicHTML5-Layout.jpg

     

    Copy & paste the code below into a new, blank document.  SaveAs test.html.

     


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    body {
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 62.50%;
        width: 900px;
        /**with width, this is centered**/
        margin: 20px auto;
        padding: 0;
        background: #CCC099;
        box-shadow: 3px 3px 12px #333;
        border-radius: 12px;
    }
    /**TEXT LINKS**/
    a {
        text-decoration: none;
        font-weight: bold;
        color: #F63
    }
    a:visited { color: #F93 }
    a:hover, a:active, a:focus { text-decoration: underline }
    header {
        margin: 0;
        padding: 0;
        min-height: 100px;
        border-radius: 12px 12px 0 0;
        color: #FFF;
        background: url(http://lorempixel.com/output/abstract-q-c-1056-100-7.jpg) no-repeat;
    }
    /* Multi-colored Horizontal Drop-Menu */
    nav {
        float: right;
        padding: 4px;
        text-align: center;
        background: rgba(0,0,0,0.3)
    }
    nav ul {
        margin: 0;
        padding: 0
    }
    nav li {
        list-style: none;
        font-size: 12px;
        float: left;
        text-align: center;
    }
    /**top level menu**/
    nav li a {
        display: block;
        text-decoration: none;
        margin-right: 0; /* space between links */
        width: 10em; /* adjust as needed or use auto */
        padding: 8px;
        font-weight: bold;
        line-height: 1.50em;
        border-top: none;
        color: #000;
    }
    /**alternating background colors**/
    nav li:nth-child(odd) > a { background: #CAD3D3 }
    nav li:nth-child(even) > a { background: #FFCCCC }
    /**top menu style on mouse over**/
    nav li:hover > a {
        color: #FFF;
        background: #033D53;
    }
    /**sub-menu**/
    nav li ul {
        display: none;
        text-align: center;
        margin: 0;
        padding: 0 1em;
        background: none;
    }
    /**sub-menu, help for older IE**/
    nav li:hover ul, nav li.hover ul {
        display: block;
        position: absolute;
        padding: 0;
    }
    nav li:hover li, nav li.hover li { float: none; }
    /**drop-menu style**/
    nav li:hover li a, nav li.hover li a {
        width: 10em; /* adjust width as needed or use auto */
        margin-top: 0;
    }
    /**drop-menu style on mouse over**/
    nav li li a:hover {
        background: #D3E1B7;
        color: #004A43;
    }
    /* Clear floated elements at the end*/
    nav:after {
        display: table;
        content: '';
        clear: both;
    }
    /**END DROP-MENUS STYLES**/
    
    article {
        background: #FFC;
        padding: 3%;
        font-size: 125%;
    }
    /**3-COLUMNS**/
    section {
        float: left;
        width: 33.33%;
        padding: 1%;
        background: #EAEAEA;
        min-height: 250px;
    }
    /**alternating background-colors**/
    section:nth-child(even) { background: #DADADA; }
    footer {
        clear: left;
        color: #FFF;
        background: #033D53;
        font-size: small;
        font-weight: bold;
        text-align: center;
        padding: 1%;
        border-radius: 0 0 12px 12px;
    }
    /**text styles**/
    p {
        margin: 0 0 1.5em 0;
        padding: 0;
        font-size: 1em;
    }
    /**header text**/
    h1 {
        margin: 0;
        padding: 0.5em 1% 0;
    }
    h2 {
        margin: 0;
        padding: 0 1%;
        font-style: oblique
    }
    h3 {
        margin: 0;
        padding: 0;
        font-size: 1.5em;
        color: #09F;
    }
    </style>
    
    </head>
    
    <body>
    <header> <h1>Site Name</h1> <h2>Some Pithy Slogan</h2>
    
    <!--begin top menu-->
    <nav>
    <ul>
    <li><a href="#">ABOUT US &#9660;</a>
    <ul>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Newsletter</a></li>
    </ul>
    </li>
    <li><a href="#">PRODUCTS &#9660;</a>
    <ul>
    <li><a href="#">Broken Glass</a></li>
    <li><a href="#">Mosaic Tiles</a></li>
    <li><a href="#">Adhesives</a></li>
    <li><a href="#">Grout</a></li>
    </ul>
    </li>
    <li><a href="#">ACCESSORIES &#9660;</a>
    <ul>
    <li><a href="#">Gloves</a></li>
    <li><a href="#">Rubber Mallets</a></li>
    <li><a href="#">Sponges</a></li>
    <li><a href="#">Safety Glasses</a></li>
    </ul>
    </li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <!--end top menu--> 
    </header>
    
    <article> 
    <h3>Main Content goes here...</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.</p>
    </article>
    
    <!--3-columns-->
    <section> <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.</p>
    <ul>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    </ul>
    </section>
    
    <section> 
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p>
    </section>
    
    <section> 
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius.  Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </section>
    <!--end 3-columns-->
    
    <footer>
    <address>
    Company address . Phone . Fax
    </address>
    <small>&copy; 2014 SiteName. All rights reserved</small> 
    <p> </p>
    <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
    alt="Valid CSS!"> </a> <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" height="31" alt="Valid HTML5"></p>
    </footer>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2014 4:15 PM   in reply to Nancy O.

    You can make absolutely positioned elements track the normal flow of the page by putting them within a relatively positioned ancestor (usually it's a div wrapper that immediately follows the body tag and wraps everything on the page. But this is a very poor scheme for building a web page.

     

    A much better (and more stable) method is like stacking blocks. Read this - http://www.apptools.com/examples/pagelayout101.php

     

    Nancy O. frequently posts a list of extremely good and simple tutorials for page layout - see if you can find them.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2014 10:32 AM   in reply to pausepause

    Post a link to what you have done so far. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2014 2:44 PM   in reply to pausepause

    Save your work as TEST.html and upload it to your web server so someone can take a look at it in their browsers. 

     

    I gave you a good starting layout to work with but instead of experimenting  and learning from it, you gave up  and went back to old bad habits with APDivs.  That's not the way to proceed if you want to be successful with DW.  So I think I've done all I can here...

     

    Best of luck to you,

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points