SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    Syracuse
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Including a standard image in navigation

    I'm working toward standardizing our site using style sheets - one question I haven't found an answer to is whether I can include a standard image in a page's navigation.

    Here's what I have so far on my webpage:

    Code:
    <img src="/images/arrow.gif" width="10" height="10" border="0"><a href="/webevent/index.htm" onMouseOver="showmenu(event,linkset[0])" onMouseOut="delayhidemenu()"><div class="newslink"> News &amp; Events</div></a>
    Here's what's in my style sheet to define "newslink":

    Code:
    .newslink
    {
    	color : #ffffff;
    	font-size : 9pt;
    	font-weight : bold;
    }
    What I'd like to do is to somehow include the arrow.gif image information in the .newslink.

    A.) I hope that makes sense and b.) is this possible?

    Thanks in advance!

    Michelle

  2. #2
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Coudn't you use a styled list for the navigation, removing the need for the js mouseover in the process?
    HTML
    Code:
     
    <ul class="sidenav">
    		  <li id="home"><a href="../index.asp" >HOME</a></li>
    		  <li id="about"><a href="../about.asp" >ABOUT US</a></li>
    		  <li id="what"><a href="../we-do.asp" >WHAT WE DO</a></li>
    		  <li id="links"><a href="../links.asp" >LINKS</a></li>
    		  <li id="contact"><a href="../contact.asp" >CONTACT</a></li>
    		  </ul>
    CSS
    Code:
    ul.sidenav {
    	margin: 0 0 0 0;
    	padding: 2px 0 0 0;
    	list-style-type: none;
    	color: #9A9A9A;
    }
    
    ul.sidenav li {
    	 display: block;
    	 font: bold 10px/13px Arial, Helvetica, sans-serif;
    
    }
    ul.sidenav a {
    	 display: block;
    	 padding: 1px 0 2px 9px;
    	 width: 125px;
    	 text-decoration: none;
    	color: #9A9A9A;
        background:url("images/nav/blank_a.gif") no-repeat left center; /*arrow appears on all items in the side nav*/
    }
    ul.sidenav a:visited {
    	 text-decoration: none;
    }
    ul.sidenav a:hover {
    	text-decoration: none;
    	color: #5E5E5E;
       background:url("images/nav/blank_b.gif") no-repeat left center; /*arrow image changes on link mouseover*/
    	text-shadow: 2px 2px 2px grey;
    }
    
    ul.sidenav a:active {
    	 text-decoration: none;
    }
    I know this may be a PITA in the short term (ie having to rebuild the nav almost from scratch) but in the longer term adding extra items is a pice of cake, with almost no work.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    Syracuse
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    That looks like it would work really well for me.

    That's why I decided to bit the bullet and really get moving toward using CSS - I'm finding that it is a PITA to get going, but I'll be able to do a lot of cool stuff once I learn a little more!

    Michelle


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
  •