SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS nav background images

    Hi!

    I'm trying to build an accessible nav menu that looks a little like this: http://definitiondesign.com/staging/images/test.gif

    Basically I'm attempting to build it all in CSS but with a corner background image in the top left of each anchor element - fairly straightforward stuff. The nav button appearance however makes use of borders, which unfortunately screws up the intended effect.

    I've put up a very rough test page to demonstrate here: http://definitiondesign.com/staging/test.htm

    Obviously on hover there would be a background corner image too.

    How do I get it so that the corner image obscures the border around the link? I've tried a few diffferent ways, including adding a span around each link and doing bizarre things with setting the background image on the span instead and offsetting the image, etc, but with IE/PC really messing things up.

    I'm sure there's a simpler way! If there is I'd be grateful of any help or advice, thank you : )

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you'll either have to use an image for the whole anchor so that the borders and gaps are on the image or make do with something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>:: Welcome to the Official Hull FC website ::</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    body {
    background: #666;
    }
    #nav {
     width: 200px;
     float: left;
    }
    ul#navlist {
     list-style: none;
     color: #FFF;
     margin: 0;
     padding: 0;
     float: right;
     width: 199px;
     border-right: 1px solid #CC6633;
     border-top: 1px solid #CC6633;
    }
    ul#navlist li { position:relative;}
    ul#navlist li a {
     text-decoration: none;
     color: #000;
     display: block;
     margin: 0;
     padding: 2px 0;
     text-align: right;
     border-top: 1px solid #FFFF99;
     border-bottom: 1px solid #CC6633;
     border-left: 1px solid #FFFF99;
     background: #FDBB30 ;
     position:relative;
     
    }
    /* commented backslash hack v2 \*/ 
    * html ul#navlist li a{height:1%}
    /* end hack */ 
    ul#navlist li span{
     position:absolute;
     width:7px;
     height:7px;
     background: transparent url(http://definitiondesign.com/staging/.../navcorner.gif) no-repeat 0 0;
     display:block;
     left:-1px;
     top:-1px;
     z-index:100;
     overflow:hidden;
    }
    ul#navlist li a:hover {
     background: #FFFF99;
     border-top: 1px solid #FFFF99;
     border-bottom: 1px solid #FDBB30;
     border-left: 1px solid #CC6633;
    }
    ul#navlist li a#topnav {
     border-top: 1px solid #FFFF99;
    }
     </style>
    </head>
    <body id="home">
    <div id="nav"> 
      <ul id="navlist">
    	<li><span></span><a href="#" id="topnav">Home</a></li>
    	<li><span></span><a href="#">News</a></li>
    	<li><span></span><a href="#">Tickets</a></li>
    	<li><span></span><a href="#">Fixtures/Results</a></li>
    	<li><span></span><a href="#">The Players</a></li>
    	<li><span></span><a href="#">Academy</a></li>
    	<li><span></span><a href="#">KC Stadium</a></li>
    	<li><span></span><a href="#">Community Development</a></li>
    	<li><span></span><a href="#">Angels</a></li>
    	<li><span></span><a href="#">Sponsorship/Commercial</a></li>
    	<li><span></span><a href="#">Youth in the Community</a></li>
    	<li><span></span><a href="#">Fan Zone</a></li>
    	<li><span></span><a href="#">Merchandise</a></li>
    	<li><span></span><a href="#">Links</a></li>
      </ul>
    </div>
    <!-- nav -->
    </body>
    </html>
    Its not quite right because a tiny bit of the image shows on hover but uts actually quite a good effect lol.

    You could place the span in the anchor and then you would be able to swap it on rollover but ie wont absolutely position when you have right aligned text. It takes its position from the start of the text and not the start of the line. Which is why the span is moved to the list elements instead.

    Hope it helps anyway

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Paul,

    You've actually done pretty close to what I ended up with, using a span to place the background image, although I had the span in the anchor rather than the list item, as you said.

    Just to finally get it working I actually used Dean Edward's IE7 javascript compliance patch, which has actually done the trick! However, it doesn't work in IE5/Mac as that has problems with using :hover on elements other than the anchor too. I must say I'm a little uneasy about using javascript in this way too.

    It appears to be a toss-up between total accessibility (but using javascript for the intended visual effect in IE/Win) or 'nearly perfect' accessiblity (but using a fixed nav button image that doesn't scale with the text). I'm actually veering towards the 'nearly perfect' side of things now I think!

    Thanks again very very much for your help Paul.

    Dave

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Grand Rapids, Michigan
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dear lord, that looks waaaay too complicated. i tried something a bit different, so you could see a much easier way.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Test</title>
    	<style type="text/css">
    		
    		/*easy simple stuff*/
    		body {font-family: verdana; font-size: 10px;}
    		#nav ul {margin: 0; padding: 0;}
    		#nav ul * {margin: 0; padding: 0;}
    		#nav li {list-style-type: none;}
    		#nav li a {color: #000; text-decoration: none;font-weight: bold;}
    		#nav li a:hover {color: #000;}
    
    		/*meat and potatoes*/
    		#nav ul li {float: left; clear: left;}
    		#nav li.first {padding-top: 1px;}
    		#nav ul li a {
    			width: 195px;
    			height: 15px;/*both width and height would be the size of the image tab*/
    			background: transparent url(tab.gif) no-repeat 0px 0px;
    			padding: 3px 5px 0px 0px;
    			border-bottom: 1px solid #C63;
    			display: block;
    			text-align: right;
    			margin-top: -1px;
    		}
    		#nav li a:hover {background: transparent url(tab.gif) no-repeat 0px -18px;}
    		#nav li.first a:hover {background: transparent url(tab.gif) no-repeat 0px -18px;}
    	
    	</style>	
    </head>
    <body>
    
    <div id="nav">
    	<ul>
    		<li class="first"><a href="#">Home</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    		<li><a href="#">Test</a></li>
    	</ul>
    </div>
    
    </body>
    </html>
    here it is in action

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Dave,

    It was late last night when I posted but there is a solution without using hover on the lists so no behaviours are needed.You just put the spans in the anchor but then set the list to position:relative instead of the anchor and we loose the ie bug.

    You can then swap the corner image on hover by targetting the span.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>:: Welcome to the Official Hull FC website ::</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    body {
    background: #666;
    }
    #nav {
    width: 200px;
    float: left;
    }
    ul#navlist {
    list-style: none;
    color: #FFF;
    margin: 0;
    padding: 0;
    float: right;
    width: 199px;
    border-right: 1px solid #CC6633;
    border-top: 1px solid #CC6633;
    }
    ul#navlist li { position:relative;}
    ul#navlist li a {
    text-decoration: none;
    color: #000;
    display: block;
    margin: 0;
    padding: 2px 0;
    text-align: right;
    border-top: 1px solid #FFFF99;
    border-bottom: 1px solid #CC6633;
    border-left: 1px solid #FFFF99;
    background: #FDBB30 ;
     
    }
    /* commented backslash hack v2 \*/ 
    * html ul#navlist li a{height:1%}
    /* end hack */ 
    ul#navlist li span{
    position:absolute;
    width:7px;
    height:7px;
    background: transparent url(http://definitiondesign.com/staging/.../navcorner.gif) no-repeat 0 0;
    display:block;
    left:-1px;
    top:-1px;
    z-index:100;
    overflow:hidden;
    }
    ul#navlist li a:hover {
    background: #FFFF99;
    border-top: 1px solid #FFFF99;
    border-bottom: 1px solid #FDBB30;
    border-left: 1px solid #CC6633;
    }
    ul#navlist li a:hover span{ /*make another image*/
    background: transparent url(http://definitiondesign.com/staging/.../navcorner.gif) no-repeat 0 0;
    }
    ul#navlist li a#topnav {
    border-top: 1px solid #FFFF99;
    }
    </style>
    </head>
    <body id="home">
    <div id="nav"> 
    <ul id="navlist">
    	<li><a href="#" id="topnav"><span></span>Home</a></li>
    	<li><a href="#"><span></span>News</a></li>
    	<li><a href="#"><span></span>Tickets</a></li>
    	<li><a href="#"><span></span>Fixtures/Results</a></li>
    	<li><a href="#"><span></span>The Players</a></li>
    	<li><a href="#"><span></span>Academy</a></li>
    	<li><a href="#"><span></span>KC Stadium</a></li>
    	<li><a href="#"><span></span>Community Development</a></li>
    	<li><a href="#"><span></span>Angels</a></li>
    	<li><a href="#"><span></span>Sponsorship/Commercial</a></li>
    	<li><a href="#"><span></span>Youth in the Community</a></li>
    	<li><a href="#"><span></span>Fan Zone</a></li>
    	<li><a href="#"><span></span>Merchandise</a></li>
    	<li><a href="#"><span></span>Links</a></li>
    </ul>
    </div>
    <!-- nav -->
    </body>
    </html>
    Hope that helps.

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi punkguitarkclf,

    Your image version is what I suggested in my first post.
    I think you'll either have to use an image for the whole anchor so that the borders and gaps are on the image
    However I think dave wanted to get away from using a whole image for the anchor and not having to either using fixed width images or (the sliding doors version etc of fluid images). The code above has little overhead as its a tiny 7px gif but obviously is a little more complicated.

    Thanks for taking the time anyway as its always appreciated

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there punkguitarkclf!

    Thanks a lot for going to the trouble of putting together the test for me. Paul O'B's right though, I would have normally done it with one image and shifted the background position on hover as you've done, but the client in this case requires the tabs themselves to scale with the text, hence the pure CSS version with minimal images.

    Thanks again though, much appreciated!


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
  •