Jul 20, 2008

Css Help 100 % Height
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

Css Help 100 % Height

tdktank59
Nov 21 2007, 04:35 AM
Allright so im working on a page and i need ot to always extent to the bottom of the page go figure lol....

However i cant figure out how to do this and have it work...

either css or w/e else can be used to do it i just cant get it to flaot or sit at the bottom

heres what ive got so far

http://woodlawnwt.com/tdc/duffield-collection.html

works in dreamwearver ( i use it for the color code and the ftp stuff... not for the wysiwig stuff lol...) but i cant get it to show in either ff or ie


http://ryanfait.com/sticky-footer/

solution is there.... lol

Reply

Saint_Michael
Nov 21 2007, 04:56 AM
easy fix, and I am reading your post right you want the content box between the header and the footer to extend you can do it one of two ways:

First one is fixed heighted in which I just add px, as you can see from here thats what I did, however for you dreamweaver fans it is line 58 and for this post I just marked with <--- LINE 58.

CODE
<table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798">
  <tbody><tr>
    <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home   |   Paintings   |   Contact Us</td>
        <td align="right"><table border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td>
            <td><input name="search" value="" type="text" width="150"></td>
            <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">» Search</td>
          </tr>
        </tbody></table>
          </td>
      </tr>
    </tbody></table>
    </td>
  </tr>
  <tr>
    <td style="padding: 18px; height: 700px;" bgcolor="#ffffff" valign="top"> <----LINE 58
        <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody><tr>
            <td width="30%">&nbsp;</td>
            <td width="70%">&nbsp;</td>
          </tr>
        </tbody></table>
    </td>
  </tr>
  <tr>
    <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright © 2007 The Duffield Collection</td>
  </tr>
</tbody></table>
</body></html>


The other version which I think is the one you want deals with Percentages and from the looks of it this is the one you want.
CODE
<table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798">
  <tbody><tr>
    <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home   |   Paintings   |   Contact Us</td>
        <td align="right"><table border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td>
            <td><input name="search" value="" type="text" width="150"></td>
            <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">» Search</td>
          </tr>
        </tbody></table>
          </td>
      </tr>
    </tbody></table>
    </td>
  </tr>
  <tr>
    <td style="padding: 18px; height: 100%;" bgcolor="#ffffff" valign="top">
        <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody><tr>
            <td width="30%" ><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
            <td width="70%">&nbsp;</td>
          </tr>
        </tbody></table>
    </td>
  </tr>
  <tr>
    <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright © 2007 The Duffield Collection</td>
  </tr>
</tbody></table>
</body></html>

 

 

 


Reply

tdktank59
Nov 21 2007, 05:34 AM
I aslo failed to mention that i want it to be for any size window not just mine or yours... so its gotta be css i guess or javascript... but meh i dont know...


actually that doesnt work lol... check ur <br />'s in the second one...

what im trying to do is have the footer litteraly float at the bottom of the page...

with the white extending down the little pink box is worthless...

heres kinda what im talking about but when it goes farther than the page it screws up...
as show here...

http://woodlawnwt.com/tdc/test.html

Reply

sonesay
Nov 21 2007, 06:01 AM
very common problem with working with layouts in CSS. I've used similar layouts in the past and when you start adding content into it the layout falls apart. I dont know whats causing it since I dont fully understand how to use CSS. Theres also the issue with certain broswers failing to display it correctly when others do.

Reply

tdktank59
Nov 21 2007, 06:32 AM
http://woodlawnwt.com/tdc/duffield-collection.html

seems to wokr now bult it off of the dudes code instead of usiong my own lol...
guess it fixed it...

feel free to copy w/e u want and id do it soon casue im taking it down shortly and replacing it with my actual code...

actually never mind heres what ive got and it seems to work...

pretty much eveything is copied form that page i just changed the stuff...
so if an admin wants to remove the pints for this post w/e but i say at elast leave the content incase that ryan dudes site goes down... so all the codes here...


page.html
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>The Duffield Collection</title>
    
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>

<div class="wrapper">
    <div class="header"></div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td bgcolor="#614c1e">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: solid 1px #000000; border-bottom: solid 1px #000000;">
                <tr>
                  <td style="color:#FFFFFF; padding-left:10px;">
                    Home | Paintings | Contact Us
                  </td><td align="right">
                     <table border="0" cellspacing="0" cellpadding="0">
                         <tr><td style="padding-left:5px; padding-right:5px; color:#FFFFFF;">
                            Find an Artist:
                        </td><td>
                             <input type="text" width="150" name="search" value="" />
                        </td><td style="padding-left:5px; padding-right:10px; color:#FFFFFF;">
                             » Search
                        </td></tr>
                     </table>
                </td></tr>
            </table>
        </td></tr>
        <tr><td style="padding: 18px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4e9e9" style="border:solid 1px #e0c1c1;">
              <tr>
                <td width="30%"> </td>
                <td width="70%"> </td>
              </tr>
            </table>
        </td></tr>
    </table>
    <div class="push"></div>
</div>
<div class="footer">
    Copyright © 2007 The Duffield Collection :: All rights reserved.<br />
    Created by Woodlawn Web Technologies
</div>

</body>
</html>


layout.css
CODE
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 40px; /* .push must be the same height as .footer */
}


style.css
CODE
body {
    text-align: center;
}
.wrapper {
    width: 798px;
    text-align: left;
    border-right: solid 1px #000000;
    border-left: solid 1px #000000;
}
.header {
    width: 798px;
    height: 99px;
    text-indent: -9999em;
    background: #fff url(images/duffield-collection_02.png) no-repeat;
}
img {
    float: right;
}
h2 {
    padding: 15px 0;
    color: #1b73d6;
    font: 1.3em verdana,sans-serif;
}
p {
    padding: 0 0 15px;
    color: #194379;
    font: 1em/1.3em arial,sans-serif;
}
.footer {
    width: 798px;
    margin: 0 auto;
    background: #a3b2c6 url(images/duffield-collection_05.png) no-repeat 0 0;
}
a {
    color: #194379;
}
a:hover {
    text-decoration: none;
}

Reply

Saint_Michael
Nov 21 2007, 06:33 AM
Well it was your coding of the CSS file that was messing it up, you had an extra height:100%; that did not need to be in there. I had to rearrange your css code to figure it out, and so I present you your footer solution. Also some of your divs where missed places thus the reason your footer was all up in the content.

CSS
CODE

*/





* {
margin: 0;
}
html, body {
height: 100%;
}
body {
height:100%;
background-color:#e0dac1;
margin-bottom:0;
margin-top:0;
}
body,td,th {
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a:link,a:visited,a:active {
color:#666;
text-decoration:none;
}

a:hover {
color:#000;
text-decoration:none;
}

.wrapper {
background-color:#FFF;
border-left:solid 1px #000;
border-right:solid 1px #000;
margin:0 auto 40px;
position:relative;
width:798px;
}

.banner {
background-image:url(images/duffield-collection_02.png);
background-repeat:no-repeat;
height:99px;
width:798px;
}

.nav {
clear:right;
float:left;
height:25px;
text-align:left;
vertical-align:middle;
}

.nav_container {
background-color:#614c1e;
border-bottom:solid 1px #000;
border-top:solid 1px #000;
height:25px;
width:798px;
}

.search {
clear:right;
float:right;
height:25px;
text-align:center;
vertical-align:middle;
}
.container {
background-color:#FFF;
width:798px;
}

.content {
padding:18px;
width:762px;
}

.footer, .push {
height: 40px; /* .push must be the same height as .footer */
}

.footer {
background-color:#cbc8ae;
background-image:url(images/duffield-collection_05.png);
background-position:center bottom;
background-repeat:no-repeat;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
vertical-align:middle;
width:798px;
}




HTML

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><title>The Duffield Collection</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test_files/style.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="wrapper">
  <div class="container">
        <div class="banner"></div>
        <div class="nav_container">
            <div class="nav">home artuists contact us</div>
            <div class="search"><form action="search.php" method="post"><input name="search" value="" type="text" width="150" />
            </form></div>
        </div>
        <div class="content"></div>
  </div>
    <div class="push"><div class="footer">
    Copyright © 2007 The Duffield Collection :: All rights reserved.<br />
  Created by: Woodlawn Web Technologies
</div>
</div>
</div>
</body></html>



So now it should work like the footer sticky was designed for.

EDIT:

Ok which design are you going with tables or tabless??

Reply

tdktank59
Nov 21 2007, 08:19 PM
allright new update...

got most of it working however i cant get the background to extend to the bottom...

i have a quick fix method but i really dont want to use it since i requires another image loading... (for the background)

http://woodlawnwt.com/tdc/index.php

if u need any of the php code ill post it....
otherwise all the html is visible

\
allright somehow fixed it removed the height: 100%; from the wrapper css in layout

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : css 100 height

  1. 100% Height Issue With Stretching Top To Bottom - Full Page - Problem with content not stretching from top to bottom. (5)
    Another CSS problem thats been annoying me. I got this tempalte off
    http://www.xs4all.nl/~peterned/examples/csslayout1.html the css file is here
    http://www.xs4all.nl/~peterned/examples/css/layout1.css I went ahead and applied it to my template.
    Their main divs contain 1 main container, 3 sub divs (header, content, and footer). HTML div
    id =" container "> div id =" header "> /div > div id =" content "> /div > div id
    =" footer "> /div > /div > I've had to add a few more divs inside the header div to
    include my table for banner an...
  2. How Do I Extend My Div To 1oo% Height? - Also welcoming criticisms on my webpage (13)
  3. Height % In Ff Problems With Css - (3)
    Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
    example if I put blablabla the div container will only be as high as the text makes it, when in
    internet explorer it does make it take up 100% of the page or whatever height in percentage I input
    in it. by the way, html, body {} have 100% height in them, so does the container that has the div
    element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
    one called #div is the one I want with 100% height. Thanks for any help....
  4. Basic Css Layout Issue - Floated Cell with similar height (5)
    Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem
    being I don't know how to make a floated cell be the same height as another. FOr example CODE
    <div id="main"> <div id="left"> just some </br> stuff
    over </br> here! </div> <div id="right"> but...</br>
    over here </br> I have </br> even more stuff</br> to </br>
    display</br> </div> </div> now If I float the left to the left ...



Looking for css, 100, percent, height

Searching Video's for css, 100, percent, height
advertisement



Css Help 100 % Height



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!" 		Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE