SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Sit Div at bottom problem

    Hi,

    I am trying to get an element to sit at the bottom of a page, not a footer as such as it sits in the main div (red). I then need to place two divs in it (green and blue) which I am sure I can figure out myself

    See this picture:



    My CSS so far:

    Code:
    /* CSS Document */
    
    /* MAKE THE PAGE */
    
    /* commented backslash hack \*/ 
    html, body{height:99.9%;} 
    /* end hack */
    
    html,body {margin:0;padding:0}
    
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666;
    }
    
    body {
    	background-color: #FFFFFF;
    	background-image: url(../images/temp_star_bg.gif); /* SET THE BACKGROUND IMAGE */
    	text-align: center;
    	min-width:775px;/* stop mozilla sliding off the edge */
    }
    .gtlresources{
    	min-height:99.9%;
    	margin-bottom:-10px;
    	height:auto;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	text-align: left;
    	width: 737px;
    	padding: 0 4px;
    	background-image: url(../images/bg.gif);
    	background-position:4px 8px;
    	border:1px solid #333333;
    }
    .gtlresources_noright {
    	min-height:99.9%;
    	margin-bottom:-10px;
    	height:auto;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	text-align: left;
    	width: 737px;
    	padding:0 4px;
    	background-image: url(../images/bg2.gif);
    	background-position:4px 8px;
    	border:1px solid #333333;
    }
    
    * html .gtlresources{height:99.9%;width:735px;}
    
    * html .gtlresources_noright{height:99.9%;width:735px;}
    
    .minHeight{float:left;width:0px;height:99.9%;margin-bottom:-12px;} /*safari wrapper thanks to Tim Connor*/
    
    * html .minHeight{margin-bottom:-10px;}
    
    /* CREATE THE COLUMNS */
    .menu {
     	margin:-3px; 
    	padding:5px;
     	float:left;
     	width:166px;
    	text-align:right;
    /*	border:1px dotted #EFEFEF;  COMMENT */
    }
    
    .rightmenu {
     	margin:2px; 
    	padding:5px;
     	float:right;
     	width:157px;
    	font-size:11px;
    /* 	border:1px dotted #EFEFEF;  COMMENT  */
    }
    * html .rightmenu {
     	margin:0 -3px; 
     	width:163px;
    }
    .rightmenu p {
    	margin-left:1px;
    	margin-top:3px;
    	margin-bottom:3px;
    	color:#666666;
    }
    
    .centralcontent {
    	margin: -2px 175px 0 180px; padding:5px;
    /*	border:1px dotted #EFEFEF;  COMMENT  */
    }
    * html .centralcontent {
    	height:1%;
    	margin: -5px 170px 0 177px;
    }
    .rightcontent {
    	margin: -2px 0 0 180px; padding:5px;
    /*	border:1px dotted #EFEFEF;  COMMENT  */
    }
    * html .rightcontent {
    	height:1%;
    	margin: -4px -2px 0 177px;
    }
    /* SPECIAL CLASSES */
    p {
    	margin:-3px;
    	margin-top:5px;
    	margin-bottom:5px;
    }
    .rightfloat {
    	float: right;
    	margin:0;
    	padding:0;
    	border:0;
    	text-align:right;
    	padding-right:5px;
    	position:relative;
    	vertical-align: bottom;
    }
    .green {
    	color:#55B243;
    }
    .note {
    	color:#55B243;
    	font-size:9px;
    }
    /* CREATE THE CONTENT STYLES */
    .newsheader {
    	margin: 0 -5px;
    	padding: 2px 5px 0 25px;
    	border:0;
    	border-top: 1px solid #E0E5E5;
    	border-bottom: 1px solid #E0E5E5;
    	height:18px;
    	display:block;
    	color:#55B243;
    	font-size:110%;
    	font-weight:bold;
    	background-color:#FFFFFF;
    	background-image: url(../images/newsheader.gif);
    	background-repeat: no-repeat;
    }
    * html .newsheader{
    	margin:0 -5px;
    }
    /* links */
    
    a:link {
    	color: #000000;
    	text-decoration: none;
    }
    
    a:visited {
    	text-decoration: none;
    	color: #666666;
    }
    
    a:hover {
    	text-decoration: underline;
    	color: #666666;
    }
    
    a:active {
    	text-decoration: none;
    	color: #666666;
    }
    a.menulink {
    	display:block;
    	padding: 2px 0;
    	color: #000000;
    	text-decoration: none;
    	font-size:11px;
    	line-height:18px;
    	font-weight:bold;
    	border-bottom: 1px solid #EFEFEF;
    	padding-right:15px;
    }
    a.menulink:link {
    	color: #000000;
    }
    
    a.menulink:visited {
    	color: #000000;
    }
    
    a.menulink:hover {
    	color: #55B243;
    	text-decoration: none;
    	background-image: url(../images/menu_bar.gif);
    	background-repeat: no-repeat;
    	background-position: left;
    }
    
    a.menulink:active {
    	color: #55B243;
    	text-decoration: none;
    	background-image: url(../images/menu_green.gif);
    	background-repeat: no-repeat;
    	background-position: left;
    }
    
    a.menuactive {
    	display:block;
    	padding: 2px 0;
    	color: #55B243;
    	text-decoration: none;
    	font-size:11px;
    	font-weight:bold;
    	border-bottom: 1px solid #EFEFEF;
    	padding-right:15px;
    	line-height:18px;
    	background-image: url(../images/menu_green.gif);
    	background-repeat: no-repeat;
    	background-position: left;
    }
    a.menuactive:link {
    	color: #55B243;
    	text-decoration: none;
    }
    a.menuactive:hover {
    	color: #55B243;
    	text-decoration: underline;
    }
    a.menuactive:active {
    	color: #55B243;
    	text-decoration: underline;
    }
    a.menuactive:visited {
    	color: #55B243;
    	text-decoration: none;
    }
    
    a.rightlink {
    	display:block;
    	padding: 2px 0;
    	padding-left:3px;
    	margin-left:-3px;
    	margin-right:-3px;
    	color: #000000;
    	text-decoration: none;
    	font-size:11px;
    	font-weight:bold;
    	border-bottom: 2px solid #E0E5E5;
    	padding-right:15px;
    	line-height:18px;
    	/* COMMENT BELOW TO REMOVE */
    	background-color:#EDF0F1;
    	background-image: url(../images/endarrow.gif);
    	background-repeat: no-repeat;
    	background-position: right;	
    }
    * html a.rightlink {
    	margin-right:3px;
    }
    a.rightlink:link {
    	color: #666666;
    	text-decoration: none;
    }
    
    a.rightlink:visited {
    	color: #666666;
    	text-decoration: none;
    }
    
    a.rightlink:hover {
    	color: #55B243;
    	text-decoration: none;
    	background-image: url(../images/endarrow_a.gif);
    }
    
    a.rightlink:active {
    	color: #55B243;
    	text-decoration: none;
    }
    
    a.rightactive {
    	display:block;
    	padding: 2px 0;
    	padding-left:3px;
    	margin-left:-3px;
    	margin-right:-3px;
    	color: #55B243;
    	text-decoration: none;
    	font-size:11px;
    	font-weight:bold;
    	border-bottom: 2px solid #E0E5E5;
    	padding-right:15px;
    	line-height:18px;
    	/* COMMENT BELOW TO REMOVE */
    	background-color:#EDF0F1;
    	background-image: url(../images/endarrow.gif);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    
    * html a.rightactive {
    	margin-right:3px;
    }
    
    a.rightactive:link {
    	color: #55B243;
    }
    
    a.rightactive:visited {
    	color: #55B243;
    }
    
    a.rightactive:hover {
    	color: #55B243;
    	text-decoration: none;
    	background-image: url(../images/endarrow_a.gif);
    }
    
    a.rightactive:active {
    	text-decoration: none;
    	color: #55B243;	
    }
    
    a.newslink {
    	display:block;
    	padding: 3px 0;
    	color: #55B243;
    	text-decoration: none;
    	font-size:11px;
    	padding-right:15px;
    	/* COMMENT BELOW TO REMOVE */
    	background-image: url(../images/newsarrow.gif);
    	background-repeat: no-repeat;
    	background-position: right;
    	border-top: 1px solid #E0E5E5;
    	border-bottom: 1px solid #E0E5E5;
    }
    a.newslink:link {
    	color: #55B243;
    	text-decoration: none;
    }
    
    a.newslink:visited {
    	text-decoration: none;
    	color: #55B243;
    }
    
    a.newslink:hover {
    	background-image: url(../images/newsarrow_a.gif);
    	text-decoration: underline;
    	color: #55B243;
    }
    
    a.newslink:active {
    	text-decoration: underline;
    	color: #55B243;
    }
    
    /* headings */
    
    h2,h3,h4,h5,h6 {
    	font-weight: bold;
    	margin:-3px;
    	margin-top:5px;
    	margin-bottom:5px;
    }
    h1 {
    	margin: -2px -5px;
    	padding: 2px 5px 0 25px;
    	border:0;
    	border-top: 3px solid #FFFFFF;
    	border-bottom: 3px solid #FFFFFF;
    	height:18px;
    	display:block;
    	color:#333333;
    	font-size:120%;
    	font-weight:bold;
    	background-color:#E0E5E5;
    	background-image: url(../images/arrow.gif);
    	background-repeat: no-repeat;
    }
    .rightmenu h1 {
    	margin: 3px -6px;
    }
    * html .rightmenu h1 {
    	margin: 3px 0 3px -5px;
    }
    
    h2 {
    	font-size: 110%;
    	color: #55B243;
    }
    h3 {
    	font-size: 100%;
    	color: #55B243;
    }
    My HTML so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>GTL Resources</title>
    <meta name="keywords" content=" " />
    <meta name="description" content=" " />
    <meta name="agency" content="Phoenix London UK Ltd" />
    <meta name="author" content="GTL Resources" />
    <meta name="rating" content="General" />
    <meta name="revisit-after" CONTENT="30 days" />
    <meta name="robots" CONTENT =" all" />
    <meta name="robots" content="index,follow" />
    <link href="css/gtlresources.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="minHeight"></div>
    <!—Safari hack -->
    <div class="gtlresources"><img src="images/aboutus.jpg" alt="About us header" width="737" height="131" />
      <div class="rightmenu">
        <div class="rightfloat"><span class="note">01 MAY 2005 | LSE</span></div>
        <strong>£500.05p</strong>
        <h1>Investor relations</h1>
        <a href="#" class="rightlink">Our strategy</a> <a href="#" class="rightlink">Management team</a>
        <h1>News</h1>
        <p><strong>While those at the coal face don't have sufficient view of the overall goals. </strong></p>
        <p>Working through a top-down, bottom-up approach, motivating participants and capturing their expectations, in a collaborative, forward-thinking venture brought together through the merging of like minds. Building a dynamic relationship between the main players.</p>
        <a href="news_detail.htm" class="rightlink">View story</a> </div>
      <div class="menu"> <a href="index.htm" class="menuactive">Home</a> <a href="about.htm" class="menulink">About us</a> <a href="#" class="menulink">Projects</a> <a href="#" class="menulink">Investor relations</a> <a href="news.htm" class="menulink">News</a> <a href="#" class="menulink">FAQ's</a> <a href="#" class="menulink">Links</a> </div>
      <div class="centralcontent"><h1>About Us</h1>
        <p>In order to build a shared view of what can be improved, organizations capable of double-loop learning, to focus on improvement, not cost. Working through a top-down, bottom-up approach, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. </p>
        <h2>Dynamic relationship</h2>
        <p>Building a dynamic relationship between the main players. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption highly motivated participants contributing to a valued-added outcome. As knowledge is fragmented into specialities empowerment of all personnel, not just key operatives, that will indubitably lay the firm foundations for any leading company.</p>
        <h1>Organizational learning parameters</h1>
        <p>Taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The balanced scorecard, like the executive dashboard, is an essential tool to focus on improvement, not cost, motivating participants and capturing their expectations. </p>
        <h2>Executive focus</h2>
        <p>By moving executive focus from lag financial indicators to more actionable lead indicators, the components and priorities for the change program quantitative analysis of all the key ratios has a vital role to play in this. Building a dynamic relationship between the main players. </p>
        <h3>Conceptual synergies</h3>
        <p>The vitality of conceptual synergies is of supreme importance the three cs - customers, competition and change - have created a new world for business empowerment of all personnel, not just key operatives.</p>
      </div>
    </div>
    </body>
    </html>
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    please

    please
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.


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
  •