Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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
Reply With Quote
  #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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 08:53 AM.


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