partthethird
Technical User
I have what is essentially a 2 column layout, with a large content area on the right, and some links on the left. The CSS and HTML are shown below.
Basically, when a link is clicked, I want to be able to make the relevant page show in the content section on the right. This is probably really easy, but I haven't been able to figure it out...
-----------------------------------------------------
THE HTML -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="testcss.css" type="text/css" rel="stylesheet" />
<style type="text/css">
<!--
.style1 {color: #AFAFBD}
-->
</style>
</head>
<body>
<div id="header">
<div id="title">thethird's place</div>
</div>
<div id="nav">
<a href="<a href="<a href="<a href="about_me.htm">About the author</a>
</div>
<div id="content">
<div id="sidecontent">
<h1>Obligatory links</h1>
You might like these sites I frequent.
<p>
<a href=" deviantart account</a>
</p>
<p>
<a href=" regular forums</a>
</p>
<p>
<a href="</p>
</div>
<div id="maincontent">
<h1>Site live in update shocker </h1>
<p> If you're reading this, it means that my website is finally available for all the web (or at least 3 people) to see! </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent diam magna, ultrices ac, accumsan eget, elementum id, sapien. Proin ligula mi, molestie sit amet, dapibus id, tincidunt a, odio. Mauris sit amet augue vel eros molestie adipiscing. Ut varius luctus velit. Cras sit amet eros a purus posuere cursus. Phasellus vel urna. Sed ac nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Proin vitae ligula sit amet ligula porta mollis. Morbi dui augue, luctus sit amet, dictum ut, euismod eu, risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean in nibh at erat elementum auctor. Nunc gravida dignissim erat. Curabitur aliquet turpis sit amet justo. Ut ac risus. Sed fermentum massa nec tortor.
</p>
</div>
</div>
<div id="footer">
<div id="copyrightdesign">
Copyright John Antony Barnes (partthethird)
</div>
<div id="footercontact">
<a href="mailto:johnbarnes666@hotmail.com">Contact me</a></div>
</div>
</body>
</html>
-------------------------------------------------
-The CSS
* {
padding:0;
margin:0;
}
body {
color: #000000;
background-color:#99cccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.83em;
margin:20px auto;
width:760px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0;}
h1 {font-size:1.67em;}
h2 {font-size:1.39em;}
h3 {font-size:1.2em;}
h4 {font-size:1em;}
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
a {
color: #FF0000;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #33cc99;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#header {
background-color: #333333;
width:1044px;
clear:both;
}
#title {
color:#CC0000;
background-color:#99cccc;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}
#nav {
padding:2px 0px 2px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}
#nav a {
color: #000000;
background-color:#99cccc;
font-weight:bold;
text-decoration:none;
padding:4px 20px 4px 20px;
}
#nav a:hover {
background-color:#DD0000;
text-decoration:none;
}
#content {
border-top:1px solid #CC0000;
width:760px;
clear:both;
}
#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:left;
}
#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-left:1px solid #CC0000;
float:right;
}
#footer {
color: #FFFFFF;
background-color:#333333;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}
#footer a {
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
font-weight: bold;
}
#footer a:hover {
text-decoration: underline;
}
#copyrightdesign {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}
#footercontact {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}
Basically, when a link is clicked, I want to be able to make the relevant page show in the content section on the right. This is probably really easy, but I haven't been able to figure it out...
-----------------------------------------------------
THE HTML -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="testcss.css" type="text/css" rel="stylesheet" />
<style type="text/css">
<!--
.style1 {color: #AFAFBD}
-->
</style>
</head>
<body>
<div id="header">
<div id="title">thethird's place</div>
</div>
<div id="nav">
<a href="<a href="<a href="<a href="about_me.htm">About the author</a>
</div>
<div id="content">
<div id="sidecontent">
<h1>Obligatory links</h1>
You might like these sites I frequent.
<p>
<a href=" deviantart account</a>
</p>
<p>
<a href=" regular forums</a>
</p>
<p>
<a href="</p>
</div>
<div id="maincontent">
<h1>Site live in update shocker </h1>
<p> If you're reading this, it means that my website is finally available for all the web (or at least 3 people) to see! </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent diam magna, ultrices ac, accumsan eget, elementum id, sapien. Proin ligula mi, molestie sit amet, dapibus id, tincidunt a, odio. Mauris sit amet augue vel eros molestie adipiscing. Ut varius luctus velit. Cras sit amet eros a purus posuere cursus. Phasellus vel urna. Sed ac nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Proin vitae ligula sit amet ligula porta mollis. Morbi dui augue, luctus sit amet, dictum ut, euismod eu, risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean in nibh at erat elementum auctor. Nunc gravida dignissim erat. Curabitur aliquet turpis sit amet justo. Ut ac risus. Sed fermentum massa nec tortor.
</p>
</div>
</div>
<div id="footer">
<div id="copyrightdesign">
Copyright John Antony Barnes (partthethird)
</div>
<div id="footercontact">
<a href="mailto:johnbarnes666@hotmail.com">Contact me</a></div>
</div>
</body>
</html>
-------------------------------------------------
-The CSS
* {
padding:0;
margin:0;
}
body {
color: #000000;
background-color:#99cccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.83em;
margin:20px auto;
width:760px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0;}
h1 {font-size:1.67em;}
h2 {font-size:1.39em;}
h3 {font-size:1.2em;}
h4 {font-size:1em;}
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
a {
color: #FF0000;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #33cc99;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#header {
background-color: #333333;
width:1044px;
clear:both;
}
#title {
color:#CC0000;
background-color:#99cccc;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}
#nav {
padding:2px 0px 2px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}
#nav a {
color: #000000;
background-color:#99cccc;
font-weight:bold;
text-decoration:none;
padding:4px 20px 4px 20px;
}
#nav a:hover {
background-color:#DD0000;
text-decoration:none;
}
#content {
border-top:1px solid #CC0000;
width:760px;
clear:both;
}
#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:left;
}
#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-left:1px solid #CC0000;
float:right;
}
#footer {
color: #FFFFFF;
background-color:#333333;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}
#footer a {
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
font-weight: bold;
}
#footer a:hover {
text-decoration: underline;
}
#copyrightdesign {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}
#footercontact {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}