Retour à Forum de site web

Hauteur de 100% CSS Problème footer

  • CXLink
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Nov 22, 2004
  • Messages: 684
  • Loc: ATL-GA
  • Status: Offline

Message Février 7th, 2009, 8:33 am

J'ai des problèmes avec le pied sur cette page il fonctionne très bien tant que le contenu ne doit pas forcer pour faire défiler la page, mais dès que ça Est-ce que cela et le pied de page reste en bas de la page initiale plutôt que de l'échelle avec le contenu. Aussi je ne suis pas sûr si cela semble le même sur tous les navigateurs (je l'espère, il le fait) J'ai FF sur OSX.

Aussi, si quelqu'un connaît un bon élargissement de la colonne 2 de hauteur 100% de modèle que je pouvais commencer à qui est solide dans tous les navigateurs, je serais bien avec un lien pour cela.


Merci pour toute l'aide.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Février 7th, 2009, 8:33 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Février 7th, 2009, 10:47 am

Dans votre CSS pour votre pied de page id ( #pied de page), votre position est définie à absolue. Changer cela en rapport, et je pense que cela va résoudre votre problème. Alors le changement:

Code: [ Select ]
    position:absolute;


à

Code: [ Select ]
    position:relative;
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • CXLink
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Nov 22, 2004
  • Messages: 684
  • Loc: ATL-GA
  • Status: Offline

Message Février 7th, 2009, 10:57 am

Thats a fait tomber le bas, mais j'ai un problème avec la colonne de droite ici et le pied de page n'est plus en bas de la page ici . Merci pour la réponse.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • CXLink
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Nov 22, 2004
  • Messages: 684
  • Loc: ATL-GA
  • Status: Offline

Message Février 8th, 2009, 6:45 pm

Got it.

HTML
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container" >
    <div id="header" > Head </div>
    <div id="wrapper" class="clearfix" >
            <div id="maincol" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam mattis, lorem eu ultrices tristique, neque magna ultrices velit, vehicula pretium
sem enim ut tellus. come sociis natoque penatibus et magnis this parturient montes,
convallis, neque magna tempor mauris, in rutrum purus mi non ante. Fusce enim tortor,
fringilla non, molestie a, varius vel, eros. Mauris tempor, est ac consequat vestibulum,
risus tortor tempus tellus, lobortis viverra nisi nulla et metus. Etiam hendrerit vestibulum
nibh. Sed lacus ante, vestibulum vel, auctor ut, tempor sed, leo. </div>
            <div id="leftcol" > Left Column </div>
    </div>
    <div id="footer" > Footer
    </div>
    </div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  7. <link rel="stylesheet" href="style.css" type="text/css" />
  8. </head>
  9. <body>
  10. <div id="container" >
  11.     <div id="header" > Head </div>
  12.     <div id="wrapper" class="clearfix" >
  13.             <div id="maincol" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  14. Etiam mattis, lorem eu ultrices tristique, neque magna ultrices velit, vehicula pretium
  15. sem enim ut tellus. come sociis natoque penatibus et magnis this parturient montes,
  16. convallis, neque magna tempor mauris, in rutrum purus mi non ante. Fusce enim tortor,
  17. fringilla non, molestie a, varius vel, eros. Mauris tempor, est ac consequat vestibulum,
  18. risus tortor tempus tellus, lobortis viverra nisi nulla et metus. Etiam hendrerit vestibulum
  19. nibh. Sed lacus ante, vestibulum vel, auctor ut, tempor sed, leo. </div>
  20.             <div id="leftcol" > Left Column </div>
  21.     </div>
  22.     <div id="footer" > Footer
  23.     </div>
  24.     </div>
  25. </body>
  26. </html>


et CSS
Code: [ Select ]
/* generated by csscreator.com */
html, body{
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    
    font-family:arial,sans-serif;
    font-size:small;
}

#container{
width:500px;
text-align:left;
position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
    background: #fff;
}

#wrapper {
        padding:0 0 5em; /* bottom padding for footer */}
#header{
position:relative;
height:150px;
background-color:#f20;
width:100%;
}

#leftcol{
width:150px;
float:left;
position:relative;
background-color:#B6FFFF;
}

#maincol{background-color: #FFFFFF;
float: right;
display:inline;
position: relative;
width:350px;
}

#footer{
height:10px;
background-color:#FFFFFF;
clear:both;
position:absolute;
    width:100%;
    bottom:10px; /* stick to bottom */

}



/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

h1 {
    font:1.5em georgia,serif;
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif;
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p {
    line-height:1.5;
    margin:0 0 1em;
}
  1. /* generated by csscreator.com */
  2. html, body{
  3.     margin:0;
  4.     padding:0;
  5.     height:100%; /* needed for container min-height */
  6.     background:gray;
  7.     
  8.     font-family:arial,sans-serif;
  9.     font-size:small;
  10. }
  12. #container{
  13. width:500px;
  14. text-align:left;
  15. position:relative; /* needed for footer positioning*/
  16.     margin:0 auto; /* center, not in IE5 */
  17.     
  18.     height:auto !important; /* real browsers */
  19.     height:100%; /* IE6: treaded as min-height*/
  21.     min-height:100%; /* real browsers */
  22.     background: #fff;
  23. }
  25. #wrapper {
  26.         padding:0 0 5em; /* bottom padding for footer */}
  27. #header{
  28. position:relative;
  29. height:150px;
  30. background-color:#f20;
  31. width:100%;
  32. }
  34. #leftcol{
  35. width:150px;
  36. float:left;
  37. position:relative;
  38. background-color:#B6FFFF;
  39. }
  41. #maincol{background-color: #FFFFFF;
  42. float: right;
  43. display:inline;
  44. position: relative;
  45. width:350px;
  46. }
  48. #footer{
  49. height:10px;
  50. background-color:#FFFFFF;
  51. clear:both;
  52. position:absolute;
  53.     width:100%;
  54.     bottom:10px; /* stick to bottom */
  56. }
  60. /* *** Float containers fix:
  61. http://www.csscreator.com/attributes/containedfloat.php *** */
  62. .clearfix:after {
  63. content: ".";
  64. display: block;
  65. height: 0;
  66. clear: both;
  67. visibility: hidden;
  68. }
  70. .clearfix{display: inline-block;}
  72. /* Hides from IE-mac \*/
  73. * html .clearfix{height: 1%;}
  74. .clearfix{display: block;}
  75. /* End hide from IE-mac */
  79. /*printer styles*/
  80. @media print{
  81. /*hide the left column when printing*/
  82. #leftcol{display:none;}
  83. #twocols, #maincol{width:100%; float:none;}
  84. }
  86. h1 {
  87.     font:1.5em georgia,serif;
  88.     margin:0.5em 0;
  89. }
  91. h2 {
  92.     font:1.25em georgia,serif;
  93.     margin:0 0 0.5em;
  94. }
  95.     h1, h2, a {
  96.         color:orange;
  97.     }
  99. p {
  100.     line-height:1.5;
  101.     margin:0 0 1em;
  102. }


Merci pour les aider.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 92 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC