SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru GamerZ's Avatar
    Join Date
    Nov 2001
    Location
    Singapore
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout Help, Left Menu Overshot Footer

    Hi guys, I have a problem here, my left menu will overshot the footer if it gets too long. Here is the example, http://www.lesterchan.net/test/.

    The CSS Is
    Code:
    /* Link Styles */
    A img {
    	border: none;
    }
    A:Link {
    	text-decoration: none;
    	color: #1876C5;
    }
    A:Visited {
    	text-decoration: none;
    	color: #A5473D;
    }
    A:Active {
    	text-decoration:none;
    	color: #1876C5;
    }
    A:Hover {
    	text-decoration: underline;
    	color: #FF8635;
    }
    
    /* Body Styles */
    BODY {
    	background-color: #F5F5F5;
    	margin: 0px;
    	font-family: Verdana, Arial, Tahoma, Sans-Serif;
    	font-size: 10px
    }
    
    /* Header Styles */
    #Header {
    	background-color: #A0B1C3;
    	height: 100px;
    }
    
    /* Top Styles */
    #Top {
    	background-color: #C0C6CD;
    	border-top: 1px solid #3C3C3C;
    	border-bottom: 1px solid #3C3C3C;
    	background-image: url(../images/bg_breadcrumbs.gif);
    	height: 22px;
    }
    #Breadcrumbs {
    	font-size: 12px;
    	font-weight: bold;
    	margin-left: 5px;
    	margin-top: 4px;
    	float: left;
    }
    #Breadcrumbs A:Link, A:Active {
    	color: #000000;
    }
    #Breadcrumbs A:Visited {
    	color: #000000;
    }
    #Breadcrumbs A:Hover {
    	text-decoration: underline;
    	color: #000000;
    }
    #Date {
    	font-size: 12px;
    	font-weight: bold;
    	margin-right: 5px;
    	margin-top: 4px;
    	float: right;
    }
    
    
    /* Menu Styles */
    #LeftMenu {
    	position: absolute;
    	top: 124px;
    	left: 0px;
    	padding: 10px;
    	background-color:#CDD5E0;
    	width: 170px;
    	height: 100%
    	overflow: visible;
    }
    .MenuTitle {
    	font-weight: bold;
    	font-size: 12px;
    	color: #282828;
    	padding-bottom: 5px;
    	border-bottom: 1px solid #282828;
    }
    
    /* Content Styles */
    #Title {
    	margin-top: 0px;
    	margin-left: 190px;
    	background-color: #C2CAD4;
    	background-image: url(../images/bg_breadcrumbs.gif);
    	border-left: 1px solid #3C3C3C;
    	border-bottom: 1px solid #3C3C3C;
    	height: 22px;
    }
    #Title p{
    	margin-top: 0px;
    	padding-left: 10px;
    	padding-top: 4px;
    	font-weight: bold;
    	font-size: 12px;
    }
    #Content {
    	margin-left: 190px;
    	padding: 10px;
    	background-color: #F5F5F5;
    	border-left: 1px solid #3C3C3C;
    }
    
    
    /* Bottom Styles */
    #Footer {
    	width: 100%;
    	background-color: #A0B1C3;
    	border-top: 1px solid #3C3C3C;
    	border-bottom: 1px solid #3C3C3C;
    	height: 50px;
    }
    #Footer p {
    	padding: 10px;
    }
    The HTML is
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Max Interactive</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="copyright" content="">
    <meta name="description" content="">
    <style type="text/css" media="screen">
    	@import url( scripts/site.css );
    </style>
    </head>
    <body>
    <div id="Header"></div>
    <div id="Top">
    	<div id="Breadcrumbs">Site Name > DMMT > Year 3 > Stage A</div>
    	<div id="Date">Tuesday, 2nd March 2004</div>
    </div>
    
    <div id="LeftMenu">
    	<p class="MenuTitle">&raquo; CATEGORIES</p>
    	<p>asd</p>
    	<p class="MenuTitle">&raquo; POLLS</p>
    	<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    	<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    </div>
    <div id="Title"><p>asd</p></div>
    <div id="Content">
    	<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    </div>
    <div id="Footer"><p>This Is A Footer</p></div>
    </body>
    </html>
    Any ideas how to fix that? Thanks alot.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Because you have absolutely placed your left menu you will not be able to position a footer underneath. An absolute element is removed from the flow and will not interact with other elements.

    The only way you can keep the footer below the left menu is to make sure the content is always longer. Or just keep the footer under the content instead.

    Alternatively you change your absolute menu to a float and float it left. Then add clear:both to the footer and it will stay below the content and the menu. (Ie has some issues with floats and adds extra padding around the float which may upset your layout a bit so you may have to work around it.)

    If you want to see a similar layout then have a look here:

    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Hope that helps.

    Paul

  3. #3
    SitePoint Guru GamerZ's Avatar
    Join Date
    Nov 2001
    Location
    Singapore
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey paul, thanks for the help and link, that is what i wanted.

    Cheers dude =D

  4. #4
    SitePoint Guru GamerZ's Avatar
    Join Date
    Nov 2001
    Location
    Singapore
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey there, any idea how to fix the extra space on IE?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Are you trying to do something like this :

    http://www.pmob.co.uk/temp/2col_xxx.htm

    Or if you want 100% height then it gets a little more complicated but here's an example.

    http://www.pmob.co.uk/temp/2col_100.htm

    There are some issues with alignment with these methods but I don't believe it can be done any other way without javascript etc.

    Hope that helps anyway.

    Paul

  6. #6
    SitePoint Guru GamerZ's Avatar
    Join Date
    Nov 2001
    Location
    Singapore
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Are you trying to do something like this :

    http://www.pmob.co.uk/temp/2col_xxx.htm

    Or if you want 100% height then it gets a little more complicated but here's an example.

    http://www.pmob.co.uk/temp/2col_100.htm

    There are some issues with alignment with these methods but I don't believe it can be done any other way without javascript etc.

    Hope that helps anyway.

    Paul
    Paul, Thanks ALOT, you really helped me =)

  7. #7
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I was having the same problem but this worked fine


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •