Placement Du Footer

gege62530 -
Exileur Messages postés 1475 Date d'inscription Statut Membre Dernière intervention - 2 févr. 2015 à 22:39

Bonjour,

Je débute en html et css. J'ai donc télécharger un thème sur le net que je modifie au fur et a mesure mais seulement je bloc sur le placement du footer car en modifiant unpeu le css le footer et venu ce loger tout en haut de ma page et impossible pour moi de trouver la solution a mon problème..

Voici mes code :


   <footer>
      <div class="container">  
        <div id="FooterTwo"> © 2011 Think simple </div>
        <div id="FooterTree"> Valid html5, design and code by <a href="http://www.marijazaric.com">marija zaric - creative simplicity</a>   </div> 
      </div>
   </footer>


footer{
	position:absolute;
	height:90px;
	clear:both;
	width:100%;
	margin-bottom:18px;
	background-color:#663366;
	margin-bottom: 20px;

	}

#FooterOne, #FooterTwo, #FooterTree {
	position: absolute;	
}

#FooterTwo{
	position: absolute;
	right: 225px;
	top:26px;
	color:white;

}

#FooterTree{
	position: absolute;
	left: 225px;
	top:26px;
	color:white;

}

.container{
    width:980px;
    margin:0 auto;
	background-color:transparent;


}

Afficher la suite

A voir également:

Placement Du Footer
Maison du foot avis - Forum Consommation & Internet
Utilisateur de facebook à la place du nom - Forum Facebook
Le site FOOT.FR ✓ - Forum Consommation & Internet
Maison du foot vrai ou faux - Forum Consommation & Internet
Résultats du foot - Télécharger - Vie quotidienne

2 réponses

Réponse 1 / 2

Exileur Messages postés 1475 Date d'inscription Statut Membre Dernière intervention 150

Salut,

Votre balise <footer> est bien placer à la fin de votre code HTML ?

Je pense également que vous pouvez modifier ceci :


footer{
	position:absolute;
	height:90px;
	clear:both;
	width:100%;
	margin-bottom:18px;
	background-color:#663366;
	margin-bottom: 20px;

	}

#FooterOne, #FooterTwo, #FooterTree {
        position: absolute;

}
#FooterTwo, #FooterTree{
	right: 225px;
	top:26px;
	color:white;

}

.container{
    width:980px;
    margin:0 auto;
	background-color:transparent;


}

D'ailleurs, "tree" comme l'arbre ? ou three ?

gege62530

Merci de la réponse mais le html et bien placé et le code css affiche le footer en plein milieu de ma page. Pour l'arbre j'en ai aucune idée le thème je l'ai télécharger et les ID été déjà sur les balise

Exileur Messages postés 1475 Date d'inscription Statut Membre Dernière intervention 150 > gege62530

Pouvez vous nous communiquer votre code html (avec le reste)?

gege62530

<!doctype html>  
<head>
<meta charset="UTF-8">
<title>titre</title>
<link rel="icon" href="../images/favicon.gif" type="image/x-icon"/>
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<link rel="shortcut icon" href="../images/favicon.gif" type="image/x-icon"/> 
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link type="text/css" href="../css/css3.css" rel="stylesheet" />
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.pikachoose.js"></script>
<script language="javascript">
			$(document).ready(
				function (){
					$("#pikame").PikaChoose();
				});
		</script>
		


    </head>
    <body>
	
    <!--start container-->
    <div id="container">

    <header class="header">
 
    <!--start logo-->
    <a href="#" id="logo"><img src="../images/logo.png" width="221" height="100" alt="logo"/></a>    

	<!--end logo-->
	
   <!--start menu-->

	<nav class="menuu">
       <ul id="menu-demo2">
	<li><a href="../index.html">Home</a>

	</li>
	<li><a href="#">liens</a>
		<ul>
			<li><a href="lien">lien</a></li>
			<li><a href="lien">lien</a></li>
			<li><a href="lien">lien</a></li>

		</ul>
	</li>
	<li>
	    <a href="contact.html">Tarif</a>

	</li>
	<li>
	    <a href="#">Contact</a>
	</li>
</ul>
    </nav>
	<!--end menu-->
	

    <!--end header-->
	</header>


   <!--start intro-->

   <div id="intro">
   
   <div class="group_bannner_right">
   <img src="../images/picture.png" width="550" height="316"  alt="baner">
   </div>
   
   <header class="group_bannner_left">
   <hgroup>
   <h1>Micro Tech</h1>
   <h2>"texte" 
   </h2>
   </hgroup>
   </header>
   </div>
   <!--end intro-->

   
   
   <!--Corps de page-->

   <div class="holder_content"">
   



  
   </div>
   
   <!--end holder-->
   
   <!--start holder-->

   <div class="holder_content1">



       
   <section class="group5">
   <h3>Testimonials</h3>
   	<p><span class="purple">1)</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. 
	Vestibulum condimentum  facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.</p>
   	<p><span class="purple">1)</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. 
	Vestibulum condimentum  facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.</p>


	</section>

   
    </div>
    <!--end holder-->

   
   
    </div>
   <!--end container-->
   
   <!--start footer-->
   <footer>
      <div class="container">  
        <div id="FooterTwo"> © 2011 Think simple </div>
        <div id="FooterTree"> Valid html5, design and code by <a href="http://www.marijazaric.com">marija zaric - creative simplicity</a>   </div> 
      </div>
   </footer>
   <!--end footer-->
<!-- Free template distributed by http://freehtml5templates.com -->   
   </body></html>

/***************************************************
	      think simple by marija zaric and distributed by http://freehtml5templates.com
***************************************************


***************************************************
			      Reset
***************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, section, summary {
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}


a img {border:none}


aside, details, figcaption, figure, 
footer, header, hgroup, menu, section {display: block}


/***************************************************
			      Global styles
***************************************************/

html, body {
	width:100%;
	height:100%;

	}


html, body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: black;
	margin:0 0 1px;
	line-height: 1.5;
	background-color:white;
	background-image:url(../images/bg.png);
	background-position:left top;
	background-repeat:repeat;

}



p {
	margin-bottom:7px;
	
	}
	
a, p a {
	text-decoration:underline;
	color:white;
	}
	a:hover {color:white;}


h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	position:relative;

	

}


	
h1{
	font-size: 60px;
	line-height:1.6;
	color:#663366;
	text-transform:capitalize;
	text-align:left;
	margin-left:40px;

	
	}
	h1 span{
	line-height:1.7px;
	color:black;
	font-size:14px;
	text-transform:none;
	display:block;


}

	
h2{
	font-size: 17px;
	line-height:1.7;
	color:black;
	text-align:left;
	width:420px;
	padding-top:8px;
	margin-left:40px;


	}

	
h3{

	font-size: 28px;
	line-height:1.6;
	color:#00CCFF;
	text-transform:capitalize;
	text-align:left;
	background-color:transparent;
	padding-top:12px;
	margin-bottom:9px;



	}
	
	
 h3 span{
	font-size: 12px;
	color: black;
	text-transform:capitalize;
	height:24px;
	margin-top:15px;
	text-align:left;
    display:block;


}

h4{
	font-size: 18px;
	line-height:1.7;
	color:black;
	text-align:left;
	width:350px;
	padding-top:8px;
	margin-bottom:12px;



	}
	
h4 span{
	font-weight:bold;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFCC33;
	padding:8px;
	margin-left:20px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;




}

	

/***************************************************
			    Main containers
***************************************************/

#container, #container_left, #container_right{
	position: relative;
	width:100%;
	
	}
	#container{
			position:relative;
			width:980px;
			margin:0 auto;
			text-align:left;
			background-color:transparent;
			padding:15px;
			
}


.group1 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	}
	
.group2 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	margin-left:10px;
	margin-right:10px;
	}
	
.group3 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	}
	
.group4 {
	float: left;
	width: 550px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	margin-right:12px;
	}
	
.group5 {
	float: right;
	width: 200px;
	background-color: #f5f5f5;
	padding:15px;
	margin-left:10px;
	border: 1px #a9a9a9 solid;
	border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 6px #a9a9a9;
	background-color: #f5f5f5;

	}
	
	
	
	
.group_bannner_left {
	width: 420px;
	position: absolute;
	top:60px;
	background:transparent;
	margin-top:6px;
	margin-left:-40px;
	}
	
.group_bannner_right{
	width: 380px;
	position: absolute;
	top:-37px;
	right:170px;
	background:transparent;
	margin-top:50px;
	}
	


			
header{
	position: relative;
	float:left;
	width: 100%;
	height:100px;
    z-index: 100;
	}

.header
{
	border: 1px #a9a9a9 solid;
	border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 6px #a9a9a9;
	background-color: #f5f5f5;
}


/***************************************************
				INTRO
***************************************************/	
	
	#intro{
	width: 960px;
	position: relative;
	float: left;
	height:318px;
	padding:10px;
	background:transparent;
	margin-top:17px;



	
	}

/***************************************************
				   HOLDERS
***************************************************/	

.holder_content {
	position: relative;
	float: left;
    width: 740px;
	margin-top:15px;
	background-color: #f5f5f5;
	border: 1px #a9a9a9 solid;
	border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 6px #a9a9a9;
	padding:15px;
	}
	
.holder_content1 {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom:20px;
    margin-top: 469px;
	position: absolute;
	}
	
	
.holder_content_separator{
	margin-bottom:20px;
	}

	
/***************************************************
			        GALLERY
***************************************************/
	 
	 	 
	 a.photo_hover3{
	position:relative;
	float: right;
	margin:5px 13px 8px 0;
	padding: 8px;

	}
	a.photo_hover3{ background-color:white;
	border: 1px solid #E1E1E1;

}
	a.photo_hover3:hover {
	border: 1px dotted #66CCFF;
	background-color:#C7EDFF;
	opacity:0.9;

}

	
	 a.photo_hover2{
	position:relative;
	float: left;
	margin:5px 13px 8px 0;
	padding: 8px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;


	}
	a.photo_hover2{ background-color:white;
	border: 1px solid #E1E1E1;

}
	a.photo_hover2:hover {
	border: 1px solid #E1E1E1;
}

/***************************************************
				   GALLERY
***************************************************/	

.holder_gallery {
	width:610px;
	float:left;
	margin-right:10px;
	padding:0;
	}		
	.holder_gallery a.photo_hover {left:42px}
	.holder_gallery h3 { clear:left}
	
.holder_gallery a.name{
	font-size:12px;
	text-align:left;
	position:relative;
	margin-top:15px;
	display:block;
	clear:left;
	line-height:15px;



}

.holder_gallery a.name1{
	font-size:12px;
	position:relative;
	display:inline;
    text-align:left;
	top:20px;
    left:0;

}

.holder_gallery a.description{
	font-size:12px;
	float:left;
	position:relative;
	margin-right:5px;
	padding-top:7px;
	color:gray;
	width:300px;
	display:inline;


}

	
	
/***************************************************
			        FOOTER
***************************************************/


footer{
	position:absolute;
	height:90px;
	clear:both;
	width:100%;
	margin-bottom:18px;
	background-color:#663366;
	margin-bottom: 20px;

	}

#FooterOne, #FooterTwo, #FooterTree {
        position: absolute;

}
#FooterTwo, #FooterTree{
	right: 225px;
	top:26px;
	color:white;

}

.container{
    width:980px;
    margin:0 auto;
	background-color:transparent;


}






/***************************************************
				       MENU
***************************************************/










.content_menu{
	float: left;
	width: 274px;
	margin-top:-10px;
	margin-bottom:15px;

	}
	
.content_menu ul{	
	margin: 0px;
	padding: 0px;
	float: none;
}

.content_menu ul li{
	float: none;
	padding-bottom: 16px;

}


.content_menu ul li a{
	font-size:14px;
	line-height:normal;
    color:#33CC99;
	text-align:left;
	text-decoration:none;
	padding-left:20px;
	

	}
	
.content_menu ul li a:hover{color:#33CC99;}



/***************************************************
				   SPECIFIC
***************************************************/

#logo{
	position:relative;
   	float:left;
   	top:8px;
	left:0px;
	width:250px;
	height:160px;
	

}

.clearing{
	clear: both;
	display: inline;
	width: 100%;
	height: 0;
	overflow:hidden;
}



.purple{
	font-size:50px;
	color:#663366;
	float:left;
	padding:12px;
	margin:20px;
}
.read_more{
	color:#663366;
	font-size:14px;
	float:right;
	margin-top:15px;
}



/* MENU */



#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .3s all .3s;
}
#menu-demo2 li:hover ul{
max-height:150em;
}

/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #01b7f4;
background-image:-webkit-linear-gradient(top, #01b7f4 0%, #00ccff 100%);
background-image:linear-gradient(to bottom, #01b7f4 0%, #00ccff 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #01b7f4;
background-image:-webkit-linear-gradient(top, #01b7f4 0%, #00ccff 100%);
background-image:linear-gradient(to bottom, #01b7f4 0%, #00ccff 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #01b7f4;
background-image:-webkit-linear-gradient(top, #01b7f4 0%, #00ccff 100%);
background-image:linear-gradient(to bottom, #01b7f4 0%, #00ccff 100%);
}
#menu-demo2 li:last-child{
background-color: #01b7f4;
background-image:-webkit-linear-gradient(top, #01b7f4 0%, #00ccff 100%);
background-image:linear-gradient(to bottom, #01b7f4 0%, #00ccff 100%);
}

/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:transparent;
}
#menu-demo2 li:nth-child(2) li{
background:#00ccff;
}
#menu-demo2 li:nth-child(3) li{
background:transparent;
}
#menu-demo2 li:last-child li{
background:transparent;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#00bfff;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#00bfff;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#00bfff;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#00bfff;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:white;
font-family:Helvetica;
font-size: 15px;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:white;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:white;
}

.menuu
{
   margin-top: 50px
}


body 
{
    position: relative;
}
	
	
footer 
{
    position: absolute; 
	bottom: 0;
}

Réponse 2 / 2

Exileur Messages postés 1475 Date d'inscription Statut Membre Dernière intervention 150

Bon,

Pourquoi y a t il deux feuille de style dans le head ?

<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link type="text/css" href="../css/css3.css" rel="stylesheet" />

J'ai viré tout les script et j'ai garder uniquement dans le head :

<link rel="stylesheet" type="text/css" href="css/styles.css"/>

J'ai placer dans cette feuille de style le code CSS que vous m'avez communiquer.
Vu qu'il manque une bonne partie du style (surement présent dans la seconde feuille de style) le site est bien moche, mais le footer est bien en bas.
Je n'ai pas l'impression qu'il y ai d'erreur sur le code que vous m'avez communiquer.

En revanche le lien pointant sur la seconde feuille de style me parait bien étrange : <link type="text/css" href="../css/css3.css" rel="stylesheet" />

Êtes vous sure du '..' ?

Discussions similaires

Alerte : Arnaques à éviter sur Maillot de foot pas cher !

Placement PARIS BERCY

Les meilleurs places bercy / accor hotel arena

Des doutes sur "mon-maillot-foot.com

Vous connaissez un site fiable de maillot foot pas cher ?

Votre réponse

Discussions similaires