MooMoo
11-14-2008, 02:47 PM
Hi all,
So I have run into another small issue with my upstart website. I have made a 3 panel float design and now I want to make the 2 side columns/panels a different color. However, when I add something like background-color #xxxxxx; to the code, only the FONT of that column gets the background as that color, and not the entire column.
Here's the code for the site (I have bolded where I have been adding the code) Thank you!:
<!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" dir="ltr" lang="en">
<head>
<title>I l y a | P i t i n</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {background-color: #c9f2ba;}
body {font-family:"Arial"}
#container { /* this is the holder for the page content */
width: 1000px;
border: 1px solid #84c984;
background-color: #84c984;
padding: 2px; /* pad the content a little */
margin: 10px auto; /* this centers the container */
line-height: 130%;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}
#header { /* this affects the whole header */
font-family:"Comic Sans MS"
font-style: italic;
background-color: #71ab6b;
}
#header h1 { /* this only affects any h1 tags within the header */
margin: 0; /* remove extra margin from h1 */
padding: 12px; /* remove extra padding from h1 */
border-bottom: 0px dotted #ed2024; /* bottom border of header */
font-weight: bold; /* remove bold from h1 tag */
text-align: center; /* center the text */
}
#footer {
font-family:"Comic Sans MS"
font-style: italic;
background-color: #71ab6b;
margin: 0;
padding: 3px;
clear: both;
margin: 0;
text-align: center;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
-->
</style>
<style type="text/css">
ul
{
margin-left: 40px;
padding-left: 40px;
margin-right: 40px;
padding-right: 40px;
}
</style>
<style type="text/css">
.indented
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
</style>
<style type="text/css">
.indented2
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
#indented3
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>I l y a | P i t i n</h1>
</div>
<div id="leftnav">
<p>
<b><u>About me</b></u><br><br>
I am 25 years old and currently reside in Mountain View, CA. In 2005 I graduated with a degree in Microbiology and have since worked in research and health care fields. Presently I am teaching myself how to build and develop websites, and this website is my first venture out into that world.
</p>
</div>
<div id="rightnav">
This is text that is floated on the right side of the three-part column.
</p>
</div>
<div id="content">
<p><b>11/12/2008 - First Day</b><br>This website will become a testbed for my continuing self-education of web development and programming.
It is currently in its extreme infancy period, and will be changing weekly, if not daily.
</p>
<p>The main goal of this page is to, in due time, showcase my skills and abilities using multiple languages.</p>
<p>These languages will include, and aren't limited to:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
<li>JavaScript</li>
<li>Java</li>
<li>etc.</li>
</ul>
<p>I will try and keep a running diary of my accomplishments, triumphs, ideas, and failures. Hopefully not so many failures...</p>
<p>Also, being a lover of photography, I will be putting up some pictures and perhaps a story or two about them, but this will be a secondary part of the site.</p>
<P CLASS="indented"> <b>11/13/2008</b> <br>
Learned some new things today. I joined a forum at <a href="http://www.webdeveloper.com"> WebDeveloper.com</a> and posted an issue that I had with some code with this website. I quickly received a few replies which righted my ship immediately - fantastic.<br>
I also ordered two books, which, coupled with the vast amount of information online should be a nice starting point for me in the world of HTML/CSS/Javascript. They are:
<ul>
<li><font color="#F7F7F7">Head First HTML with CSS & XHTML by Eric Freeman and Elisabeth Freeman</font></li>
<li><font color="#F7F7F7">JavaScript: The Definitive Guide by David Flanagan</font></li>
</ul>
<P class="indented2">I've been playing around with the color scheme for the site, which is definitely more fun than work. I think this sort of light green motif works pretty well, but I may think otherwise tomorrow so we'll see. It made for good practice in CSS color modification/manipulation. </p>
</p>
<p class="indented3"></p>
</div>
<div id="footer">
This page Copyright © 2008 by Ilya Pitin
</div>
</body>
</html>
So I have run into another small issue with my upstart website. I have made a 3 panel float design and now I want to make the 2 side columns/panels a different color. However, when I add something like background-color #xxxxxx; to the code, only the FONT of that column gets the background as that color, and not the entire column.
Here's the code for the site (I have bolded where I have been adding the code) Thank you!:
<!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" dir="ltr" lang="en">
<head>
<title>I l y a | P i t i n</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {background-color: #c9f2ba;}
body {font-family:"Arial"}
#container { /* this is the holder for the page content */
width: 1000px;
border: 1px solid #84c984;
background-color: #84c984;
padding: 2px; /* pad the content a little */
margin: 10px auto; /* this centers the container */
line-height: 130%;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}
#header { /* this affects the whole header */
font-family:"Comic Sans MS"
font-style: italic;
background-color: #71ab6b;
}
#header h1 { /* this only affects any h1 tags within the header */
margin: 0; /* remove extra margin from h1 */
padding: 12px; /* remove extra padding from h1 */
border-bottom: 0px dotted #ed2024; /* bottom border of header */
font-weight: bold; /* remove bold from h1 tag */
text-align: center; /* center the text */
}
#footer {
font-family:"Comic Sans MS"
font-style: italic;
background-color: #71ab6b;
margin: 0;
padding: 3px;
clear: both;
margin: 0;
text-align: center;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
-->
</style>
<style type="text/css">
ul
{
margin-left: 40px;
padding-left: 40px;
margin-right: 40px;
padding-right: 40px;
}
</style>
<style type="text/css">
.indented
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
</style>
<style type="text/css">
.indented2
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
#indented3
{
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>I l y a | P i t i n</h1>
</div>
<div id="leftnav">
<p>
<b><u>About me</b></u><br><br>
I am 25 years old and currently reside in Mountain View, CA. In 2005 I graduated with a degree in Microbiology and have since worked in research and health care fields. Presently I am teaching myself how to build and develop websites, and this website is my first venture out into that world.
</p>
</div>
<div id="rightnav">
This is text that is floated on the right side of the three-part column.
</p>
</div>
<div id="content">
<p><b>11/12/2008 - First Day</b><br>This website will become a testbed for my continuing self-education of web development and programming.
It is currently in its extreme infancy period, and will be changing weekly, if not daily.
</p>
<p>The main goal of this page is to, in due time, showcase my skills and abilities using multiple languages.</p>
<p>These languages will include, and aren't limited to:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
<li>JavaScript</li>
<li>Java</li>
<li>etc.</li>
</ul>
<p>I will try and keep a running diary of my accomplishments, triumphs, ideas, and failures. Hopefully not so many failures...</p>
<p>Also, being a lover of photography, I will be putting up some pictures and perhaps a story or two about them, but this will be a secondary part of the site.</p>
<P CLASS="indented"> <b>11/13/2008</b> <br>
Learned some new things today. I joined a forum at <a href="http://www.webdeveloper.com"> WebDeveloper.com</a> and posted an issue that I had with some code with this website. I quickly received a few replies which righted my ship immediately - fantastic.<br>
I also ordered two books, which, coupled with the vast amount of information online should be a nice starting point for me in the world of HTML/CSS/Javascript. They are:
<ul>
<li><font color="#F7F7F7">Head First HTML with CSS & XHTML by Eric Freeman and Elisabeth Freeman</font></li>
<li><font color="#F7F7F7">JavaScript: The Definitive Guide by David Flanagan</font></li>
</ul>
<P class="indented2">I've been playing around with the color scheme for the site, which is definitely more fun than work. I think this sort of light green motif works pretty well, but I may think otherwise tomorrow so we'll see. It made for good practice in CSS color modification/manipulation. </p>
</p>
<p class="indented3"></p>
</div>
<div id="footer">
This page Copyright © 2008 by Ilya Pitin
</div>
</body>
</html>