Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
| Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 6th, 2007, 02:31 AM
Authorized User
 
Join Date: Feb 2007
Location: Hyderabad, Andhra Pradesh, India.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default privacy footer not getting placed at the bottom

Hi,

Please read the post completely to know the problem.

I have designed a web page with 2 column layout in the content section. It has the following structure:

header:
In header I have given topbarMiddle, topbarLeft, topbarRight. The header has a absolute position with top and left offset properties defined as '0'. The height is defined as 125px. A border is given as 5px with a gray color(#d8d8d8) removing bottom border.

An IE hack as below is given because IE doesn't show full width 100% header as I have mentioned width as 99.1%

 * html #header{
    width: 100%;
}

footer:
Te footer is also styled like the header . In addition I have given a class called "footerWraper" to give an orange border on top.

#footer #footerWraper{
    border-top:3px solid #fe8502;
}

Tablist:
For tabs on top I have included them in tabwrapper class.

leftcolumn:
This is the left column.

<b>contentcolumn:</b>
This is the right column. Here is where I have a problem. I have embedded a <b>.privacy</b> class here which puts privacy statement. When I have a scrollable page it takes bottom place. When there is no scroll then it doesn't take the bottom place. Can you please give some help as to how should I take it to bottom in non scrollable pages.

----------------

Here is the stylesheet:

html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    font-size:11px;
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    color:#000000;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
}

body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
}

#header {
    position:absolute;
    margin:0;
    top:0;
    left:0;
    display:block;
    width: 99.1%;
    height:125px;
    font-size:4em;
    z-index:5;
    overflow:hidden;
    border:5px solid #d8d8d8;
    border-bottom:0px;
}

* html #header{
    width: 100%;
}

#header #topbarMiddle{
    line-height:75px;
    height:75px;
    background-color:#004a66;
    vertical-align:middle;
    color:#a0d967;
    padding-left:10px;
    font-size:20px;
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#header #topbarLeft{
    padding-left:5px;
    height:75px !important;
    background-image:url(../images/bg/head-top-left.gif);
    background-repeat:no-repeat;
    background-position:left top;
    white-space:nowrap;
    border-bottom:1px solid #FFFFFF;
    background-color:#d8d8d8;
}

#header #topbarRight{
    padding-right:5px;
    height:75px !important;
    background-image:url(../images/bg/head-top-right.gif);
    background-repeat:no-repeat;
    background-position:right top;
    white-space:nowrap;
    background-color:#d8d8d8;
}

#footer {
    position:absolute;
    margin:0;
    bottom:0;
    left:0;
    display:block;
    width:99.1%;
    height:38px;
    font-size:1em;
    z-index:5;
    overflow:hidden;
    color:#fff;
    border:5px solid #d8d8d8;
    border-top:0px;
}

* html #footer{
    width: 100%;
    height:43px;
}

#footer #footerMiddle{
    line-height:35px;
    height:35px;
    background-color:#004a66;
    vertical-align:middle;
    color:#ffffff;
    padding-left:10px;
    font-size:12px;
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#footer #footerLeft{
    padding-left:5px;
    height:35px !important;
    background-image:url(../images/bg/footer-bottom-left.gif);
    background-repeat:no-repeat;
    background-position:left bottom;
    white-space:nowrap;
    border-top:1px solid #FFFFFF;
    background-color:#d8d8d8;
}

#footer #footerRight{
    padding-right:5px;
    height:35px !important;
    background-image:url(../images/bg/footer-bottom-right.gif);
    background-repeat:no-repeat;
    background-position:right bottom;
    white-space:nowrap;
    background-color:#d8d8d8;
}

#footer #footerWraper{
    border-top:3px solid #fe8502;
}

#contentColumn{
    overflow:auto;
    position:absolute;
    z-index:3;
    top:130px;
    margin-left:200px;
    bottom:43px;
    right:0;
    background:#ffffff;
    border-right:5px solid #d8d8d8;
}

#contentColumn .inner{
    padding:10px;
    overflow:auto;
}

.privacy{
position:absolute;
margin-top:50px;
display:block;
width:98%;
}

.pageid{
float:left;
width:50%;
}

.footerlogo{
float:right;
}

* html #contentColumn{
    top:-1px;
    right:0;
    bottom:0;
    height:100%;
    max-height:100%;
    width:100%;
    overflow:auto;
  overflow-x:hidden;
    position:absolute;
    z-index:3;
    border-top:125px solid #fff;
    border-bottom:43px solid #fff;
    border-left:200px solid #fff;
}

#leftColumn{
    position:absolute;
    left:0;
    top:130px;
    bottom:43px;
    width:200px;
    background:#ffffff;
    z-index:4;
    overflow:auto;
    border-left:5px solid #d8d8d8;
    border-right:1px dashed #d8d8d8;
}

* html #leftColumn{
    height:100%;
    top:0;
    bottom:0;
    border-top:125px solid #fff;
    border-bottom:43px solid #fff;
    color:#000000;
}

#leftColumn .inner{
    padding:10px;
}

#leftColumn h1{
COLOR:#A0D967;
padding: 4px 10px;
background-color:#004A66;
}

#leftColumn p{
background-color:#eeeeee;
padding: 10px 10px;
margin-top:0px;
}

.contentTopBar{
    padding-bottom:5px;
}

/* TABS */
#tabWraper{
    padding-top:10px;
    border-top:3px solid #fe8502;
}

* html #tabWraper{
    padding-top:0px;
}

#tabList{
    padding: 3px 0;
    padding-left:200px;
    margin-left: 0;
    border-bottom: 1px solid #6e6e78;
    font: bold 12px Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#tabList li{
    list-style: none;
    margin: 0;
    display: inline;
}

#tabList li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #6e6e78;
    border-bottom: none;
    background: #eeeeee;
    text-decoration: none;
    color: #6e6e78;
}

#tabList li a:link {
    color: #6e6e78;
}

#tabList li a:hover{
    color: #a0a0a4;
}

#tabList li a#selected{
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
}


Shivanand
__________________
Shivanand
  #2 (permalink)  
Old July 17th, 2007, 06:34 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

can you post your HTML? CSS is virtually impossible to puzzle out without the code that it's acting on.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.


Similar Threads
Thread Thread Starter Forum Replies Last Post
Footer at bottom of browser window donthomaso Dreamweaver (all versions) 1 June 20th, 2005 10:06 AM
P3P privacy policy with PHP dean_custom Pro PHP 1 March 29th, 2004 04:43 PM
Need help with Radio Bottom pjdas JSP Basics 0 November 21st, 2003 02:12 PM
Caution about Privacy JSample General Announcements 0 June 12th, 2003 10:09 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.