Tue, 2007-10-16 22:28
My boss asked me to help imrove the website for my job and so far i've done a decent job. but she specified that she wanted a sidebar on the homepage and that's what has me stuck. I placed it in the css and floated it to the left, but it continues to appear under the main body of the page. I'm testing my site in geocites until i get it right and have something for my boss to upload. can anyone help this frustrated rookie. you can see the page HERE
the code for the page is
Family-Based Strategies
Welcome to Family-Based Strategies
Family-Based Strategies is a privately owned organization founded for the purpose of actively seeking to divert youth from expensive lock-up and residential treatment facilities. Our goal is to provide high-quality, cost-effective alternative care services designed to enhance family strengths, empower family members, and foster self-sufficiency. Our family systems approach creates a supportive environment in which families as a whole commit to the task of changing systemic behavior patterns through development of new skills.
my css looks like this
body {
color: black;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
/**** Layout ****************/
#container {
width: 800px;
margin-top: 1px;
/* border-top: 2px solid #dc231e;*/
margin-left: 1px;
}
#header {
color: white;
background-color: #000154;
}
#navigation {
width: 100%;
color: white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000154;
}
#mainwrapper {
width: 800px;
float: left;
background: url(images/mainstrip.jpg) repeat-y;
}
#main {
/* display: inline; /* for IE -- check this out =========++++++++++++++++++*/
width: 776px;
margin-left:300px;
padding: 0 sidebar;
border-left: 2px solid #000154;
border-right: 2px solid #000154;
background-color: #FFFFFF;
float: left;
}
#sidebar
{
position:absolute
float:left;
width:300px;
height:100%
font-size: 10px;
background-color: #000154;
border-left:1px solid black;
border-bottom:1px solid black;
}
#botnav {
width: 100%;
text-align: center;
font-size: 10px;
background-color: #000154;
padding-top: 5px;
padding-bottom: 5px;
float: left;
}
#footer {
width: 100%;
text-align: center;
background-color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
* html #main {
width: 820px;
w\idth: 800px;
}
/**** Styles for Images ********/
#main img {
padding: 10px;
}
/**** Styles for Text **********/
#navigation p {
margin: 0;
padding: 0;
}
#sidebar p {
font-size: 10px;
color: white;
}
#botnav p {
font-size: 10px;
color: white;
}
#footer p {
font-size: 10px;
line-height: 10px;
color: #000154;
margin: 1px;
padding: 1px;
}
h1 {
font-size: 18px;
font-weight: 800;
color: #4e7f98;
text-align: center;
}
h2 {
font-size: 15px;
font-weight: 700;
color: #4e7f98;
}
h3 {
font-size: 14px;
font-weight: 800;
color: #002F6D;
text-align: left;
}
h3.headingctr {
font-size: 14px;
font-weight: 800;
color: #002F6D;
text-align: center;
}
h4 {
font-size: 13px;
font-weight: 700;
color: #4e7f98;
}
h5 {
font-size: 12px;
font-weight: 500;
color: #dc231e;
border-top: 1px dotted #dc231e;
margin: 0;
padding: 0;
}
/**** Styles for Links **********/
a {
color: #dc231e;
text-decoration: underline;
}
a:hover {
color: #dc231e;
text-decoration: none;
}
#navigation a {
color: #fff;
text-decoration: none;
}
#navigation a:hover {
color: #fff;
text-decoration: underline;
}
#sidebar a {
color: #fff;
text-decoration: none;
}
#sidebar a:hover {
color: #fff;
text-decoration: underline;
}
#botnav a {
color: #fff;
text-decoration: none;
}
#botnav a:hover {
color: #fff;
text-decoration: underline;
}
.external {
background: url(images/externallink.jpg) no-repeat right top;
padding-right: 15px;
}
.pdf {
background: url(images/pdf.gif) no-repeat right top;
padding-right: 15px;
}
/**** fix IE ****************/
* html a .nav a { height: 1px; }
/**** Styles for Tables *****/
table.reg {
width: 100%;
border-collapse: collapse;
}
caption.reg {
font-size: 140%;
font-weight: 700;
color: #4e7f98;
padding: 10px 0px 20px 0px;
}
th.reg {
font-size: 120%;
padding: 2px 5px 2px 5px;
border: 1px solid #C4C2C2;
}
td.reg {
font-size: 100%;
text-align: left;
padding: 3px 5px 2px 5px;
border: 1px solid #C4C2C2;
}
.even {
background-color: #ECEBEB;
}
ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;
}
ul#navlist li
{
display: block;
float: left;
width: 20%;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
text-decoration: underline;
}
CAN ANYONE HELP ME
Tue, 2007-10-16 22:34
#1
hosting the site in
hosting the site in geocities, isn't going to help you much... they add too much of their own crap.
Maybe use http://x10hosting.com/ if you absolutely can't use your bosses host.
Tue, 2007-10-16 22:46
#2
i noticed that but didn't
i noticed that but didn't take the time to look for anything else... thanks i just registered with them.
Wed, 2007-10-17 22:04
#3
new site
ok so i did as you suggested the new site is http://dweezy.x10hosting.com/
same problem... I just need a nudge in the right direction
the code for the page is
Family-Based Strategies
Welcome to Family-Based Strategies
Family-Based Strategies is a privately owned organization founded for the purpose of actively seeking to divert youth from expensive lock-up and residential treatment facilities. Our goal is to provide high-quality, cost-effective alternative care services designed to enhance family strengths, empower family members, and foster self-sufficiency. Our family systems approach creates a supportive environment in which families as a whole commit to the task of changing systemic behavior patterns through development of new skills.
my css is
body {
color: black;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
/**** Layout ****************/
#container {
width: 800px;
margin-top: 1px;
/* border-top: 2px solid #dc231e;*/
margin-left: 1px;
}
#header {
color: white;
background-color: #000154;
}
#navigation {
width: 100%;
color: white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000154;
}
#mainwrapper {
width: 800px;
float: left;
background: url(images/mainstrip.jpg) repeat-y;
}
#sidebar
{
float:left;
width:300px;
font-size: 10px;
background-color: #000154;
border-left:1px solid black;
border-bottom:1px solid black;
}
#main {
/* display: inline; /* for IE -- check this out =========++++++++++++++++++*/
width: 776px;
margin-left: 300px;
padding: 10px;
border-left: 2px solid #000154;
border-right: 2px solid #000154;
background-color: #FFFFFF;
float: left;
}
#botnav {
width: 100%;
text-align: center;
font-size: 10px;
background-color: #000154;
padding-top: 5px;
padding-bottom: 5px;
float: left;
}
#footer {
width: 100%;
text-align: center;
background-color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
* html #main {
width: 820px;
w\idth: 800px;
}
/**** Styles for Images ********/
#main img {
padding: 10px;
}
/**** Styles for Text **********/
#navigation p {
margin: 0;
padding: 0;
}
#sidebar p {
font-size: 10px;
color: white;
}
#botnav p {
font-size: 10px;
color: white;
}
#footer p {
font-size: 10px;
line-height: 10px;
color: #000154;
margin: 1px;
padding: 1px;
}
h1 {
font-size: 18px;
font-weight: 800;
color: #4e7f98;
text-align: center;
}
h2 {
font-size: 15px;
font-weight: 700;
color: #4e7f98;
}
h3 {
font-size: 14px;
font-weight: 800;
color: #002F6D;
text-align: left;
}
h3.headingctr {
font-size: 14px;
font-weight: 800;
color: #002F6D;
text-align: center;
}
h4 {
font-size: 13px;
font-weight: 700;
color: #4e7f98;
}
h5 {
font-size: 12px;
font-weight: 500;
color: #dc231e;
border-top: 1px dotted #dc231e;
margin: 0;
padding: 0;
}
/**** Styles for Links **********/
a {
color: #dc231e;
text-decoration: underline;
}
a:hover {
color: #dc231e;
text-decoration: none;
}
#navigation a {
color: #fff;
text-decoration: none;
}
#navigation a:hover {
color: #fff;
text-decoration: underline;
}
#sidebar a {
color: #fff;
text-decoration: none;
}
#sidebar a:hover {
color: #fff;
text-decoration: underline;
#botnav a {
color: #fff;
text-decoration: none;
}
#botnav a:hover {
color: #fff;
text-decoration: underline;
}
.external {
background: url(images/externallink.jpg) no-repeat right top;
padding-right: 15px;
}
.pdf {
background: url(images/pdf.gif) no-repeat right top;
padding-right: 15px;
}
/**** fix IE ****************/
* html a .nav a { height: 1px; }
/**** Styles for Tables *****/
table.reg {
width: 100%;
border-collapse: collapse;
}
caption.reg {
font-size: 140%;
font-weight: 700;
color: #4e7f98;
padding: 10px 0px 20px 0px;
}
th.reg {
font-size: 120%;
padding: 2px 5px 2px 5px;
border: 1px solid #C4C2C2;
}
td.reg {
font-size: 100%;
text-align: left;
padding: 3px 5px 2px 5px;
border: 1px solid #C4C2C2;
}
.even {
background-color: #ECEBEB;
}
ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;
}
ul#navlist li
{
display: block;
float: left;
width: 20%;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
text-decoration: underline;
}
Wed, 2007-10-17 22:09
#4
Try putting #sidebar before
Try putting #sidebar before #main
then take float: left off of #main
and take off the width from #main
good luck
Wed, 2007-10-17 23:52
#5
That did it... THANKS. And
That did it... THANKS. And removing the width got the body aligned with the rest of the page! (this is much more difficult than my MYSPACE page)lol
Thu, 2007-10-18 00:15
#6
it's only as difficult as
it's only as difficult as you make it. 