Live view / code <- example that inspired me
I love how, when you click a link to the side, the content area changes. I tried to set up the same effect (using divs instead of tables, because I hate tables), but the content will only shift with one link and then they won't work. My CSS validates cleanly, so I know there's no technical errors, as does the XHTML (when you take out all the Blogger codes).
Live view <- my template
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$> | v: pages whispering on my fingertips</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<$BlogMetaData$>
<style type="text/css">
* {
margin: 0;
padding: 0;
cursor: default;
text-decoration: none;
}
body {
background-color: #b1ac8a;
}
h1 {
font-family: georgia;
font-size: 18px;
color: #694b41;
text-indent: 20px;
letter-spacing: 3px;
}
h1 a:link, h1 a:visited {
color: #694b41;
}
h1 a:hover, h1 a:active {
color: #1f1c25;
}
h2 {
font-family: arial;
font-size: 8px;
text-transform: uppercase;
font-weight: bold;
text-indent: 35px;
color: #aeacb2;
letter-spacing: 1px;
}
h2 a:link, h2 a:visited {
color: #aeacb2;
border-bottom: 1px dotted #aeacb2;
}
h2 a:hover, h2 a:active {
border-bottom: 1px solid #aeacb2;
}
b {
font-family: georgia;
color: #3c3644;
}
i {
color: #3c3644;
font-family: georgia;
}
u {
color: #3c3644;
border-bottom: 1px dashed #3c3644;
font-family: georgia;
}
big {
font-family: georgia;
color: #3c3644;
font-family: georgia;
line-height: 100%;
}
small, sup, sub {
font-family: georgia;
color: #aeacb2;
}
#wrap {
width: 550px;
height: auto;
margin: 0 auto;
background-color: #d4dab8;
}
#header {
width: 550px;
height: 375px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241aa.png') top left no-repeat;
}
.name {
float: left;
width: 350px;
height: 30px;
overflow: hidden;
margin: 315px 0 0 25px;
padding: 5px 5px 5px 20px;
text-align: left;
font-family: georgia;
font-weight: bold;
font-size: 18px;
color: #1f1c25;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ab.png') top left repeat-y;
display: block;
text-transform: lowercase;
line-height: 30px;
letter-spacing: 3px;
}
#nav {
float: left;
width: 125px;
height: 275px;
margin: 75px 0 0 0;
text-align: right;
line-height: 21px;
text-transform: lowercase;
}
#nav span.nav {
font-family: georgia;
font-size: 10px;
color: #694b41;
letter-spacing: 2px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ac.png') top right repeat-y;
display: block;
padding: 0 15px 0 0;
margin: 0 0 5px 0;
}
#nav span.nav:hover, #nav span.nav:active {
color: #1f1c25;
}
#main {
width: 470px;
height: auto;
padding: 20px 40px 20px 40px;
font-family: Tahoma;
font-size: 10px;
color: #6f6c74;
text-align: justify;
line-height: 180%;
}
#main p {
margin: 0 0 10px 0;
}
#main p a:link, #main p a:visited {
color: #694b41;
text-decoration: none;
border-bottom: 1px dotted #b1ac8a;
font-family: georgia;
font-weight: bold;
}
#main p a:hover, #main p a:active {
border-bottom: 1px solid #b1ac8a;
}
#main p.cmnt {
font-weight: bold;
text-align: right;
letter-spacing: 1px;
}
#main li {
margin: 0 0 0 10px;
}
#main ul {
margin: 0 0 0 10px;
}
#main ul.rules {
margin: 0;
list-style: none;
}
#main ul.rules li {
margin: 0 0 10px 0;
}
#footer {
width: 470px;
height: auto;
padding: 0 40px 20px 40px;
font-family: tahoma;
font-size: 10px;
color: #b1ac8a;
text-align: center;
letter-spacing: 1px;
}
#footer a:link, #footer a:visited {
font-family: tahoma;
font-size: 10px;
color: #b1ac8a;
border-bottom: 1px dotted #b1ac8a;
}
#footer a:hover, #footer a:active {
color: #b1ac8a;
border-bottom: 1px solid #b1ac8a;
}
hr.break {
height: 1px;
width: 80%;
margin: 15px auto 15px auto;
color: #b1ac8a;
background-color: #b1ac8a;
border: none;
}
blockquote {
width: 90%;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ad.png') center repeat;
margin: 5px auto 5px auto;
}
span.bqh {
display: block;
text-transform: lowercase;
font-family: georgia;
font-size: 9px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ae.png') center repeat;
padding: 0 0 0 25px;
letter-spacing: 3px;
}
blockquote p {
text-align: justify;
padding: 5px 10px 5px 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="name">
<a href="<$BlogURL$>"><$BlogTitle$></a>
</div>
<div id="nav">
<span onClick="document.getElementById('main').innerHTML=document.getElementById('bio').innerHTML" title="Biography" class="nav">Front Desk</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('tag').innerHTML" title="Tagboard" class="nav">Whispers</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('past').innerHTML" title="Archive" class="nav">History Tag</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('exits').innerHTML" title="Exits" class="nav">Back Door</span>
</div>
</div>
<div id="main">
<div id="entries">
<Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h1>
<h2><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader> @ <$BlogItemDateTime$></h2>
<$blogitembody$>
<hr class="break" />
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<p class="cmnt"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<p class="cmnt"><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>></p>
</BlogItemBacklinksEnabled>
</MainOrArchivePage>
</Blogger>
</div>
<div id="bio" style="display: none;">
profile etc.
</div>
<div id="tag" style="display: none;">
tagboard codes here
</div>
<div id="past" style="display: none;">
archives
</div>
<div id="exits" style="display: none;">
links or whatever here
</div>
</div>
<div id="footer">
<p>© year name etc | template by <a href="http://heartofpandora.com">Aerith</a> | valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>, <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p> </div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$> | v: pages whispering on my fingertips</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<$BlogMetaData$>
<style type="text/css">
* {
margin: 0;
padding: 0;
cursor: default;
text-decoration: none;
}
body {
background-color: #b1ac8a;
}
h1 {
font-family: georgia;
font-size: 18px;
color: #694b41;
text-indent: 20px;
letter-spacing: 3px;
}
h1 a:link, h1 a:visited {
color: #694b41;
}
h1 a:hover, h1 a:active {
color: #1f1c25;
}
h2 {
font-family: arial;
font-size: 8px;
text-transform: uppercase;
font-weight: bold;
text-indent: 35px;
color: #aeacb2;
letter-spacing: 1px;
}
h2 a:link, h2 a:visited {
color: #aeacb2;
border-bottom: 1px dotted #aeacb2;
}
h2 a:hover, h2 a:active {
border-bottom: 1px solid #aeacb2;
}
b {
font-family: georgia;
color: #3c3644;
}
i {
color: #3c3644;
font-family: georgia;
}
u {
color: #3c3644;
border-bottom: 1px dashed #3c3644;
font-family: georgia;
}
big {
font-family: georgia;
color: #3c3644;
font-family: georgia;
line-height: 100%;
}
small, sup, sub {
font-family: georgia;
color: #aeacb2;
}
#wrap {
width: 550px;
height: auto;
margin: 0 auto;
background-color: #d4dab8;
}
#header {
width: 550px;
height: 375px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241aa.png') top left no-repeat;
}
.name {
float: left;
width: 350px;
height: 30px;
overflow: hidden;
margin: 315px 0 0 25px;
padding: 5px 5px 5px 20px;
text-align: left;
font-family: georgia;
font-weight: bold;
font-size: 18px;
color: #1f1c25;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ab.png') top left repeat-y;
display: block;
text-transform: lowercase;
line-height: 30px;
letter-spacing: 3px;
}
#nav {
float: left;
width: 125px;
height: 275px;
margin: 75px 0 0 0;
text-align: right;
line-height: 21px;
text-transform: lowercase;
}
#nav span.nav {
font-family: georgia;
font-size: 10px;
color: #694b41;
letter-spacing: 2px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ac.png') top right repeat-y;
display: block;
padding: 0 15px 0 0;
margin: 0 0 5px 0;
}
#nav span.nav:hover, #nav span.nav:active {
color: #1f1c25;
}
#main {
width: 470px;
height: auto;
padding: 20px 40px 20px 40px;
font-family: Tahoma;
font-size: 10px;
color: #6f6c74;
text-align: justify;
line-height: 180%;
}
#main p {
margin: 0 0 10px 0;
}
#main p a:link, #main p a:visited {
color: #694b41;
text-decoration: none;
border-bottom: 1px dotted #b1ac8a;
font-family: georgia;
font-weight: bold;
}
#main p a:hover, #main p a:active {
border-bottom: 1px solid #b1ac8a;
}
#main p.cmnt {
font-weight: bold;
text-align: right;
letter-spacing: 1px;
}
#main li {
margin: 0 0 0 10px;
}
#main ul {
margin: 0 0 0 10px;
}
#main ul.rules {
margin: 0;
list-style: none;
}
#main ul.rules li {
margin: 0 0 10px 0;
}
#footer {
width: 470px;
height: auto;
padding: 0 40px 20px 40px;
font-family: tahoma;
font-size: 10px;
color: #b1ac8a;
text-align: center;
letter-spacing: 1px;
}
#footer a:link, #footer a:visited {
font-family: tahoma;
font-size: 10px;
color: #b1ac8a;
border-bottom: 1px dotted #b1ac8a;
}
#footer a:hover, #footer a:active {
color: #b1ac8a;
border-bottom: 1px solid #b1ac8a;
}
hr.break {
height: 1px;
width: 80%;
margin: 15px auto 15px auto;
color: #b1ac8a;
background-color: #b1ac8a;
border: none;
}
blockquote {
width: 90%;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ad.png') center repeat;
margin: 5px auto 5px auto;
}
span.bqh {
display: block;
text-transform: lowercase;
font-family: georgia;
font-size: 9px;
background: transparent url('http://cbimg6.com/layouts/09/03/34241ae.png') center repeat;
padding: 0 0 0 25px;
letter-spacing: 3px;
}
blockquote p {
text-align: justify;
padding: 5px 10px 5px 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="name">
<a href="<$BlogURL$>"><$BlogTitle$></a>
</div>
<div id="nav">
<span onClick="document.getElementById('main').innerHTML=document.getElementById('bio').innerHTML" title="Biography" class="nav">Front Desk</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('tag').innerHTML" title="Tagboard" class="nav">Whispers</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('past').innerHTML" title="Archive" class="nav">History Tag</span>
<span onClick="document.getElementById('main').innerHTML=document.getElementById('exits').innerHTML" title="Exits" class="nav">Back Door</span>
</div>
</div>
<div id="main">
<div id="entries">
<Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h1>
<h2><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader> @ <$BlogItemDateTime$></h2>
<$blogitembody$>
<hr class="break" />
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<p class="cmnt"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<p class="cmnt"><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>></p>
</BlogItemBacklinksEnabled>
</MainOrArchivePage>
</Blogger>
</div>
<div id="bio" style="display: none;">
profile etc.
</div>
<div id="tag" style="display: none;">
tagboard codes here
</div>
<div id="past" style="display: none;">
archives
</div>
<div id="exits" style="display: none;">
links or whatever here
</div>
</div>
<div id="footer">
<p>© year name etc | template by <a href="http://heartofpandora.com">Aerith</a> | valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>, <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p> </div>
</div>
</body>
</html>
Any ideas on what I'm doing wrong or why it only shows one change? (PS: I might be testing it on Blogger, but I'm going to use the effect for a fanlisting I'm hosting on my own server.)