Open Book Project

Validation Links

To add both HTML and CSS validation links to your pages, add the following footer element to the bottom of your page's body element:

<footer>
<hr>
<a id="vLink1">
<strong> HTML </strong> Valid! </a> |
<a id="vLink2">
<strong> CSS </strong> Valid! </a>
</footer>

Then add the following script element to your page's head:

<script>
function init() {
  var loc = window.location.href;
  var HTMLvalidLinkStr = 'http://validator.w3.org/check?uri=' + loc;
  var CSSvalidLinkStr = 'http://jigsaw.w3.org/css-validator/validator?uri=' +
                        loc + '?profile=css3';
  document.getElementById("vLink1").setAttribute("href", HTMLvalidLinkStr);
  document.getElementById("vLink2").setAttribute("href", CSSvalidLinkStr);
}
window.onload = init;
</script>

Add this style to center the links:

footer {
    text-align: center;
}

Placing a vertical bar (|) between the links provides visual seperation and makes a nice minialist approach to including the links.

Here is a minimal page that has the links, footer style, and vertical bar included.

A more elaborate approach can be achived with the following styles, which combine to make CSS Buttons:

footer a {
    display: inline;
    margin-right: 10px;
    width: 50px;
    padding: 1px;
    font-size: 9px;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    text-align: center;
    color: #912;
    background-color: #DDD;
    border: 1px solid black;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}
footer a strong {
    font-weight: bold;
    color: #FFF;
    background-color: #912;
    padding-left: 2px;
    margin-right: 5px;
}
footer a:hover {
    color: #FFF;
    background-color: #912;
}
footer a:hover strong {
    color: #912;
    background-color: #DDD;
}