Travail de pied collant mais pas sur mon gabarit?

ok, mon problème est le travail de code de bas de page Post-it, je l'ai testé:Travail de pied collant mais pas sur mon gabarit?

Pas d'image simplement copier et le coller fonctionne:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sticky Footer</title> 
<style type="text/css"> 

* {margin:0 auto; 
padding:0px;} 

html, body {height: 100%;} 

.wrapper {min-height: 100%; 
height: auto; 
height: 100%; 
margin: 0 auto -250px;} 

.footer, .push {height: 250px;} 

.footer {background:#CCC; 
width:100%;} 

.conver {width:960px; 
height:200px;} 

.extra1 {float:left; 
width:320px; 
height:170px; 
background:#0F0} 

.extra2 {float:left; 
width:320px; 
height:170px; 
background:#00F} 

.extra3 {float:right; 
width:320px; 
height:170px; 
background:#F00} 

.clear {clear:both;} 

.footer_note p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
color:#000; 
text-align:right; 
padding-top:20px;} 

</style> 
</head> 
<body> 

<div class="wrapper"><!-- Wrapper goes around all the content --> 
<p>Your website content here.</p><!-- All your content goes here --> 
<div class="push"></div><!-- Push the footer to the bottom --> 
</div><!-- Wrapper ends here --> 

<div class="footer"><!-- Wrap the footer --> 

    <div class="conver"><!-- Contain footer elements --> 
    <div class="extra1"></div> 
    <div class="extra2"></div> 
    <div class="extra3"></div> 
    <div class="clear"></div> 
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div> 
    </div><!-- conver Ends here --> 


</div><!-- Footer ends here --> 

</body> 
</html>

si elle est ici sur mon modèle (fait un peu bizarre, sans les images): PS: il n'y a pas d'image mais le modèle se termine comme 30px après le texte:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<!--[if IE 6]> 
    <meta http-equiv="refresh" content="0; url=http://www.google.com.br"> 
<![endif]--> 
<style type="text/css"> 
/* General */ 
* {margin:0px auto; 
padding:0px;} 

p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
letter-spacing:1px; 
line-height:18px; 
text-align:left; 
color:#000;} 

.breadcrumbs_here {width:940px;} 

/* background */ 
html {background:#039 url(../images/bg_repeat_x.png) repeat-x; 
height:100%;} 

body {background:url(../images/Glare_01.jpg) no-repeat top center; 
height:100%;} 

html > body {min-height:100%; 
height:auto;} 
/* background ends here */ 

/* header */ 
a#header {background:url(../images/header-trans.png) no-repeat; 
display:block; 
height:130px; 
width:630px; 
text-indent:-9999px; 
margin-right:500px;} 
/* header ends here */ 

/* sheet starts here */ 
.sheet {position:relative; 
width:1000px; 
top:10px;} 

.top_sheet {width:1000px; 
height:20px;} 

.tl {float:left; 
background:url(../images/sheet_top_left-trans.png) no-repeat; 
height:20px; 
width:20px;} 

.tm {float:left; 
background:url(../images/sheet_top-trans.png) repeat-x; 
height:20px; 
width:960px;} 

.tr {float:right; 
background:url(../images/sheet_top_right-trans.png) no-repeat; 
height:20px; 
width:20px;} 

.middle {position:relative; 
background: url(../images/sheet_middle.png) repeat-y; 
width:1000px;} 

bottom_sheet {width:1000px; 
height:30px;} 

.bl {float:left; 
background:url(../images/sheet_bottom_left-trans.png) no-repeat; 
width:20px; 
height:30px;} 

.bm {float:left; 
background:url(../images/sheet_bottom-trans.png) repeat-x; 
width:960px; 
height:30px;} 

.br {float:right; 
background:url(../images/sheet_bottom_right-trans.png) no-repeat; 
width:20px; 
height:30px;} 
/* sheets end here */ 

/* Top menu and search */ 
.top_menu {position:relative; 
width:960px; 
height:51px;} 

.top_menu_inside {float:left; 
width:720px; 
height:51px; 
background:url(../images/menu_bg.png) repeat-x;} 

.search_background {float:right; 
width:240px; 
height:51px; 
background:url(../images/search_bg.png) repeat-x;} 
/* Top menu and search ends here*/ 

/* highlights */ 
.highlights {position:relative; 
width:960px; 
height:150px; 
background:url(../images/highlight_bg-trans.png) repeat-x;} 

.hl1{float:left; 
height:150px; 
width:320px;} 

.hl2{float:left; 
height:150px; 
width:320px;} 

.hl3{float:right; 
height:150px; 
width:320px;} 
/* highlights ends here */ 

/* content */ 
.content {position:relative; 
width:1000px; 
background:url(../images/content_middle.png) repeat-y;} 

.content_wrapper {position:relative; 
width:960px;} 

.left {float:left; 
height:100%; 
width:25%} 

.left p {padding-left:10px;} 

.right {float:right; 
height:100%; 
width:75%} 

.right p {padding-left:10px; 
padding-right:10px;} 

.clear {clear:both; 
clear:both; 
height:0; 
font-size: 1px; 
line-height: 0px;} 
/* content ends here */ 

/* footer */ 

.wrapper {min-height: 100%; 
height: auto; 
height: 100%; 
margin: 0 auto -250px;} 

.footer, .push {height: 250px;} 

.footer {background:#CCC; 
width:100%;} 

.conver {width:960px; 
height:200px;} 

.extra1 {float:left; 
width:320px; 
height:170px; 
background:#0F0} 

.extra2 {float:left; 
width:320px; 
height:170px; 
background:#00F} 

.extra3 {float:right; 
width:320px; 
height:170px; 
background:#F00} 

.clear {clear:both;} 

.footer_note p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
color:#000; 
text-align:right; 
padding-top:20px;} 

</style> 

</head> 
<body> 

<a id="header" href="http://www.google.com.br" title="google" target="_self">google</a> 
<div class="wrapper"><!-- Wrapper goes around all the content --> 
<div class="sheet"> 

    <div class="top_sheet"> 
    <div class="tl"></div> 
    <div class="tm"></div> 
    <div class="tr"></div> 
    </div> 

    <div class="middle"> 

     <div class="top_menu"> 
      <div class="top_menu_inside"></div> 
      <div class="search_background"></div> 
      <div class="clear"></div> 
     </div> 

       <div class="highlights"> 
       <div class="hl1"></div> 
       <div class="hl2"></div> 
       <div class="hl3"></div> 
       <div class="clear"></div> 
       </div><!-- highlights ends here --> 

     <div class="content"> 

     <div class="breadcrumbs_here"></div> 
      <div class="content_wrapper"> 
      <div class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ligula, faucibus ut aliquam ut</p></div> 
      <div class="right"></div> 

      <div class="clear"></div><!-- keeps the floats in one piece --> 

     </div><!-- content wrapper ends here --> 

     </div><!-- content ends here --> 

    </div><!-- middle ends here --> 

    <div class="bottom_sheet"> 
    <div class="bl"></div> 
    <div class="bm"></div> 
    <div class="br"></div> 
    <div class="clear"></div> 
    </div> 

</div><!-- End of the sheet class --> 

<div class="push"></div><!-- Push the footer to the bottom --> 

</div><!-- Wrapper ends here --> 

<div class="footer"><!-- Wrap the footer --> 

    <div class="conver"><!-- Contain footer elements --> 
    <div class="extra1"></div> 
    <div class="extra2"></div> 
    <div class="extra3"></div> 
    <div class="clear"></div> 
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div> 
    </div><!-- conver Ends here --> 


</div><!-- Footer ends here --> 
</body> 
</html>

Je suis sincère d'être ici, je ne comprends pas bien comment le « pied de page collante » fonctionne peut-être si Je savais que je serais capable de résoudre ce problème .

Le "pied collant" colle à l'extrémité du gabarit! Je pourrais utiliser postion absolu pour le faire fonctionner bu IE7 déteste que ...

Ce modèle n'est pas censé travailler sur IE6, donc ne vous inquiétez même pas que les ordures ...

Source

2009-12-17 Evilalan

Dans le second exemple , votre entrée CSS de:

* {margin:0px auto; 
padding:0px;}

Inflige un grand espace au bas de la page. Est-ce ce que vous voyez qui vous empêche de travailler pour vous? Si vous utilisez Firefox, vous pouvez obtenir le plugin Firebug (http://getfirebug.com/) qui vous permet d'afficher et de modifier le CSS des éléments en temps réel. Outil de débogage très utile.

Source

2009-12-18 15:33:52

Travail de pied collant mais pas sur mon gabarit?

Répondre

Questions connexes