Results 1 to 5 of 5

Thread: navigation link colors problem

  1. #1
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default navigation link colors problem

    I cannot for the life of me figure out what I'm missing to change Navigation link color -- mainly .current class, but also a:hover, etc. I even tried adding overkill ".top ul li a:link, " contextual to selectors.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Art of Ingrid Siliakus</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <meta name="description" content="Art of Ingrid Siliakus">
    <meta name="keywords" content="Art of Ingrid Siliakus,paper craft">
    <style type="text/css">
    #slideshow { /* set to dimensions of the images - best for images all of the same dimensions */
    	width:1100px ;/*140px*/
    	height:480px ;/*225px*/
    }
    #slideshow img {
    	display: block;
    	position: absolute; margin-top:25px; margin-left:10px;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="top">
    <div class="logo">
    <img src="image/page1/logo2.jpg" alt="logo lady" style="width:500px; height:85px">
    </div><!-- closeLOGO-->
    	 <ul> 
      		<li><a href="#">Exhibition</a></li>   
      		<li><a href="#">Art</a></li>
       		<li><a href="About.html">About</a></li>
       		<li><a href="#" class="current">Home</a></li> 
      	 </ul>
    </div><!-- closetop -->
    
    <div class="art">
    <div id="slideshow">
      <p>&nbsp;</p>
      <img src="image/page1/page1_book.jpg" width="1100" height="480" alt="original" title="sketch" />
      <img src="image/page1/page1_house.jpg" width="1100" height="480" alt="original" title="sketch" />
      <img src="image/page1/page1_three.jpg" width="1100" height="480" alt="original" title="sketch" /> 
      <img src="image/page1/page1_four.jpg"width="1100" height="480" alt="original" title="sketch" />
    </div><!--closeSLIDESHOW-->
    <script type="text/javascript">
    var ssdiv = document.getElementById('slideshow');
    var howlong = 3000;
    function rotateimages(){
    	ssdiv.appendChild(ssdiv.getElementsByTagName('img')[0]);
    	setTimeout(rotateimages, howlong);
    }
    rotateimages();
    </script>
    </div><!--closeART-->
    
    <footer>
        <div class="bar"> 2015 Angela Chen Web final</div>
        </footer>
    </div>
    </body>
    </html>
    Code:
    @charset &quot;UTF-8&quot;
    /* CSS Document */
    html { margin:0; padding: 0;}
      body {margin:0; padding: 0; color:#939597;font-family:Athelas-regular;font-size:14px; min-width:1200px; }
      /* HTML5 block elements */
      header, footer { display:block; clear:both;}<br>
      .container{ width:1200px; position:relative; display:block; margin:10px auto; <br>
      background: transparent; }<br>
      nav { background-color:#E6E7E8; }
    .top ul { list-style-type:none; margin-right:10px;margin:0;padding:0; float:left; width:50%; white-space:nowrap; }
    .top ul li { display:inline; float:right; width:8em; text-align:center;}
    .top ul li a {display:block; padding:20px 0; text-decoration:none; color:#A7A9AB; font-family:Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;font-size:35px; line-height: 35px; font-weight:800;}<br>
      .top ul li a:link, .top ul li a:visited { color:#A7A9AB; } 
      .top ul li a:hover, .top ul li a:focus, .top ul li a:active, { color:white; }
      .top ul li .current {color:red;} /*#939597*/<br>
      
      a { text-decoration:none; } 
      a:link {   font-weight : normal;   text-decoration : none;  background: transparent; color:#A7A9AB;  }
      a:visited { color:#A7A9AB;  } 
      a:focus, a:hover { text-decoration : underline overline;  color: #F3C;  }
      a:active { background-color: #8899aa;  } 
    
    .logo{float:left; padding: 0 0 0 10px;}
    .top{background-color:#E6E7E8;height:85px; float:left; width: 100%; margin:0 auto; overflow:visible;}
    
    .bar{font-size:9px;padding:15px;text-align:center;background-color:#e6e7e8;width:1200px;}
    
    .art { positon: relative; height: 800px; }
    .art img { padding:60px 60px 0px 50px; margin: 0 auto; display:block; }</p>
    
    #main {width:1200px; position:relative; margin: 2px auto; display:block; }<br>
      .left { float: left; width: 560px; padding: 0 2px; }<br>
      .left p { text-align:left; padding:2px 10px; }<br>
      .right { float: right; width: 480px; padding: 0 2px; background:#E6E7E8; color:black;height: 600px; }<br>
      .right img { /*display:table-cell; vertical-align:middle; float:right; */ display:block; margin:2px auto; width:50%; }</p>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Code:
    .top ul li a.current { color: red; }
    BTW - I'm not sure why you have HTML (breaks and closing paragraph tags) in your CSS, but you should remove them as they may be affecting things.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    auntnini (05-12-2015)

  4. #3
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    Thanks Beverley. I missed that (when helping a "tutee"). Yes, no HTML or other language tags, etc. in CSS file. The mistake was in copying/pasting the code, which added the <p>s and <br>s.

    What has me confounded is that we could not add a simple style rule class="current" to the <a href="#" class="current">link</a> without the "contextual" chain ? ? ? ? ?

    What am I missing?

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If there are already contextual chains in play, unless you use the same or a more specific syntax, it's often possible that a prior contextual chain (because it's more specific) will actually override a later declaration made without regard to the contextual chain(s) already in use in the stylesheet. This is especially likely if a parent element in the chain is selected via its tag and/or class name. The id selector (because it's supposed to be unique) is usually less an issue here but can be. The a tag itself is also sometimes more prone to these sorts of things because it generally has more default styles than most other tags do.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-19-2015)

  7. #5
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    Thanks for the information.

Similar Threads

  1. navbar link colors with javascript instead of css
    By acan123 in forum JavaScript
    Replies: 2
    Last Post: 08-30-2010, 01:01 PM
  2. 2 different colors within the same link?
    By laurentamale in forum CSS
    Replies: 2
    Last Post: 01-03-2009, 09:23 PM
  3. Two link colors on one page
    By Bubbletin in forum CSS
    Replies: 3
    Last Post: 03-14-2007, 04:05 AM
  4. Top Navigation Bar 111 Link Problem
    By morgan1012 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-01-2005, 08:11 PM
  5. Any link DD menu - colors
    By GocFonStrauss in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-29-2005, 05:46 PM

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
  •