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
&#123;
   margin: 10px 5px 0px 230px;
   background-color:#eee;
   color: #000;
   voice-family: ""&#125;"";
   voice-family: inherit;
   border: 2px solid #326698;
   height: 100%;
&#125;

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
&#123;
	width:100%;
	text-align: center;
	border-top: 1px solid #91BBEB;
	background-color: #326698;
	color: white;
&#125;

.section
&#123;
	width:100%;
	text-align:center;
	border:2px solid #326698;
	background-color: #eee;
	color: black;
	margin-bottom:15px;
	padding-bottom: 10px;
&#125;

.header
&#123;
	margin-right: 5px;
	color:#FFFFFF;
	height:50px;
	background-color:#8C8C8C;
	padding: 4px 1px 4px 2px;
	border: 1px solid black;
&#125;

.header IMG
&#123;
	text-align : left;
&#125;

INPUT
&#123;
	font-family :  verdana,arial,sans-serif;
	font-size : .9em;
&#125;

.mainmenu
&#123;
	margin-right: 5px;
	padding-bottom:2px;
	padding-left: 10px;
	padding-top:1px;
	text-align : left;
	background-color : #326698;
	color : #FFF;
&#125;

.mainmenu A
&#123;
	padding-right:10px;
&#125;

.mainmenu  A:link
&#123;
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : #FFF ;
&#125;

.mainmenu  A:visited
&#123;
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : #FFF ;
&#125;

.mainmenu   A:active
&#123;
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : #FFF ;
&#125;

.mainmenu  A:hover
&#123;
	font-weight : bold;
	text-decoration : underline ;
	background-color : transparent;
	color : #FFF ;
&#125;

.leftcontent
&#123;
	position: absolute;
	padding-top: 10px;
	left:10px;
	text-align:center;
	width:210px;
	background-color: #eee;
	color : #000;
&#125;

.rightcontent
&#123;
	margin: 10px 5px 0px 230px;
	background-color:#eee;
	color: #000;
	voice-family: ""&#125;"";
	voice-family: inherit;
	border: 2px solid #326698;
&#125;

html>body .rightcontent
&#123;
	margin-bottom: 0px;
&#125;

.submenu
&#123;
	padding: 1px 0px 1px 10px;
	color:#FFF;
	background-color : #326698;
	height:16px;
	border-top:1px solid #91BBEB;
	text-align:left;
	font-size:.9em;
&#125;

.submenu A
&#123;
	padding-left:2px;
&#125;

.submenu A:link
&#123;
	font-weight : normal;
	text-decoration : none ;
	background-color : transparent;
	color : #FFF ;
&#125;

.submenu A:visited
&#123;
	font-weight : normal;
	text-decoration : none ;
	background-color : transparent;
	color : #FFF ;
&#125;

.submenu  A:active
&#123;
	font-weight : normal;
	text-decoration : none ;
                background-color : transparent;
	color : #FFF ;
&#125;

.submenu A:hover
&#123;
	font-weight : normal;
	text-decoration : underline ;
	background-color : transparent;
	color : #FFF ;
&#125;

.main
&#123;
	font-family :  verdana, arial, sans-serif ;
	background-color: #FFF;
	padding: 25px 25px 10px 25px;;
	color : #000;
&#125;

.main H1,H2, H3, H4, H5, H6 
&#123;
	margin:0px;
&#125;

.footer
&#123;
	margin-top:40px;
	width:100%;
	text-align: center ;
	border-top :1px solid #8C8C8C;
	width : 100%;
	color : #8C8C8C;
	background-color : transparent;
	font-size:.8em;
&#125;

body
&#123;     	
	margin: 10px 10px 0px 10px;
	padding:0px;
	background-color: #eee;
	font-family :  verdana,arial,sans-serif ;
	font-size:.7em;
&#125;

IMG
&#123;
	border : none;
&#125;

A:link
&#123;
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : black ;
&#125;

A:visited
&#123;             
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : black ;
&#125;

A:active
&#123;
	font-weight : bold;
	text-decoration : none ;
	background-color : transparent;
	color : black ;
&#125;

A:hover
&#123;
	font-weight : bold;
	text-decoration : underline;
	background-color : transparent;
	color : black ;
&#125;

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

Code: Select all

height: 100%;
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.