CSS Tips

2009 Apr 28

Blink Image
Positioning		 Link
Variations		 Menus Web Page
Border		 Page
Breaks		 Links

Blink

The text-decoration property value of blink is not required to be supported (IE, for example, does not) and one might want non text span elements to blink, not just text. Here is how to do this in JavaScript (which will fail safely if JS is disabled by the user).

Blinking
text and
images! 
<head>
<script>
  function blink_span(delay) {
    var spans = 
      document.body.getElementsByTagName('span');
    for(var s=0; s<spans.length; s++) {
      if(spans[s].className == 'blink') {
        spans[s].style.visibility = 
          spans[s].style.visibility == 'hidden' ?
            'visible' : 'hidden';
      }
    }
    setTimeout('blink_span(' + delay + ')', delay);
  }
</script>
...
</head>
<body onload="blink_span(500);">
...
<span class="blink">
  <img src=li.gif> Blinking<br>text and<br>
  images! <img src=li.gif>
</span>
...
</body>

Image Positioning

Images are normally inline, to center horizontally use <center> or embed in a <div> or change its display property. To vertically center an image:

img.v_ctr {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -64px; /* half of img height */
  margin-left: -32px; /* half of img width */
  height: 128px;
  width: 64px;
}

To fix an image in the browser window even if the user scolls:

body.fix {
  background-image: url(fixed.png);
  background-attachment: fixed; /* default is: scroll */
  background-repeat: no-repeat;
}

Use positioning, margins and padding for detailed control.

Link Variations

How links behave is easily changed as follows (as has been done for this page):

a:visited {
  background-color: #CCC;
  text-decoration: line-through;
}

Rollover effects can be done with styles rather than JavaScript using the :hover pseudo class. This is not supported in some older browsers (e.g. Navigator 4, Opera 4). Move mouse over links in left side of table to see effect:

Link1
Link2
bg12
 
a:link:hover { font-size: 125%; }
a#hvr:link:active { background-color: #99CC99; }
a#hvr:link:hover { font-size: 125%; }
a#hvr:visited:hover { font-size: 125%; }
a#hvr:visited:active { background-color: #CC99FF; }
div#himg:hover { background-image: url(bg12.gif); }
...
<a id=hvr name=HERE></a>
<a id=hvr href=#HERE>Link1</a><br>
<a id=hvr href=#HERE>Link2</a>
<div id=himg>bg12</div>

In order to avoid specificity or cascade rules overriding earlier styles, be sure to list selecters in the following order:

Anchor Select Anchor Select Meaning
a
a#id
a.class		 /* any anchor */
/* anchors with specified id */
/* anchors with specified class */
Followed by Visit Select Visit select meaning

:link
:visited		 /* selected anchor(s) */
/* selected anchor(s) with unvisited link */
/* selected anchor(s) with visited link */
Followed by Mouse State Select Mouse state select meaning

:hover
:active		 /* selected anchor(s) by visitation */
/* selected anchor(s) by visitation and mouse above */
/* selected anchor(s) by visitation and left clicking */

Examples:
a#foo:link:active /* anchor with id=foo, unvisited with left mouse click down */
a.fee:visited:hover /* anchor with class=fee, visited with unclicked mouse above link */

When using an image (which should ideally all be the same size) for any of these selection mechanism, wrap the content in a <span>...</span> and have some variation of the following example styles set:

a span { display: none; } /* could be qualified, e.g. as - a:link span */

a#bot:link:active {
  display: block;
  width: 128px; height: 128px;
  background-image: url(unvisited_click.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

Menus


Vertical
Horizontal
Collapsible
Shared Styles 
.nav1 {
  padding: 0; margin: 4px;
  background-color: #69F;
}
.nav1b {
  padding-left: 0; margin: 4px;
  border: 5px ridge #036;
  background-color: #69F; 
  list-style: none;
}
.expander {
  background-color: #6C9;
  font-weight: bold;
}
.nav1 a { 
  color: #03F;
  padding: 2px;
  text-decoration: none;
}
.nav1b a { 
  color: #03F;
  padding: 2px;
  text-decoration: none;
}
.nav1 a:hover { 
  text-decoration: underline;
  color: #066;
  background-color: #9CF;
}
.nav1b a:hover { 
  text-decoration: underline;
  color: #066;
  background-color: #9CF;
}
Vertical 
<a name=NAV_V></a>
<span>
<ul class=nav1b>
<li><a href=#NAV_V>Page1v</a>
<li><a href=#NAV_V>Page2v</a>
<li><a href=#NAV_V>Page3v</a>
</ul>
</span>
Horizontal
Page1h Page2h Page3h 
<a name=NAV_H><V/a>
<table align=center bgcolor=#006699><tr>
<td class=nav1><a href=#NAV_H>Page1h</a></td>
<td class=nav1><a href=#NAV_H>Page2h</a></td>
<td class=nav1><a href=#NAV_H>Page3h</a></td>
</tr></table>
Collapsible
Click on "Links (+/-)": 
<head>
<style>
/* see shared styles */
.expander a:hover {
  text-decoration: underline;
  color: #066;
  background-color: #9CF;
}
#toggle1 { display: none; }
#toggle2 { display: none; }
#toggle3 { display: none; }
</style>
<script>
function toggle_it(id_name) {
  if(document.getElementById) {
    var t_id =
      document.getElementById(id_name).style;
    if (t_id.display=="block") {
      t_id.display = "none";
    } else {
      t_id.display = "block";
    }
  }
}
</script>
</head>
<body>
...
<a name=T></a>
<ul class="ul_tdc nav1b" style="width: 40%;">
  <li class=nav1>
    <a href=#T onclick="return toggle_it('toggle1');">
    <span class=expander>Links (+/-)</span></a>
  <ul class=ul_tdc id="toggle1">
    <li class=nav1><a href=#T>Link1</a>
    <li class=nav1>
        <a href=#T onclick="return toggle_it('toggle2');">
          <span class=expander>LinkSet2 (+/-)</span></a>
      <ul class=ul_tdc id="toggle2">
        <li class=nav1><a href=#T>Link2.1</a>
        <li class=nav1><a name=T3></a>
            <a href=#T3 onclick="return toggle_it('toggle3');">
             <span class=expander>LinkSet2.2 (+/-)</span></a>
          <ul class=ul_tdc id="toggle3">
            <li class=nav1><a href=#T>Link2.2.1</a>
            <li class=nav1><a href=#T>Link2.2.2</a>
          </ul>
        <li class=nav1><a href=#T>Link2.3</a>
      </ul>
    <li class=nav1><a href=#T>Link3</a>
  </ul>
</ul>
...
</body>

Collabsible menus are set up:

The target of the toggle links can be: the top of the list (as for "Links" and "LinkSet2"), or itself (as for "LinkSet2.2").

Web Page Border

A border can be placed around an entire web page (like this one) as follows:

body.b {
  margin: 4px;
  padding: 8px;
  border: 20px #39E ridge;
}
...
<body class=b>

Page Breaks

To force a page break (only) when printing use: 
   <br clear=all style="page-break-before:always">
Links 1 2