CSS problem

Seachmall · 23-08-2007 2:14pm #1

I'm having problem with a page I'm working on and was wondering if I could get some help. I can't post the exact code because thats on a different computer with no internet access so I can't upload the page either yet.

Basically my problem is I have is my right aligned menu isn't reaching down the entire page. I have it set to 100% but it only goes about 70-80%. Heres my CSS:

#wrap{
position: relative;
top: 75px;
margin: auto;
width: 80%;
}
#main{
position: relative;
top: 0px;
left: 0px;
width: 72%;
}
#menu{
position: relative;
top: 0px;
right: 0px;
height: 100%;
width: 20%;
float: right;
}

HTML

<div id='wrap'>
   <div id='menu'>
            menu stuff
   </div>
   <div id='main'>
            main stuff
   </div>
</div>

I can try to upload it if it would help. Anyone reccomend a site to upload it too?
Thanks,
S.

EDIT--Wrong forum, can somebody move it to 'webmaster and flash'?

daymobrew · 23-08-2007 2:34pm

Check out the extensive css-discuss. From the Two Column Layout item I found two articles that might help.

Evil Phil · 23-08-2007 4:08pm

To the Webmaster & Flash forum with you. fly my pretty

terry_s · 23-08-2007 5:15pm

have you tried adding this

html,body{
min-height:100%;
height:100%;
}

don't think you need to use

"position:"

maybe something like this

<div id='wrap'>
<div id='main'>
main stuff
</div>
<div id='menu-right'>
menu stuff
</div>

</div>

#wrap{
height:100%;
margin-top:75px;
margin: auto;
width: 80%;
}
#main{
width: 70%;
display:block;
float:left;
margin-right:5%;
}
#menu-right{
height: 100%;
width: 25%;
}

Seachmall · 23-08-2007 11:28pm

terry_s wrote:

have you tried adding this

html,body{
min-height:100%;
height:100%;
}

don't think you need to use

"position:"

maybe something like this

<div id='wrap'>
<div id='main'>
main stuff
</div>
<div id='menu-right'>
menu stuff
</div>

</div>

#wrap{
height:100%;
margin-top:75px;
margin: auto;
width: 80%;
}
#main{
width: 70%;
display:block;
float:left;
margin-right:5%;
}
#menu-right{
height: 100%;
width: 25%;
}

No, neither work but thanks anyway. Anyone else?

Please,
S.

forbairt · 23-08-2007 11:30pm

if you upload the complete code I'll take a look at it for you ...

just post the code in here ?

edit: what does the menu look like ... basically if its just a simple background if you make an image with that colour for the width of your menu and give the #wrap a background of that image ... it should work for you ?

Seachmall · 24-08-2007 12:17am

forbairt wrote:

if you upload the complete code I'll take a look at it for you ...

just post the code in here ?

edit: what does the menu look like ... basically if its just a simple background if you make an image with that colour for the width of your menu and give the #wrap a background of that image ... it should work for you ?

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
#WRAP{
	position: relative;
	top: 75px;
	margin: auto;
	min-height: 500px;
	width: 80%;
	text-align: left;
	background-color: #ffffff;
	border-width: 0px 5px 5px 0px;
	border-color: #2a2a2a;
	border-style: none solid solid none;
	background-image: url(box.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
#DISCUSSION{
	position: relative;
	top: 0px;
	left: 0px;
	width: 72%;
	padding: 200px 0px 0px 5px;
}
#MENU{
	position: relative;
	top: 0px;
	right: 0%;
	height: 100%;
	width: 22%;
	background-color: #dadada;
	float: right;
	display: block;
	padding: 200px 15px 0px 15px;
	background-image: url(fade.gif);
	background-position: left bottom;
	background-repeat: repeat-x;
}
#TIME{
	font-size: 14px;
	color: #808080;
}
H1{
	font-family: 'Times New Roman';
	color: #000000;
	font-size: 22px;
	margin: 5px;
	width: 100%;
	border-bottom: 1px solid #808080;
}	
P{
	font-family: 'Times New Roman';
	color: #000000;
	font-size: 18px;
	margin: 0px 5px 15px 5px;
	padding-bottom: 15px;
	width: 100%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #808080;
}	
UL{	
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #808080;
	padding-bottom: 15px;
}
LI{
	text-align: right;
	font-size: 18px;
	list-style: none;
	margin: 0px;
	padding: 3px;
}
LI:HOVER{
	background-color: #a8a8a8;
}
LI A{
	text-decoration: none;
	color: #000000;
}
FORM{
	text-align: right;
	margin: 20px 5px 15px 5px;
	padding: 3px 0px 18px 0px;
	width: 100%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #808080;
}	
</STYLE>
</HEAD>
<BODY>
<DIV ID='WRAP'>
	<DIV ID='MENU'>
		<H1>
				Main Menu
			</H1>
			<UL>
				<LI>
					<A HREF=''>Option 1</A>
				</LI>
				<LI>
					<A HREF=''>Option 2</A>
				</LI>
				<LI>
					<A HREF=''>Option 3</A>
				</LI>
			</UL>
			<H1>
				Search
			</H1>
				<FORM METHOD='POST' ACTION=''>
					<INPUT TYPE='TEXT' NAME=''/>
					<INPUT TYPE='SUBMIT' VALUE='GO' />
				</FORM>
			<H1>
				Archives
			</H1>
			<UL>
				<LI>
					<A HREF=''>Option 1</A>
				</LI>
				<LI>
					<A HREF=''>Option 2</A>
				</LI>
				<LI>
					<A HREF=''>Option 3</A>
				</LI>
			</UL>
			<H1>
				Links
			</H1>
			<UL>
				<LI>
					<A HREF=''>Option 1</A>
				</LI>
				<LI>
					<A HREF=''>Option 2</A>
				</LI>
				<LI>
					<A HREF=''>Option 3</A>
				</LI>
			</UL>			
		</DIV>
		<DIV ID='DISCUSSION'>
			<H1>
				
			</H1>
			<P>

                        </P>
		</DIV>
</DIV>
</BODY>
</HTML>

I removed alot of the gobboldy-gook but I wasn't sure what could effect it so I left some in there. You can just through some Lorem Ipsum in the Discussion div.

Thanks,
S.

forbairt · 24-08-2007 8:42am

create a 250 pixel width image the same colour as your menu obviously I can't see what images you used .. it says fade so I'll assume it fades downwards to some colour .. use the colour at the bottom ...

into your #wrap at the end place

background-image: url('imageyoucreated.jpg');
background-position: top right;
background-repeat: repeat-y;

What this will do though is get rid of your box background image from your wrap .. but I don't know what that is either ....

hopefully that'll help some ? the menu background color should now reach the bottom of the wrap

daymobrew · 24-08-2007 12:04pm

In my bookmarks I found a good tutorial called Creating a CSS layout from scratch. It deals with different height floats.

Seachmall · 24-08-2007 2:25pm

forbairt wrote:

create a 250 pixel width image the same colour as your menu obviously I can't see what images you used .. it says fade so I'll assume it fades downwards to some colour .. use the colour at the bottom ...

into your #wrap at the end place

background-image: url('imageyoucreated.jpg');
background-position: top right;
background-repeat: repeat-y;

What this will do though is get rid of your box background image from your wrap .. but I don't know what that is either ....

hopefully that'll help some ? the menu background color should now reach the bottom of the wrap

The fade image is just there so the menu doesn't look crappy when it doesn't reach the bottom. I should have removed it.
The Box image is a logo place holder so that can't go.

I can't use an image because the page will lengthen but the image won't. I think thats what your saying right? Use an image to fill the gap?

daymobrew,
I'll take a look at that link, thanks.

forbairt · 24-08-2007 2:30pm

Seachmall wrote:

The fade image is just there so the menu doesn't look crappy when it doesn't reach the bottom. I should have removed it.
The Box image is a logo place holder so that can't go.

I can't use an image because the page will lengthen but the image won't. I think thats what your saying right? Use an image to fill the gap?

daymobrew,
I'll take a look at that link, thanks.

See what the background image is doing in my example ... repeat-y .. so it will repeat on the y axis for all the height of wrap ... also it will be starting from the right ...

You're going to have a logo as a background image ? ... usually I like to have an actual image there that I can click on .. I always assume a logo is clickable ... and I know there would be ways around this but ... thats maybe just my 2 cents on it

Seachmall · 24-08-2007 5:53pm

forbairt wrote:

See what the background image is doing in my example ... repeat-y .. so it will repeat on the y axis for all the height of wrap ... also it will be starting from the right ...

You're going to have a logo as a background image ? ... usually I like to have an actual image there that I can click on .. I always assume a logo is clickable ... and I know there would be ways around this but ... thats maybe just my 2 cents on it

I suppose that it an idea. I'll try it out, thanks.

EDIT- I just realised I can't do that as I have a liquid layout. Any other suggestions or is there away to control the width of a background-image?

CSS problem

Comments