Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

CSS problem

  • 23-08-2007 02:14PM
    #1
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭


    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'?


Comments

  • #2
    daymobrew
    Registered Users, Registered Users 2 Posts: 6,652 ✭✭✭daymobrew


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


  • #3
    Evil Phil
    Registered Users, Registered Users 2 Posts: 7,468 ✭✭✭Evil Phil


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


  • #4
    terry_s
    Registered Users, Registered Users 2 Posts: 80 ✭✭terry_s


    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%;
    }


  • #5
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    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.


  • #6
    forbairt
    Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    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 ?


  • Advertisement
  • #7
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    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.


  • #8
    forbairt
    Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    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


  • #9
    daymobrew
    Registered Users, Registered Users 2 Posts: 6,652 ✭✭✭daymobrew


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


  • #10
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    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.


  • #11
    forbairt
    Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    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


  • Advertisement
  • #12
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    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?


Advertisement