Log In · Register

 
Dynamic divs
HeartOfPandora
post Sep 7 2009, 03:47 PM
Post #1


i like boobies, yes I do. I like boobies - how 'bout you?
*****

Group: Member
Posts: 620
Joined: Jun 2008
Member No: 662,457
Recently came upon a neat effect that I'm trying to duplicate, and failing horrifically at.

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>


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.)
 
 
 Start new topic
Replies
manny-the-dino
post Sep 8 2009, 02:43 PM
Post #2


Senior Member
*******

Group: Administrator
Posts: 8,629
Joined: Jan 2007
Member No: 498,468
Topic Closed and Moved
 

Posts in this topic
HeartOfPandora   Dynamic divs   Sep 7 2009, 03:47 PM
allvanishing   It's becuase your placing the #bio, #tag, ect....   Sep 7 2009, 07:48 PM
HeartOfPandora   Yaaaay! Works fine now, thanks much! /hu...   Sep 7 2009, 08:39 PM
manny-the-dino   Topic Closed and Moved   Sep 8 2009, 02:43 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic