Footer en bas de page

Question

xtof

3 Apr 2013 à 12:11

Salut Tj ce footer.

Je n'arrive pas à positionner mon footer en bas de page, j'ai beau regarder tout les tuto possible et imaginable rien n'y fait, j'avais réussit et quand j'ai tester sur safari mac le footer était au centre ; un peu d'aide merci voici mon code.


<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Marque</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/nivo-slider.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

		<!--- header de la page --->
        <div id="wrapper-head">
        	<header>
            
            <div id="logo">img logo</div>
            
			<nav>
            	<ul>
                    <li><span class="active">ACCEUIL</span></li>
                    <li><a class="mnu" href="#">LIENS</a></li>
                    <li><a class="mnu" href="#">LIENS</a></li>
                    <li><a class="mnu" href="#">LIENS</a></li>
                    <li class="end"><a class="mnu" href="#">LIENS</a></li>
                </ul>
			</nav>
            
          </header>
        </div>
        
        <!--- Slide show ou images --->
        <div id="banner">
        	<div class="slider-wrapper">
           		<figure id="slider" class="nivoSlider">
plusieurs images
            	</figure>
        	</div>
        </div>
        
        <!--- contenu de la page --->
		<div id="wrapper-cont">
        	<div id="content">
            	<aside>
                	<img src="img/t-news.png" width="56" height="17" alt="NEWS">
                	<article class="news">
                    	images news
	
                    </article>
                </aside>
                
                <section id="intro">

                </section>
                
          </div>
        </div>
        
        <!--- Pied de page --->
        <div id="wrapper-foot">
        <div id="bass-line"></div>
        <footer>
        	<div id="copyright">marque<span class="bl">2013</span></div>
            <div id="extra">design: <a class="extra" href="http://www.extra.com">extra.com</a></div>
        </footer>
        </div>
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
<!--- NivoSlider script --->        
    <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
    </body>
</html>



/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	background-color:#152e32;
	height:100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
	border:0px;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Déclaration des polices */   
@font-face {
    font-family: 'gotham';
    src: url('../webfonts/gotham_medium-webfont.eot');
    src: url('../webfonts/gotham_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/gotham_medium-webfont.woff') format('woff'),
         url('../webfonts/gotham_medium-webfont.ttf') format('truetype'),
         url('../webfonts/gotham_medium-webfont.svg#gotham_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#wrapper-head{
	background-color: #227479;
	border-bottom:solid #64c7c9 1px;
	width:100%;
}

header {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:102px;
	background-image:url(../img/bg-header.png);
}

#logo{
	position: absolute;
	top: 20px;
	left: 40px;
	height: 62px;
	width: 235px;
}

nav {
	position: absolute;
	top: 64px;
	left: 310px;
	height: 15px;
	padding:0px;
	margin:0px;
}

ul {
	top: 0px;
	height: 15px;
	padding:0px;
	margin:0px;
}

li{
	display:table-cell;
	width: 130px;
	height:15px;
	font-family: gotham;
	font-size: 10px;
	text-align:center;
	vertical-align:middle;
	letter-spacing: 2px;
	border-right:solid #236c6f 1px;
}

li.end{
	display:table-cell;
	width: 130px;
	height:15px;
	text-align:center;
	vertical-align:middle;
	border-right:0px;
}

a.mnu{
	color: #165254;
	text-decoration: none;
	}
	
a.mnu:hover{
	color:#ffffff;
	text-decoration:underline;
	text-shadow: 0px 1px 1px #3e8f91;
    filter: dropshadow(color=#3e8f91, offx=0, offy=1);
	}
	
.active{
	color:#ffffff;
	text-decoration:underline;
	text-shadow: 0px 1px 1px #3e8f91;
    filter: dropshadow(color=#3e8f91, offx=0, offy=1);
}

#banner {
	background-color: #000000;
	height:260px;
	border-bottom:solid #1d6469 1px;
	}

.slider-wrapper {
	position:relative; 
	width: 850px;
	height: 192px; 
	margin: auto;
	top: 32 px;
}

#wrapper-cont {
	background-color: #152e32;
	height:100%;
	padding-bottom: 70px;
}

#content{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	min-height: 500px;
	}

aside{
	position:absolute;
	top: 0px;
	padding-top: 30px;
	left: 0px;
	padding-left: 40px;
	width: 278px;
	height:490px;
	background-position:right;
	background-image:url(../img/background-news.png);
	background-repeat:no-repeat;
}

.news{
	margin-top: 10px;
	margin-right:30px;
	padding-right: 30px;
	border-bottom: solid 1px #0a5d61;
}

p{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 11px;
	color:#aaa7a7;	
}

.t-news{
	color:#64c7c9;
	font-weight:bold;
}
	
.blue{
	color:#64c7c9;
}

#intro{
	position:absolute;
	top: 0px;
	left:320px;
	padding-top: 20px;
	padding-left: 40px;
	padding-right: 40px;
	}


#wrapper-foot {
    position:relative;
    bottom:0px;
    width:100%;
    height:70px;
	margin-top:-70px;
	clear:both;
	border: solid 1px #00FF00;
}

#bass-line {
	background-color:#227479;
	background-image:url(../img/ligne-footer.png);
	background-repeat:no-repeat;
	background-position:center;
	height: 6px;
}

footer{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:64px;
	background-color:#152e32;
}

#copyright{
	position:absolute;
	font-family: gotham;
	font-size: 10px;
	color: #64c7c9;
	left: 40px;
	top: 24px;
}

.bl{
	color: #ffffff;
}

#extra{
	position:absolute;
	font-family: verdana;
	font-size: 9px;
	color: #868484;
	right: 40px;
	top: 24px;	
}

a.extra{
	 color: #868484;
	 text-decoration: none;
}

a.extra:hover{
	color: #868484;
	}






/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Merci d'avance les amis
Modifié par xtof (03 Apr 2013 - 12:15)

heatseeker

4 Apr 2013 à 10:02

Salut,
Voici un tutoriel très simple et qui fonctionne.
http://www.infographizm.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

rodolpheb

4 Apr 2013 à 15:12

Bonjour,

sur ce forum vous pouvez trouvez votre bonheur Smiley cligne

xtof

10 Apr 2013 à 16:17

Merci pour tout vos conseille, ça fonctionne enfin.

Mais un nouveau bug est apparu et seulement sur firefox et en ligne car chez moi tout est bon.

Dans le conteneur du contenu, j'ai placer deux div une relative qui donne la hauteur pour que le footer monte ou ce place en bas et une en absolute pour le placement et bien la div que j'ai placer en relative sort du flux et ce tape en 0 0.

Quelqu 'un à une nouvelle idée.

Merci d'avance.

voici les codes :


    <div id="contenu">
    
   <div id="centrale">
<aside>
                	<img src="img/t-news.png" width="56" height="17" alt="NEWS">
                	<article class="news">
                    	<img src="img/img-news01.jpg" width="168" height="90" alt="News01">
                    	<p><span class="t-news">&#9658; DOCUMENTAIRE</span>
news news
                    </article>
                </aside>
                
                <section id="intro">
                  <p>texte texte</p>

                    <p>texte texte</p>

               </section>
                
		</div>
               </div>



/* Remise à zero des marges */
* {
	margin:0;
	padding:0;
}

#canevas {
    min-height:100%;
    position:relative;
}

#contenu {
    padding:10px;
    padding-bottom:70px;
}

#piedDePage {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;
    background:#152e32;
}

/* Déclaration header + nav */

#wrapper-head{
	background-color: #227479;
	border-bottom:solid #64c7c9 1px;
	width:100%;
	height:102px;
}

header {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:102px;
	background-image:url(../img/bg-header.png);
}

/* Déclaration slideshow */

#banner {
	background-color: #000000;
	height:260px;
	border-bottom:solid #1d6469 1px;
	}

.slider-wrapper {
	position:relative; 
	width: 850px;
	height: 192px; 
	margin: auto;
	top: 34px;
}

/* Déclaration div placement contenu */

#centrale{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	}

/* Déclaration Aside */

aside{
	position:relative;
	top: 0px;
	padding-top: 30px;
	left: 0px;
	padding-left: 40px;
	width: 278px;
	height:490px;
	background-position:right;
	background-image:url(../img/background-news.png);
	background-repeat:no-repeat;
}

.news{
	margin-top: 10px;
	margin-right:30px;
	padding-right: 30px;
	border-bottom: solid 1px #0a5d61;
	padding-bottom: 2px;
}


p{
	font-family: CorbelRegular;
	font-size: 13px;
	color:#aaa7a7;
	line-height: 1.3em;
	margin-bottom: 1em;
}

.t-news{
	font-family:Verdana, Geneva, sans-serif;
	color:#64c7c9;
	font-weight:bold;
	font-size: 11px;
}
	
.blue{
	color:#64c7c9;
}

/* Déclaration section contenu */

#intro{
	position:absolute;
	top: 0px;
	left:320px;
	width:530px;
	padding-top: 30px;
	padding-left: 40px;
	padding-right: 40px;
	text-justify:auto;
	}

/* Déclaration contenu footer */

#bass-line {
	background-color:#227479;
	background-image:url(../img/ligne-footer.png);
	background-repeat:no-repeat;
	background-position:center;
	height: 6px;
}

footer{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:64px;
	
}

Modifié par xtof (10 Apr 2013 - 16:22)

Sujet clos

CSS et mise en forme, CSS3

Footer en bas de page