SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 82
  1. #1
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you code this heading?

    This is something that I'm coming across quite a bit recently:



    Excuse the quick mockup

    Basically, there is a background drawing/picture and the logo is on top of that, and there is a menu is also placed somewhere on the heading image (some are web fonts, others have been a non-web font)

    I usually use an <img /> for logos, and any background image on a div that wraps the heading. The only "ideal" solution I can see is putting just the bg on a div, the logo as an <img /> positioned in place, and each menu item being positioned into place... geez though, that'd take a fair amount of time.

    How would you code something like that? (Assume the menu above is a non-web font and needs to be an image)

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Someone with a better understanding of these arcane matters can explain this better than I can, but in a nutshell: absolute positioning. You've already alluded to that. I don't think it would take that much time in tweaking it to set just so. But again, I'm not the expert.

  3. #3
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - but hiding the text, or not hiding the text? With accessibility, if images are turned off and "blank" links are positioned in place (either floats or absolutes), they won't see anything if text is hidden.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    THe following html is about all you'll need for your particular example.

    Code html4strict:
    <div id="header">
    	<h1 class="nameplate">Some Website Name</h1>
        <p class="nav">
            <a href="menu.html">menu</a>
            | <a href="menu.html">menu</a>
            | <a href="menu.html">menu</a>
            | <a href="menu.html">menu</a>
            | <a href="menu.html">menu</a>
        </p>
    </div>

    The css with a couple of images (header background and fancy heading text) allows you to do the rest.

    Code css:
    body {
    	font-family: 'tahoma';
    }
    #header {
    	background-image: url(header.gif);
    	font-weight: bold;
    	height: 200px;
    	margin: 0 auto;
    	position: relative;
    	text-align: center;
    	width: 600px;
    }
    #header h1.nameplate {
    	background: url(websitename.gif) no-repeat 0 50px;
    	color: white;
    	margin: 0 auto;
    	padding: 2em 0 0;
    	text-indent: -9999px;
    	width: 270px;
    }
    #header p.nav {
    	color: white;
    	margin-top: 4em;
    	text-align: center;
    }
    #header p.nav a {
    	color: white;
    	text-decoration: none;
    }

    I'll enjoy anything people can bring up about improving accessibility. For example, placing heading text underneath the image so that it's still visible should images not be there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll enjoy anything people can bring up about improving accessibility. For example, placing heading text underneath the image so that it's still visible should images not be there.
    The problem with this is accessibility. Heading text is off the page - in a css on/images off environment nothing will show.

    The only way (I can think of at least) of doing this is to have the BG as on image (not including logo or menu) and then positioning everything into place.

    Code HTML4Strict:
    <div id="header">
        <a href="#" id="logo"><img src="images/logo.png" alt="Some Site Name"></a>
     
        <ul>
            <li id="home"><a href="#">Home<span></span></a></li>
            <li id="home"><a href="#">Home<span></span></a></li>
            <li id="home"><a href="#">Home<span></span></a></li>
            <li id="home"><a href="#">Home<span></span></a></li>
            <li id="home"><a href="#">Home<span></span></a></li>
        </ul>
    </div>

    Code CSS:
    #header {background:#000 url(../images/header.jpg) no-repeat}
    #header #logo {display:block;margin:20px auto 0}
    #header ul {list-style:none}
    #header ul li#home {margin:0 0 0 50px}
    #header ul li#home a {height:25px;position:relative;width:100px}
    #header ul li#home a span {background:url(../images/menu.png) no-repeat;height:100%;left:0;position:absolute;top:0;width:100%}

    Something like that.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd put the menu after the header, then slide it over onto the header with a negative top margin.

    Basically have the header contain the logo, let the DIV containing the logo serve the background image, and then have a list of links appear after the DIV in the HTML code, yet at the bottom of the header on the screen.

  7. #7
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Updated the picture to illustrate better that the menu is images not text.

    Would the best method be the:
    <li><a href="#">Menu<span></span></a></li>

    With the menu section only CSS sprited and positioned into place, each item lined up horizontally and vertically so that it matches in with the bg pattern.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's what I would do, rochow

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rochow

    So far, this method seems to be good.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well that's a perfectly good and dandy way, however you should really never have empty elements. Just add a &nbsp; or something.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rochow View Post
    With the menu section only CSS sprited and positioned into place, each item lined up horizontally and vertically so that it matches in with the bg pattern.
    Using png images makes it easy to use alpha transparency so that the background image properly shows through.

    You can also achieve a similar effect by using transparent pixels in gif images.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Using png images makes it easy to use alpha transparency so that the background image properly shows through.
    Yes, for IE6 however, you will need a fix.

    I recommend TwinHelix's IE6 PNG fix.

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Yes, for IE6 however, you will need a fix.

    I recommend TwinHelix's IE6 PNG fix.
    I have used this before on a previous project. I got this weird flicker issue when loading in ie6. I think all of these 'fixes' do this

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    True, I personally stay away from PNG's so I will take your word for it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Using png images makes it easy to use alpha transparency so that the background image properly shows through.

    You can also achieve a similar effect by using transparent pixels in gif images.
    The thing is though, if you're using an image substitution technique (such as Gilder/Levin) to substitute text with an image, transparency is NOT going to be an option since the objective is to hide the text underneath when both CSS and images are enabled.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Doesn't IE6 only have a problem with alpha transparency on IE6? Just making sure. I'm trying to know as much as my professor when I get to college .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Member
    Join Date
    Jul 2006
    Location
    Sothern California
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seperation between XHTML and CSS is important! Keep your mark up simple and remember that CSS has handy cascading rules you can take advantage of. Here's how I'd mark up your example:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <title>My Website Title</title>
     
            <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8"/>
        </head>
        <body>
            <h1>My Logo Text</h1>
     
            <ul class="navigation">
                <li><a href="home.html"    class="home"    >Home   </a></li>
                <li><a href="about.html"   class="about"   >About  </a></li>
                <li><a href="pricing.html" class="pricing" >Pricing</a></li>
                <li><a href="contact.html" class="contact" >Contact</a></li>
            </ul>
        </body>
    </html>

    From here, we just put ALL of the presentation into CSS:
    Code CSS:
    body {
      background: url('images/body-bg.jpg');
    }
     
    h1 {
      /* Hypothetical image with the demensions specified */
      height: 200px;
      width: 400px;
      /* The logo we want to display instead of the header */
      background: url('images/logo.jpg') no-repeat;
      /* Hide the original text so it doesn't obscure our image logo */
      text-indent: -9999px;
      /* Center the logo and remove pesky margins */
      margin: 0 auto;
    }
     
    ul.navigation {
      /* remove default padding and bullet styles in navigation list */
      list-style-type: none;
      padding: 0;
    }
     
    /* Format the list horizontally and style each link */
    ul.navigation li {
      display: inline;
    }
     
    ul.navigation li a {
      display: block;
      /* Theoretical dimensions */
      height: 60px;
      width: 120px;
      /* Hide original text */
      text-indent: -9999px;
      /* An image containing text/graphics of all your links */
      background: url('navigation-links-bg.jpg') no-repeat top left;
    }
     
    /* Position the background image to show the correct image text/graphic */
    ul.navigation a.home    { background-position: 0  60px; }
    ul.navigation a.about   { background-position: 0 120px; }
    ul.navigation a.pricing { background-position: 0 180px; }
    ul.navigation a.contact { background-position: 0 240px; }

    You may see stuff you're unfamiliar with here, that's fine. All of the code is valid CSS that's supported pretty well in all the standard browsers. A few things of note:

    1. I use text intend to hide original text and keep it available for screen readers. There are other ways of doing this, but this one is my personal favorite.
    2. I combined all the background graphics for the navigation links into a single image. This helps a lot with page load time and has the added benefit of getting the browser to cache the image (along with the CSS).
    3. You can add hover states to the link images by just expanding on the original concept of a single graphic for navigation--just be sure to position the background image correctly to display what you want.

    A few things to check out regaurding XHTML/CSS styling and markup from A List Apart (bookmark this site):

    http://www.alistapart.com/articles/u...iveenhancement
    http://www.alistapart.com/articles/sprites
    http://www.alistapart.com/articles/slidingdoors
    http://www.alistapart.com/articles/1...SSandstandards

    Those are some explanations of some good CSS practices/techniques. If pretty markup isn't selling you, also consider that clean HTML leads to more search engine friendly pages and a more accessible site.

  18. #18
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    that's what I would do, rochow
    Damn, I was hoping someone had a better solution. It just seems so... dodgy.

    Quote Originally Posted by BoltZ View Post
    Well that's a perfectly good and dandy way, however you should really never have empty elements. Just add a &nbsp; or something.
    What's empty? The span? It's more semantic being empty than having a space (as it'll still be unsemantic anyway)

    Quote Originally Posted by pmw57 View Post
    Using png images makes it easy to use alpha transparency so that the background image properly shows through.

    You can also achieve a similar effect by using transparent pixels in gif images.
    PNG often is a bigger file size with alpha transparency, then you have to hack for IE6. I usually stay away unless I absolutely have to, and even then I don't like to.

    Quote Originally Posted by cooper.semantics View Post
    I have used this before on a previous project. I got this weird flicker issue when loading in ie6. I think all of these 'fixes' do this
    Yeah same experience, it looks strange.

    Also you can't use background positioning with alpha transparent PNG's in IE6

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Doesn't IE6 only have a problem with alpha transparency on IE6? Just making sure. I'm trying to know as much as my professor when I get to college .
    It does, but version 2.0 (alpha) of the TwinHelix IE PNG Fix .htc file takes care of this.

    Quote Originally Posted by Vyx View Post
    Seperation between XHTML and CSS is important! Keep your mark up simple and remember that CSS has handy cascading rules you can take advantage of. Here's how I'd mark up your example:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <title>My Website Title</title>
     
            <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8"/>
        </head>
        <body>
            <h1>My Logo Text</h1>
     
            <ul class="navigation">
                <li><a href="home.html"    class="home"    >Home   </a></li>
                <li><a href="about.html"   class="about"   >About  </a></li>
                <li><a href="pricing.html" class="pricing" >Pricing</a></li>
                <li><a href="contact.html" class="contact" >Contact</a></li>
            </ul>
        </body>
    </html>
    Vyx, there's no reason to use an H1 when an actual image will do for the logo, especially since the H1 is reserved for use as the top level document heading, which is generally thought of as the "Web page title". Also an ID would be far more appropriate for the UL as well. The classes you use on the links would only be necessary if you were using an image substitution technique, so that specific images can be associated with their links and the empty SPAN elements that hold the background images which make the technique possible.

    Quote Originally Posted by Vyx View Post
    From here, we just put ALL of the presentation into CSS:
    Code CSS:
    body {
      background: url('images/body-bg.jpg');
    }
     
    h1 {
      /* Hypothetical image with the demensions specified */
      height: 200px;
      width: 400px;
      /* The logo we want to display instead of the header */
      background: url('images/logo.jpg') no-repeat;
      /* Hide the original text so it doesn't obscure our image logo */
      text-indent: -9999px;
      /* Center the logo and remove pesky margins */
      margin: 0 auto;
    }
    The image substitution technique you're demonstrating here will cause accessibility issues. Anyone who turns off images while leaving the CSS support enabled will be unable to see the underlying text. Again, using an actual image (with its accompanying alt="" attribute text) will be a lot better here, especially since it will also result in less code being used.

    Quote Originally Posted by Vyx View Post
    Code CSS:
    ul.navigation {
      /* remove default padding and bullet styles in navigation list */
      list-style-type: none;
      padding: 0;
    }
     
    /* Format the list horizontally and style each link */
    ul.navigation li {
      display: inline;
    }
    I hope you're also removing the margins as well, or at least declaring a default override here. As for the list items, you'll also want to use white-space: nowrap; to prevent any issues in Internet Explorer and other browsers.

    Quote Originally Posted by Vyx View Post
    Code CSS:
    ul.navigation li a {
      display: block;
      /* Theoretical dimensions */
      height: 60px;
      width: 120px;
      /* Hide original text */
      text-indent: -9999px;
      /* An image containing text/graphics of all your links */
      background: url('navigation-links-bg.jpg') no-repeat top left;
    }
    Again, this will cause accessibility issues. Anyone who has images disabled (for whatever reason), will not be able to see the text.

    Quote Originally Posted by Vyx View Post
    Code CSS:
    /* Position the background image to show the correct image text/graphic */
    ul.navigation a.home    { background-position: 0  60px; }
    ul.navigation a.about   { background-position: 0 120px; }
    ul.navigation a.pricing { background-position: 0 180px; }
    ul.navigation a.contact { background-position: 0 240px; }

    You may see stuff you're unfamiliar with here, that's fine. All of the code is valid CSS that's supported pretty well in all the standard browsers. A few things of note:

    1. I use text intend to hide original text and keep it available for screen readers. There are other ways of doing this, but this one is my personal favorite.
    As I said earlier though (twice already), your method causes accessibility issues. Yes, the screen readers will be able to see them, but what about people who don't have images enabled? Or those times when a browser can't download a particular image?

    Quote Originally Posted by Vyx View Post
    2. I combined all the background graphics for the navigation links into a single image. This helps a lot with page load time and has the added benefit of getting the browser to cache the image (along with the CSS).
    3. You can add hover states to the link images by just expanding on the original concept of a single graphic for navigation--just be sure to position the background image correctly to display what you want.
    This is a very important point to bring up, and I'm glad you did. The more you can combine your images into single files and "slide" them into place, the better off you and your users will be, especially when it comes to reducing page load times.

    Quote Originally Posted by rochow View Post
    Damn, I was hoping someone had a better solution. It just seems so... dodgy.
    Why does it seem so dodgy?

    Quote Originally Posted by rochow View Post
    What's empty? The span? It's more semantic being empty than having a space (as it'll still be unsemantic anyway)
    Especially since a SPAN is a semantically neutral inline element. It's just a container, nothing more.

    Quote Originally Posted by rochow View Post
    PNG often is a bigger file size with alpha transparency, then you have to hack for IE6. I usually stay away unless I absolutely have to, and even then I don't like to.
    Same here, though when I have to, fixing the gamma correction (I mean breaking it since IE for once actually gets it right) and alpha-transparency are the top order of the day.

    Quote Originally Posted by rochow View Post
    Yeah same experience, it looks strange.

    Also you can't use background positioning with alpha transparent PNG's in IE6
    Actually you can. Version 2.0 (alpha) of the TwinHelix IE PNG Fix HTC file has support for that. Just one file dropped into a behavior (via a conditional comment) and you're done. No more messy scripting whatsoever. And if I recall correctly, it's only a 4k file, much smaller and efficient than the original.

    Oh, and it's free.

  20. #20
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you can. Version 2.0 (alpha) of the TwinHelix IE PNG Fix HTC file has support for that. Just one file dropped into a behavior (via a conditional comment) and you're done. No more messy scripting whatsoever. And if I recall correctly, it's only a 4k file, much smaller and efficient than the original.
    Good to know, I was wondering when someone would fix this 'issue'

  21. #21
    SitePoint Member
    Join Date
    Jul 2006
    Location
    Sothern California
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dan Schulz: You make some very good points. I personally don't give much thought to CSS on/Images off issue, as it's not a very common problem (to my knowledge). I'd imagine anyone who regularly used those settings would have big problems on the majority of the sites out there today.

    That aside, reguarding the h1 I used: what would you reccommend be a better approach for the title/logo of a page? I use an h1 because it seems like a logical place to stick the name of a clien't company and typically replace it with a stylized text logo or similar image. What are your thoughts?

    PS: Consider yourself followed on Twitter. It's rare that I run into a accessability/usability specialist.

  22. #22
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why does it seem so dodgy?
    I dunno... it just does lol. Likewise with links like:

    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a></li>

    I don't like using a |, but I don't like having to add a class on either the first or the last to negate a border effect.

    Same here, though when I have to, fixing the gamma correction (I mean breaking it since IE for once actually gets it right) and alpha-transparency are the top order of the day.
    I always run my PNG's (8bit or otherwise) through a compressor before sending the client the files, fixes the gamma issues and makes them smaller

    Actually you can. Version 2.0 (alpha) of the TwinHelix IE PNG Fix HTC file has support for that. Just one file dropped into a behavior (via a conditional comment) and you're done. No more messy scripting whatsoever. And if I recall correctly, it's only a 4k file, much smaller and efficient than the original.
    About damn time! I remember it was doing my head in a while back that I asked you about.

  23. #23
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Vyx View Post
    @Dan Schulz: You make some very good points. I personally don't give much thought to CSS on/Images off issue, as it's not a very common problem (to my knowledge). I'd imagine anyone who regularly used those settings would have big problems on the majority of the sites out there today.

    That aside, reguarding the h1 I used: what would you reccommend be a better approach for the title/logo of a page? I use an h1 because it seems like a logical place to stick the name of a clien't company and typically replace it with a stylized text logo or similar image. What are your thoughts?

    PS: Consider yourself followed on Twitter. It's rare that I run into a accessability/usability specialist.
    Why? Because the H1 is meant to be the top-level heading of a Web page, not a site. If you're using the site title as the H1, then you're saying that the site name is the title of every single page. Whereas the use of an image for the logo does not do that, therefore allowing the H1 element to be used for the document's top-level heading (such as "Dow Jones Industrial Index Falls 380 Points on Continued Market Fears" for example).

    Quote Originally Posted by rochow View Post
    I dunno... it just does lol. Likewise with links like:

    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a></li>

    I don't like using a |, but I don't like having to add a class on either the first or the last to negate a border effect.
    THAT I can agree with, however with the empty span, you're using it as an empty container and CSS hook. It's not visible to to the user, and it also creates no white space. Oh, and it's also accessible.

  24. #24
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still don't like the empty span lol. I like what it does, but I don't like having to use it in the first place

    What would be ideal is a background-stack similar to z-index, where you can simply set the background on top of the text on the element itself (such as the a). That way it does the exact same thing except perfectly semantically!

    Does anyone actually have a good solution for:

    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a>|</li>
    <li><a href="#">Something</a></li>

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Perhaps, use a server-side script to create the nav list, by joining an array of links with the appropriate separator?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •