Another CSS layout question.
Moderator: General Moderators
Another CSS layout question.
I'm currently learning to convert sites to CSS layout instead of tables. It's rather intereting and I have found a couple of challenging problems. I read that some things cannot be done only with CSS (true?).
Ok now to the point: I would like to convert this page to CSS. The construction is basically:
- header (100% wide)
- left hand naviagtion approx 130 pixels
- main content: is either the left over from navigation OR 2 same width columns (total:the left over from navigation )
See the site homepage for an idea. The design shows exaclty what I want.
Can someone point me in the right direction? I keep finding things on 1 column main content...
Am I understandable ?
Ok now to the point: I would like to convert this page to CSS. The construction is basically:
- header (100% wide)
- left hand naviagtion approx 130 pixels
- main content: is either the left over from navigation OR 2 same width columns (total:the left over from navigation )
See the site homepage for an idea. The design shows exaclty what I want.
Can someone point me in the right direction? I keep finding things on 1 column main content...
Am I understandable ?
okay well..
just one thing go there
here
get the css
(if you have mozilla with edit css sidebar it s great cuz you cans ee with and without the css.)
if not go here chek the css
here
and everything starting with a # it's a css for a div...
basically in your site you have
4 type of div
1 for header
1 for naviguation
1 for long div (middle)
1 for half sized div
if you didn t understood a thing about what ijust said msn me and i'll help you
just one thing go there
here
get the css
(if you have mozilla with edit css sidebar it s great cuz you cans ee with and without the css.)
if not go here chek the css
here
and everything starting with a # it's a css for a div...
basically in your site you have
4 type of div
1 for header
1 for naviguation
1 for long div (middle)
1 for half sized div
if you didn t understood a thing about what ijust said msn me and i'll help you
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
It might be easier to have a simple explanation rather than diving right into the code. First of all, I don't see why you should use relative or absolute positioning on a design like that, since it can be done just as easily with floats:
1) header div
2) left nav div, set to float: left;
3) content div, set to float: left;
assign margins and padding (careful about box models there) as you see fit
4) put subdivs inside the content div, arranging them as you like, exactly as you've done already with the upper hierarchy.
Honestly, this entire thing can be rather easily assembled without ever using a single absolute positioning, and you'd be well advised to do it that way.
1) header div
2) left nav div, set to float: left;
3) content div, set to float: left;
assign margins and padding (careful about box models there) as you see fit
4) put subdivs inside the content div, arranging them as you like, exactly as you've done already with the upper hierarchy.
Honestly, this entire thing can be rather easily assembled without ever using a single absolute positioning, and you'd be well advised to do it that way.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
dr,
It's already roughed out. link --> http://www.thexvector.us/drevil.php
I tried to explain everything for you in the comment tags. It's based on xHTML 1.1 and CSS 2. I'm not sure if it validates, but it should and its xml parsed in PhP. Ready to go, just fill it up.
I showed you how to use tables for data also. You can position them anyway you decide using the relative positioning.
Just take the CSS and link it externally with the following:
This will ensure old and text browsers do not see the CSS.
hmmm, what else, I'm sure I forgot to post some info here, but if it comes to mind, I will post it later.
Good Luck,
It's already roughed out. link --> http://www.thexvector.us/drevil.php
I tried to explain everything for you in the comment tags. It's based on xHTML 1.1 and CSS 2. I'm not sure if it validates, but it should and its xml parsed in PhP. Ready to go, just fill it up.
I showed you how to use tables for data also. You can position them anyway you decide using the relative positioning.
Just take the CSS and link it externally with the following:
Code: Select all
<style type="text/css" media="screen">
@import url( css/style.css ) /* Your css location */
}
</style>hmmm, what else, I'm sure I forgot to post some info here, but if it comes to mind, I will post it later.
Good Luck,
Code: Select all
<?php echo("<?xml version="1.0" encoding="iso-8859-1"?>\n"); ?><!-- PhP ready xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"><!-- Change the language for your region of the world -->
<head>
<title>Le CIU de Genève</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your Words" />
<meta name="keywords" content="Fabrice Grin, Niall Macpherson, CIU, Genève, Club International Universitaire, soirées, étudiants, photos, Villa Rigot">
<meta name="robots" content="noindex, nofollow" /><!-- Website first line of defense against bots, you can also use a text file in the root of your domain called 'robots.text' This sets permisions as to web crawlers and unscrupulous bot programs For more info, see this link http://www.w3.org/Search/9605-Indexing-Workshop/Papers/Frumkin@Excite.html -->
<style type="text/css" media="screen">
html, body { /* Generic fonts are a good thing for interoperability */
font-family: arial, helvetica, sans-serif;
}
body {
color: #003;
background: #8ac5ff;
margin: 0px;
padding: 0px;
font-size: 10px;/* Use this as a base font size, then make all other font sizes a % value, such as, 120%. Makes the font issue more stable than any form of em values. */
}
h1 {
display: none;
}
h2 {
margin: 0px;
padding: 0px;
color: #003;
background: transparent;
font-size: 110%;
}
table {
}
a {
text-decoration: none;/* Global a link text decoration */
}
a:link {
color: #00f;
background: transparent;
}
a:visited {
color: #00f;
background: transparent;
}
a:hover {
color: #fff;
background: transparent;
}
#top { /* This for a global #top reference. This can be used for top links. */
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 5px;
margin: 0px;
padding: 0px;
z-index: 1;
}
#globalheaderwrap {
position: relative;
width: auto;
height: auto;
margin: 5px 5px 0px 5px;
padding: 0px;
border: 1px solid #fff;
z-index: 1;
}
/* Header */
#headerwrap {
position: relative;
width: 100%;
height: 93px;
color: #000;
background: #5caeff url( http://www.ciu.ch/img/sm_ciu_blanc.gif ) no-repeat 30px 0px; /* These background colors are not so good, try using values within the + or - 11 range, like #54a */
z-index: 2;
}
#header {
position: relative;
width: 100%;
height: 100%;
color: #000;
background: transparent url( http://www.ciu.ch/img/logotxt_top.gif ) no-repeat 75% 50%; /* This image is a bit large and should be reduced in size for smaller resolutions. */
z-index: 3;
}
#header span {
position: relative;
margin: auto auto auto 125px;
}
#globalbodywrap { /* Global Body Container */
position: absolute;
top: 105px;
left: 0px;
right: 5px;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
z-index: 1;
}
#menuwraper {
position: absolute;
top: 0px;
left: 5px;
width: 120px;
height: auto;
margin: 0px;
padding: 0px;
color: #000;
background: #5caeff;
border: 1px solid #fff;
z-index: 2;
}
#menu {
position: relative;
width: auto;
height: auto;
margin: 0px;
padding: 5px 5px 5px 5px;
color: #000;
background: #5caeff;
font-size: 120%;
}
#menu dl {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
#menu dl dt {
width: auto;
height: auto;
margin: 0px 0px 0px 0px;
padding: 2px 0px 2px 5px;
}
.menuon {
color: #333;
background: #a3d1ff;
font-weight: bold;
}
.menuon a:link {
color: #333;
background: #a3d1ff;
font-weight: bold;
}
.menuon a:hover {
color: #fff;
background: #a3d1ff;
font-weight: bold;
}
#contentwraper {
position: relative;
width: auto;
height: auto;
margin: 0px 5px 0px 132px;
padding: 0px;
z-index: 2;
}
#row1wraper {
position: relative;
width: auto;
height: 150px;
margin: 0px 0px 0px 0px;
padding: 0px;
z-index: 3;
}
#row1wrapera {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 4;
}
#row1wrapera div {
position: relative;
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 5px;
color: #003;
background: transparent;
font-size: 110%;
}
#row1wrapera div table {
color: #003;
background: transparent;
font-size: 110%;
}
#row1wraperb {
position: absolute;
top: 0px;
right: 0px;
width: 49%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff url( http://www.ciu.ch/pictures/albums/pics03-04/escalade03/thumb_escalade73.jpg ) no-repeat 98% 90%;
border: 1px solid #fff;
z-index: 4;
}
#row2wraper {
position: relative;
width: auto;
height: 100px;
margin: 5px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 3;
}
#row3wraper {
position: relative;
width: auto;
height: 100px;
margin: 5px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 3;
}
</style>
</head>
<body>
<div id="top"> </div>
<!-- Header -->
<div id="globalheaderwrap"><!-- 100% width and border workaround for all browsers -->
<div id="headerwrap">
<div id="header"><span>:: <a href="/" title="Home">Home</a> :: <-- Better to use this instead of images for accessibility reasons.</span><br><br><h1>Club International Universitaire</h1><!-- H1 for Text Browsers and Print --></div>
</div>
</div>
<!-- Body Global -->
<div id="globalbodywrap">
<div id="menuwraper"><!-- Always use a wraper for IE. IE always will mess up with padding and borders, this takes care of that. -->
<div id="menu">
<dl><!-- Better to use DL for making a cascade menu, UL's in IE are a bit unreliable. -->
<dt class="menuon"><a href="main.php" title="Home">Home</a></dt>
<dt><a href="programme.php" title="Programme">Programme</a></dt>
<dt><a href="news.php" title="News">News</a></dt>
<dt><a href="/pictures/" title="Photos">Photos</a></dt>
<dt><a href="/forum/" title="Forum">Forum</a></dt>
<dt><a href="mailing.php" title="Mailing List">Mailing List</a></dt>
<dt><a href="acces.php" title="Accès">Accès</a></dt>
<dt><a href="staff.php" title="Staff">Staff</a></dt>
<dt><a href="reglement.php" title="Réglement">Réglement</a></dt>
<dt><a href="historique.php" title="Historique">Historique</a></dt>
<dt><a href="store.php" title="CIU Shop">CIU Shop</a></dt>
</dl>
</div>
</div>
<div id="contentwraper">
<!-- Row 1 -->
<div id="row1wraper">
<div id="row1wrapera">
<div>
<h2>Les prochaines soirées au CIU:</h2>
<table border="0" cellpadding="0" cellspacing="20" summary="Programme Schedule"><!-- This is a good time to use a table, for data structure. Not for layout structure. -->
<!-- Always use a summary for any data table -->
<!-- Table Row 1 -->
<tr>
<th title="Date">12.03.2004</th><!-- th used for text reader navigation -->
<td title="Place"><a href="programme.php?showid=32" title="Rentrée CIU">Rentrée CIU</a></td>
</tr>
<!-- Table Row 2 -->
<tr>
<th></th>
<td></td>
</tr>
</table>
</div>
</div>
<div id="row1wraperb"> </div>
</div>
<!-- Row 2 -->
<div id="row2wraper">
</div>
<!-- Row 3 -->
<div id="row3wraper">
</div>
</div>
</div>
<!-- End Body Global -->
</body>
</html>- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
OK,
I remembered what I was going to say.
You can also put background images in menu lists; which I am experimenting with right now.
And dynamically change them with different pages using, you guessed it, PhP! Check out the post I wrote in Code Snippets' (Spelling on that? I'm too lazy to go look for a forums exact name).
Modulate - Escalate!
I remembered what I was going to say.
You can also put background images in menu lists; which I am experimenting with right now.
And dynamically change them with different pages using, you guessed it, PhP! Check out the post I wrote in Code Snippets' (Spelling on that? I'm too lazy to go look for a forums exact name).
Modulate - Escalate!
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
Thanks for the compliment.
Take your time and look it over, its very robust and most likely will work across all the major up-to-date browsers.
I have two thick books on order from amazon.com about PhP and MySQL. Any help for PhP will probably be something like; "what did I do wrong here?" type of question, and thanks again for the offer.
Yes, by all means, feed back is good; anything that was over looked or can be improved, post.
I will look into the menu thing you asked about later today. I'm sure it can be resolved. I was having some trouble with that menu for some reason; it had to do with overflow from the dts. In most cases, you should specify a height and width, for some reason or another I wasn't able to do that. But I will definitely look into it for you.
Take your time and look it over, its very robust and most likely will work across all the major up-to-date browsers.
I have two thick books on order from amazon.com about PhP and MySQL. Any help for PhP will probably be something like; "what did I do wrong here?" type of question, and thanks again for the offer.
Yes, by all means, feed back is good; anything that was over looked or can be improved, post.
I will look into the menu thing you asked about later today. I'm sure it can be resolved. I was having some trouble with that menu for some reason; it had to do with overflow from the dts. In most cases, you should specify a height and width, for some reason or another I wasn't able to do that. But I will definitely look into it for you.
I looked into this issue a bit. It has something to do with the use of lists I think. The rollover background only occupies the surface of text even when specifying height/width.no_memories wrote:I was having some trouble with that menu for some reason; it had to do with overflow from the dts. In most cases, you should specify a height and width, for some reason or another I wasn't able to do that. But I will definitely look into it for you.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
got it 
Refresh it --> http://www.thexvector.us/drevil.php
I caught one of the meta tags that wasn't closed properly by validating.
It now validates in xHTML 1.1 and CSS 2, I will put links so you can test them on auto pilot.
Refresh it --> http://www.thexvector.us/drevil.php
I caught one of the meta tags that wasn't closed properly by validating.
It now validates in xHTML 1.1 and CSS 2, I will put links so you can test them on auto pilot.
Code: Select all
<?php echo("<?xml version="1.0" encoding="iso-8859-1"?>\n"); ?><!-- PhP ready xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"><!-- Change the language for your region of the world -->
<head>
<title>Le CIU de Genève</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your Words" />
<meta name="keywords" content="Fabrice Grin, Niall Macpherson, CIU, Genève, Club International Universitaire, soirées, étudiants, photos, Villa Rigot" /><!-- This End tag was omited -->
<meta name="robots" content="noindex, nofollow" /><!-- Website first line of defense against bots, you can also use a text file in the root of your domain called 'robots.text' This sets permisions as to web crawlers and unscrupulous bot programs For more info, see this link http://www.w3.org/Search/9605-Indexing-Workshop/Papers/Frumkin@Excite.html -->
<style type="text/css" media="screen">
html, body { /* Generic fonts are a good thing for interoperability */
font-family: arial, helvetica, sans-serif;
}
body {
color: #003;
background: #8ac5ff;
margin: 0px;
padding: 0px;
font-size: 10px;/* Use this as a base font size, then make all other font sizes a % value, such as, 120%. Makes the font issue more stable than any form of em values. */
}
h1 {
display: none;
}
h2 {
margin: 0px;
padding: 0px;
color: #003;
background: transparent;
font-size: 110%;
}
table {
}
a {
text-decoration: none;/* Global a link text decoration */
}
a:link {
color: #00f;
background: transparent;
}
a:visited {
color: #00f;
background: transparent;
}
a:hover {
color: #fff;
background: transparent;
}
#top { /* This for a global #top reference. This can be used for top links. */
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 5px;
margin: 0px;
padding: 0px;
z-index: 1;
}
#globalheaderwrap {
position: relative;
width: auto;
height: auto;
margin: 5px 5px 0px 5px;
padding: 0px;
border: 1px solid #fff;
z-index: 1;
}
/* Header */
#headerwrap {
position: relative;
width: 100%;
height: 93px;
color: #000;
background: #5caeff url( http://www.ciu.ch/img/sm_ciu_blanc.gif ) no-repeat 30px 0px; /* These background colors are not so good, try using values within the + or - 11 range, like #54a */
z-index: 2;
}
#header {
position: relative;
width: 100%;
height: 100%;
color: #000;
background: transparent url( http://www.ciu.ch/img/logotxt_top.gif ) no-repeat 75% 50%; /* This image is a bit large and should be reduced in size for smaller resolutions. */
z-index: 3;
}
#header span {
position: relative;
margin: auto auto auto 125px;
}
#globalbodywrap { /* Global Body Container */
position: absolute;
top: 105px;
left: 0px;
right: 5px;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
z-index: 1;
}
#globalmenuwraper { /* Global Left Menu */
position: absolute;
top: 0px;
left: 5px;
width: 120px;
height: auto;
margin: 0px;
padding: 0px;
z-index: 2;
}
/* Upper Left Menu */
#menuwraper {
position: relative;
width: 100%;
height: auto;
margin: 5px 0px 0px 0px;
height: auto;
margin: 0px;
padding: 0px;
color: #000;
background: #5caeff;
border: 1px solid #fff;
z-index: 3;
}
#menu {
position: relative;
width: auto;
height: auto;
margin: 0px;
padding: 5px 5px 5px 5px;
color: #000;
background: #5caeff;
font-size: 120%;
z-index: 4;
}
#menu h3 {
width: 100%;
height: 15px;
margin: 0px;
padding: 0px 0px 0px 5px;
font-size: 110%;
}
#menu h3 a.r {
color: #333;
background: inherit;
}
#menu h3 a.r:link {
color: #333;
background: inherit;
}
#menu h3 a.r:hover {
color: #fff;
background: #a3d1ff;
}
#menu dl {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
#menu dl dt {
width: auto;
height: auto;
margin: 0px 0px 0px 0px;
padding: 2px 0px 2px 10px;
}
#menu a:hover {
color: #333;
background: #a3d1ff;
}
/* Lower Menu */
#menu2wraper {
position: relative;
width: 100%;
height: auto;
margin: 5px 0px 0px 0px;
padding: 0px;
color: #000;
background: #5caeff;
border: 1px solid #fff;
z-index: 3;
}
#menu2 {
position: relative;
width: auto;
height: auto;
margin: 0px;
padding: 5px 5px 5px 5px;
color: #000;
background: #5caeff;
font-size: 120%;
z-index: 4;
}
#menu2 dl {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
#menu2 dl dt {
width: auto;
height: auto;
margin: 0px 0px 0px 0px;
padding: 2px 0px 2px 10px;
}
#menu2 dl dt.white {
color: #fff;
background: transparent;
}
#contentwraper {
position: relative;
width: auto;
height: auto;
margin: 0px 5px 0px 132px;
padding: 0px;
z-index: 2;
}
#row1wraper {
position: relative;
width: auto;
height: 150px;
margin: 0px 0px 0px 0px;
padding: 0px;
z-index: 3;
}
#row1wrapera {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 4;
}
#row1wrapera div {
position: relative;
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 5px;
color: #003;
background: transparent;
font-size: 110%;
}
#row1wrapera div table {
color: #003;
background: transparent;
font-size: 110%;
}
#row1wrapera a.s {
color: #f00;
background: transparent;
font-weight: bold;
}
#row1wrapera a.s:link {
color: #f00;
background: transparent;
font-weight: bold;
}
#row1wrapera a.s:hover {
color: #600;
background: transparent;
font-weight: bold;
}
#row1wraperb {
position: absolute;
top: 0px;
right: 0px;
width: 49%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff url( http://www.ciu.ch/pictures/albums/pics03-04/escalade03/thumb_escalade73.jpg ) no-repeat 98% 90%;
border: 1px solid #fff;
z-index: 4;
}
#row2wraper {
position: relative;
width: auto;
height: 100px;
margin: 5px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 3;
}
#row3wraper {
position: relative;
width: auto;
height: 100px;
margin: 5px 0px 0px 0px;
padding: 0px;
color: #fff;
background: #a3d1ff;
border: 1px solid #fff;
z-index: 3;
}
</style>
</head>
<body>
<div id="top"> </div>
<!-- Header -->
<div id="globalheaderwrap"><!-- 100% width and border workaround for all browsers -->
<div id="headerwrap">
<div id="header"><h1>Club International Universitaire</h1><!-- H1 for Text Browsers and Print --></div>
</div>
</div>
<!-- Body Global -->
<div id="globalbodywrap">
<!-- Global Menu -->
<div id="globalmenuwraper">
<!-- Menu 1 -->
<div id="menuwraper"><!-- Always use a wraper for IE. IE always will mess up with padding and borders, this takes care of that. -->
<div id="menu">
<h3><a href="main.php" title="Home" class="r">Home</a></h3>
<dl><!-- Better to use DL for making a cascade menu, UL's in IE are a bit unreliable. -->
<dt><a href="programme.php" title="Programme">Programme</a></dt>
<dt><a href="news.php" title="News">News</a></dt>
<dt><a href="/pictures/" title="Photos">Photos</a></dt>
<dt><a href="/forum/" title="Forum">Forum</a></dt>
<dt><a href="mailing.php" title="Mailing List">Mailing List</a></dt>
<dt><a href="acces.php" title="Accès">Accès</a></dt>
<dt><a href="staff.php" title="Staff">Staff</a></dt>
<dt><a href="reglement.php" title="Réglement">Réglement</a></dt>
<dt><a href="historique.php" title="Historique">Historique</a></dt>
<dt><a href="store.php" title="CIU Shop">CIU Shop</a></dt>
</dl>
</div>
</div>
<!-- Menu 2 -->
<div id="menu2wraper">
<div id="menu2">
<dl>
<dt class="white">Proverbes à 2 Balles</dt>
<dt> Ceux qui boivent pour oublier sont priés de payer d'avance, merci.</dt>
</dl>
</div>
</div>
</div>
<!-- End Global Menu -->
<div id="contentwraper">
<!-- Row 1 -->
<div id="row1wraper">
<div id="row1wrapera">
<div>
<h2>Les prochaines soirées au CIU:</h2>
<table border="0" cellpadding="0" cellspacing="20" summary="Programme Schedule"><!-- This is a good time to use a table, for data structure. Not for layout structure. -->
<!-- Always use a summary for any data table -->
<!-- Table Row 1 -->
<tr>
<th title="Date">12.03.2004</th><!-- th used for text reader navigation -->
<td title="Place"><a href="programme.php?showid=32" title="Rentrée CIU" class="s">Rentrée CIU</a></td>
</tr>
<!-- Table Row 2 -->
<tr>
<th></th>
<td></td>
</tr>
</table>
</div>
</div>
<div id="row1wraperb"> </div>
</div>
<!-- Row 2 -->
<div id="row2wraper">
</div>
<!-- Row 3 -->
<div id="row3wraper">
<span> \\ <a href="http://validator.w3.org/check/referer" title="Valid xHTML 1.1">Valid xHTML 1.1</a> \\ <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS 2">Valid CSS 2</a> \\</span>
</div>
</div>
</div>
<!-- End Body Global -->
</body>
</html>