XHTML Tips

This is where I post stuff about XHTML.

How to create a ‘flash mimic’ animated rollover link using just HTML and CSS

Posted in (X)HTML Tips, CSS Tips

This is an extremely simple and lightweight way of created a link that animates on hover. All you have to do is create your link in the normal way using HTML. For example:

  1. <p class="animated-rollover"><a href="#">Link text</a></p>

Now style this code so that you have a background image for ‘p.animated-rollover a’ and a different background image for ‘p.animated-rollover a:hover’. The hover state background image is going to be an animated gif. This is how you get the animation on hover.

  1. p.animated-rollover { width: 150px; height: 40px; background: url(images/animated_rollover_a_hover.gif); text-align: center; line-height: 40px; }
  2.  
  3. p.animated-rollover a { width: 150px; height: 40px; background: url(images/animated_rollover_a.gif); display: block; }
  4.  
  5. p.animated-rollover a:hover { background: url(images/animated_rollover_a_hover.gif); }

I’ve left out any text styling in this example. You could use ‘text-indent: -5000px; overflow: hidden’ and use the background image for the text if you like.

Emulating HTML5 using comment tags to make your HTML easier to edit

Posted in (X)HTML Tips

This is something I’ve been doing in all of the pages I’ve been coding for the last year or so. I’ve noticed other designers doing similar things. This is a simple little trick that makes hand editing code a lot easier.

Associating end tags with start tags using comments

Quite simply all I do is this:

  1. <div id="footer">
  2.  
  3. <p>footer content here</p>
  4.  
  5. </div>
  6. <!– /#footer –>

If I need to edit the code quickly I can easily establish the start and end of any particular element. This is similar to the HTML5 format, which is not yet being used by browsers, because HTML5 is going to be formatted something like this:

  1. <footer>
  2.  
  3. <p>footer content here</p>
  4.  
  5. </footer>