Page 1 of 1
Help with CSS
Posted: Tue Jun 24, 2003 7:00 pm
by nigma
Hey, I am having trouble with a css doc of mine. I would like the class 'rightcontent' to extend all the way to the bottom of the page. It does not do that. I have tried doing:
.rightcontent
{
// Some styles here
margin-bottom: 0px;
// Some more styles here
}
but that does not work, although it has on other CSS docs that I have worked on.
I would apreciate it if anyone could point out what I need to do, but also explain why I need to do it(so that I gain more than just a working css doc after someone replies).
Here is the relative CSS:
Code: Select all
.leftcontent
{
position: absolute;
padding-top: 10px;
left:10px;
text-align:center;
width:210px;
background-color: #eee;
color : #000;
}
.rightcontent
{
margin: 10px 5px 0px 230px;
background-color:#eee;
color: #000;
voice-family: ""}"";
voice-family: inherit;
border: 2px solid #326698;
}
html>body .rightcontent
{
margin-bottom: 0px;
}
.main
{
height: 100%;
font-family : verdana, arial, sans-serif ;
background-color: #FFF;
padding: 25px 25px 10px 25px;;
color : #000;
}
.footer
{
margin-top:40px;
width:100%;
text-align: center ;
border-top :1px solid #8C8C8C;
width : 100%;
color : #8C8C8C;
background-color : transparent;
font-size:.8em;
}
body
{
margin: 10px 10px 0px 10px;
padding:0px;
background-color: #eee;
font-family : verdana,arial,sans-serif ;
font-size:.7em;
}
I am using this css in the following format:
<div class="leftcontent">
Text and stuff here
</div>
<div class="rightcontent">
<div class="main">
Text and stuff here
</div>
</div>
Thanks for every bit of help and advice provided.
Posted: Wed Jun 25, 2003 5:08 am
by releasedj
Code: Select all
.rightcontent
{
margin: 10px 5px 0px 230px;
background-color:#eee;
color: #000;
voice-family: ""}"";
voice-family: inherit;
border: 2px solid #326698;
height: 100%;
}
Posted: Wed Jun 25, 2003 9:56 am
by nigma
I gave that a shot and all it did was push rightcontent right up so it was touching the mainmenu div box.
I will post all the css this time, and you can go to this site to see what it looks like in action.
Site:
http://www.mc0.cjb.net/css/index.html
CSS:
Code: Select all
.secTitle
{
width:100%;
text-align: center;
border-top: 1px solid #91BBEB;
background-color: #326698;
color: white;
}
.section
{
width:100%;
text-align:center;
border:2px solid #326698;
background-color: #eee;
color: black;
margin-bottom:15px;
padding-bottom: 10px;
}
.header
{
margin-right: 5px;
color:#FFFFFF;
height:50px;
background-color:#8C8C8C;
padding: 4px 1px 4px 2px;
border: 1px solid black;
}
.header IMG
{
text-align : left;
}
INPUT
{
font-family : verdana,arial,sans-serif;
font-size : .9em;
}
.mainmenu
{
margin-right: 5px;
padding-bottom:2px;
padding-left: 10px;
padding-top:1px;
text-align : left;
background-color : #326698;
color : #FFF;
}
.mainmenu A
{
padding-right:10px;
}
.mainmenu A:link
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.mainmenu A:visited
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.mainmenu A:active
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.mainmenu A:hover
{
font-weight : bold;
text-decoration : underline ;
background-color : transparent;
color : #FFF ;
}
.leftcontent
{
position: absolute;
padding-top: 10px;
left:10px;
text-align:center;
width:210px;
background-color: #eee;
color : #000;
}
.rightcontent
{
margin: 10px 5px 0px 230px;
background-color:#eee;
color: #000;
voice-family: ""}"";
voice-family: inherit;
border: 2px solid #326698;
}
html>body .rightcontent
{
margin-bottom: 0px;
}
.submenu
{
padding: 1px 0px 1px 10px;
color:#FFF;
background-color : #326698;
height:16px;
border-top:1px solid #91BBEB;
text-align:left;
font-size:.9em;
}
.submenu A
{
padding-left:2px;
}
.submenu A:link
{
font-weight : normal;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.submenu A:visited
{
font-weight : normal;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.submenu A:active
{
font-weight : normal;
text-decoration : none ;
background-color : transparent;
color : #FFF ;
}
.submenu A:hover
{
font-weight : normal;
text-decoration : underline ;
background-color : transparent;
color : #FFF ;
}
.main
{
font-family : verdana, arial, sans-serif ;
background-color: #FFF;
padding: 25px 25px 10px 25px;;
color : #000;
}
.main H1,H2, H3, H4, H5, H6
{
margin:0px;
}
.footer
{
margin-top:40px;
width:100%;
text-align: center ;
border-top :1px solid #8C8C8C;
width : 100%;
color : #8C8C8C;
background-color : transparent;
font-size:.8em;
}
body
{
margin: 10px 10px 0px 10px;
padding:0px;
background-color: #eee;
font-family : verdana,arial,sans-serif ;
font-size:.7em;
}
IMG
{
border : none;
}
A:link
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : black ;
}
A:visited
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : black ;
}
A:active
{
font-weight : bold;
text-decoration : none ;
background-color : transparent;
color : black ;
}
A:hover
{
font-weight : bold;
text-decoration : underline;
background-color : transparent;
color : black ;
}
Posted: Wed Jun 25, 2003 10:14 am
by releasedj
That link doesn't seem to work!
Posted: Wed Jun 25, 2003 1:33 pm
by nigma
PLEASE TRY AGAIN! I just changed it. I am so sorry, please don't give up on helping me! god no!
Posted: Wed Jun 25, 2003 5:51 pm
by releasedj
There aint no css on that url!
Posted: Wed Jun 25, 2003 8:30 pm
by nigma
There isn't supposed to be any CSS on that page. It is an me illustrating the style sheet that I poisted.
Posted: Thu Jun 26, 2003 5:32 am
by releasedj
I know you need help, but I don't know exactly what you want.
Try explaining exactly what you need, and if you give a link, make it relevant to the question you're posing.
Posted: Thu Jun 26, 2003 12:28 pm
by nigma
Okay, now, I think you will understand if you first go to:
http://mc0.cjb.net/css/
That is my webpage with all the CSS being used. Now, the main section of the site, the part that says "Our Story:"
is only as tall as the text inside of that section makes it. I that section to go to the bottom of the page, even if there is only one word inside the section.
I posted the full CSS code which should help you help me

Posted: Fri Jun 27, 2003 1:07 pm
by elToro
Try adding
to
.rightcontent
Posted: Fri Jun 27, 2003 2:39 pm
by nigma
Already tried adding that property to the ' rightcontent ' class, and the
' main ' class. Thanks though.