Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Css Help 100 % Height
tdktank59
post Nov 21 2007, 04:35 AM
Post #1


Super Member
*********

Group: Members
Posts: 400
Joined: 21-June 05
From: Callifornia
Member No.: 8,519
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

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Nov 21 2007, 04:56 AM
Post #2


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,295
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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>

(list)

Go to the top of the page
 
+Quote Post
tdktank59
post Nov 21 2007, 05:34 AM
Post #3


Super Member
*********

Group: Members
Posts: 400
Joined: 21-June 05
From: Callifornia
Member No.: 8,519
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

This post has been edited by tdktank59: Nov 21 2007, 05:35 AM

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Nov 21 2007, 06:01 AM
Post #4


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 638
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

(list)

Go to the top of the page
 
+Quote Post
tdktank59
post Nov 21 2007, 06:32 AM
Post #5


Super Member
*********

Group: Members
Posts: 400
Joined: 21-June 05
From: Callifornia
Member No.: 8,519
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;
}


This post has been edited by tdktank59: Nov 21 2007, 06:34 AM

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Nov 21 2007, 06:33 AM
Post #6


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,295
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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??

This post has been edited by Saint_Michael: Nov 21 2007, 06:35 AM

(list)

Go to the top of the page
 
+Quote Post
tdktank59
post Nov 21 2007, 08:19 PM
Post