Petit soucis CSS (footer) [probleme Resolu]

bonjour

cela fais un moment que je fréquente ces forums qui sont tres riche en ressources, je débute en ce qui concerne le css et j ai beaucoup de mal a integre un footer en ce moment..

je ne demande pas à ce que l on me donne un code tout fais , j aimerais essayez d apprendre par moi meme , le probleme c est que meme en ayant vu pas mal de sources , je n arrive pas à faire ce que je veux.

ce que je veux c est integré une image dans mon footer avec un lien pour les copyright.


dans mon index j ai bien mis ca :

<div class="footer">
(le liens en <a href blablabla class='lien_footer'> )
</div>

dans mon css :

/* Footer */




#footer {

 background-image: url('image.gif');
      position: relative;
	width: 470px;
        height: 60px;


.copyright{
	position: relative;
	width: 470px;
}

#copy_titre{
	height: 40px;
	background-image:url("images/..blabla.gif");
}

.copy {
	background-image:url("images/..blabla.gif");
}

.copy a:link, .copy a:visited{
	text-decoration: none;
	color: #994553;
}

bon j ai essayé de formulé un code complet ,
mais la je séche je pense que je suis passé à coté de quelque chose ..





Modifié par jolans (05 Jun 2006 - 23:12)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

oui autant pour moi
je n'ai pas respecté réellement la charte voila qui est fais .
Modifié par jolans (04 Jun 2006 - 15:38)

En fait, avec ce code seul, personne ne peut faire un footer, alors il faut que tu nous donnes les blocs d'avant, et la CSS corespondante. En résumé, donne nous le code de toute ta page, ou la page en ligne si possible.

Voilà A+ Jolans, et bienvenue

Tout d'abord merci à toi broadcastor
de t interessé à mon problème

voici donc le css complet :

/* structure des blocs du site */

* {
	margin:0; 
	padding:0;
}

body { 	
	margin: 0;
  	padding: 0;
  	font-size: 12px;
  	background: #AFA979;
}

img { 
   border: 0px;
}


.site_seed {
	text-align:center;	
	background: #CADBD5; 
	font-family:Verdana, Helvetica, Arial, sans-serif;
}

a:link, a:visited {
	text-decoration: none;
	color: #F2ECE6;
}     

a:hover, a:active {
	color: #456869;
} 

#contenu {
	position:relative;
	background-image:url("blabla.jpg");
    margin-left:auto;
    margin-right:auto;
	min-height:2500px;		
	width:860px;
}

#bandeau {
	height:185px;
	background-image:url("blabla.jpg");
}

.pub_fond {
	position:relative;
	top:190px;
	height:68px;
	background-image:url("blabla.jpg");
}

#pub_banniere {
	position:relative;
	top:4px;
	left:-5px;
    height:60px;
}

/* structure des menus */
	
.barre_gauche{
	position: absolute;
	top: 270px;
	left: 0px; 
	text-align:left;
}	

#menu{
	margin:auto;	
	margin-left:10px;
	margin-right:5px;
	text-align:left;
}

#titre_rubrique_1 {
	height: 70px;
	width: 176px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

#titre_rubrique_2 {
	height:35px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

#titre_rubrique_3 {
	height:35px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

#titre_rubrique_4 {
	height:35px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

#titre_rubrique_5 {
	height:35px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

#titre_rubrique_6 {
	height:35px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

	
.menu_general{
	font-size:11px;
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	margin: 0 0 0 0;
}

.menu_general a{		
	text-decoration:none;
}

.menu_general li{	
	text-transform: none;
    list-style-type:  none;
	text-decoration:none;
}

.menu_general_1{
	position:relative;
	/*list-style-image: url("blabla.jpg");;*/
	margin-left: 25px;
}

.menu_general_1:hover, menu_general_1:active{
 	/*list-style-image: url("blabla.jpg");*/
}

.menu_general_2{
	/*list-style-image: url("blabla.jpg");*/
	margin-left: 35px;
}

.menu_general_3{
	/*list-style-image: url("blabla.jpg");*/
	margin-left: 45px;
}
	
.menu_bas {
	height:28px;
	width: 151px;
	background-image:url("blabla.jpg");
	margin: 0 0 0 0;
}

/* Partie centrale */


.centre {
	position: absolute;
	left: 190px;
	top: 295px;
	width: 461px;
}


/* Gestion de la partie centrale */

.freshnews_icone {
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	padding-right: 10px;
}

.articles{
	position: relative;
	width: 461px;
}


.articles li {
	margin-left: 15px;
}

.articles h2 {
	font-size:16px;
}

.articles h2 {
	font-size:14px;
}

.screen{
	position: relative;
	width: 695px;
}

.articles a:link, .articles a:visited{
	text-decoration: none;
	color: #456869;
}

.articles a:hover, .articles a:active{
	text-decoration: underline;
	color: #456869;
}

.news_auteur a:link, .news_auteur a:visited, .news_source a:link, .news_source a:visited{
	text-decoration: none;
	color: #456869;
}

.news_auteur a:hover, .news_auteur a:active, .news_source a:hover, .news_source a:active{
	text-decoration: underline;
	color: #456869;
}

.news_haut {
	height:16px;
	background-image:url("blabla.jpg");;
}

.news_titre {
	background-image:url("blabla.jpg");
	color: #000000;
	text-align:center;
	font-size:15px;
	font-weight:bold;
	padding: 0px 30px 0 30px;	
}

.news_separation{
	height:9px;
	background-image:url("blabla.jpg");
}

.news_texte{
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 0px 30px 10px 40px;	
}

.news_accroche{
	font-style : italic;
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 10px 30px 10px 40px;	
}

.news_auteur_source{
	text-align:right;
	padding: 12px 30px 0 30px;	
}

.news_bas {
	height:54px;
	background-image:url("blabla.jpg");
}




/* Gestion des articles: partie centrale */

.article_haut{
	height:48px;
	background-image:url("blabla.jpg");
}

.article_titre{
	color: #000000;
	text-align:center;
	font-size:15px;
	font-weight:bold;
	padding: 20px 30px 0 30px;	
}

.article_accroche {
	font-style : italic;
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 10px 30px 0 40px;	
}


.article_corps {
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 10px 30px 0 40px;	
}

.article_sources  {
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 0 30px 10px 40px;	
}

.article_auteurs_date {
	text-align:right;
	padding: 12px 30px 0 40px;	
}

.article_bas {
	height:54px;
	background-image:url("blabla.jpg");
}

/* Gestion des rubriques : partie centrale */

.rubrique{
	position: relative;
	width: 461px;
}

.rubrique_haut{
	height:48px;
	background-image:url("blabla.jpg");
}

.rubrique_titre{
	color: #000000;
	text-align:center;
	font-size:15px;
	font-weight:bold;
	padding: 20px 30px 0 30px;	
}

.rubrique_titre_article {
	font-weight: bold;
}

.rubrique_titre_article img{
	vertical-align: middle;
}

.rubrique_accroche_article {
	font-style : italic;
	padding-bottom : 15px;
}

.rubrique_corps {
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 10px 30px 0 40px;	
}

.rubrique_bas {
	height:54px;
	background-image:url("blabla.jpg");
}

/* Gestion des screenshoot : partie centrale */

.screen_haut{
	height:40px;
	background-image:url("blabla.jpg");
}

.screen_titre{
	color: #FFE76C;
	text-align:center;
	font-size:15px;
	font-weight:bold;
	padding: 20px 30px 0 30px;	
}

.screen_texte {
	background-image:url("blabla.jpg");
	background-repeat:repeat-y;
	text-align:left;
	padding: 10px 30px 10px 50px;	
}

.screen_bas {
	height:15px;
	background-image:url("blabla.jpg");
}

.capture_petite:img{
	width:470px;
}

/* Colonne de droite */

.down {
	color:#F2ECE6;
}

.online {
	color:#F2ECE6;
}

.unknown {
	color:#F2ECE6;
}

.status {
	margin-left: 10px;
	text-align: left;
}

.liste_serveurs{
	margin-left: 15px;
}		

.colonne_droite {
	position: absolute;
	top: 295px;
	right: 5px;
	width: 204px;	
}

.cadre{
	background-image:url("blabla.jpg");
	padding: 10px 22px 10px 2px;
}

.bascadre{
	height:15px;
	background-image:url("blabla.jpg");
}

#cadrecapture{
	height:216px;
	background-image:url("blabla.jpg");
}

.capture{
	position: absolute;
	top: 35px;
	right: 17px;
}

.forumcentre{
	background-image:url("blabla.jpg");
	padding: 10px 22px 10px 30px;
	text-align: left;
	font-size:10px;
}

.forumbas{
	background-image:url("blabla.jpg");
	height:68px;
}

.online{
	background-image:url("blabla.jpg");
	height:22px;
	padding-top:5px;
}

.offline{
	background-image:url("blabla.jpg");
	height:22px;
}

.unknown{
	background-image:url("blabla.jpg");
	height:22px;
}

.serveursbas{
	background-image:url("blabla.jpg");
	height:23px;
}

#titrecadre_sondages{
	height:40px;
	background-image:url("blabla.jpg");
}

.pseudos a:link, .pseudos a:visited{
	text-decoration: none;
	color: #456869;
}

.pseudos a:hover, .pseudos a:active{
	text-decoration: underline;
	color: #456869;
}

/* Footer */

.footer {

      Background-image: url("blabla.jpg");
      width: 770px;
      height: 91px;

.copyright{
	position: relative;
	width: 470px;
}

#copy_titre{
	height: 40px;
	background-image:url("blabla.jpg");
}

.copy {
	background-image:url("blabla.jpg");
}

.copy a:link, .copy a:visited{
	text-decoration: none;
	color: #994553;
}

.copy a:hover, .copy a:active{
	text-decoration: underline;
	color: #994553;
}

.copy_bas{
	height: 15px;
	background-image:url("blabla.jpg");
}

/*class lien sur banniere et footer*/

.lien_banniere {
	position: absolute;
	z-index: 2;
	left:0px;
	width:880px;
	height:233px;	
}

Super , mais maintenant il va faloir que tu nous donnes le xhtml

voici l index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">

<head>
<title>en cours</title>
<meta http-equiv="Content-Type" content="application/xml.xhtml; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="type" content="Information" />
<meta name="revisit-after" content="7 days" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="language" content="Fr" />

<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
</head>


<body class="site">
<?code
?>

<!-- Block de la barre -->
<div id="barre"> 
<?phpcode?>
</div> 
<!-- Fin du block de la barre -->

 <!-- Block du contenu du site -->
<div id="contenu">
			 <!-- Block du bandeau supérieur -->
			<div id="bandeau">
				<!-- Lien -->
				<a href="blabla" class="lien_banniere"></a>
				
				
			</div> <!-- Fin du block du bandeau -->
		
			
		<!-- Block de la barre-menu de gauche -->	
		<div class="barre_gauche"> 
					
				<!-- Block avec l'image au dessus du menu -->
				<div class='haut_barre_gauche'></div> 
						
				<!-- Block contenant le fond de la barre de menu -->	
				<div class='fond_menu'> 
						
					<!-- Block contenant tout le contenu du menu -->
					<div id='menu'> 
							
						<?php code ?>
														
							
					</div> <!-- Fin du block menu -->
										
				</div> <!-- Fin du block fond_menu -->
							
				<div class="menu_bas_general"></div> <!-- Block avec l'image en dessous du menu -->
							
			</div> <!-- Fin du block barre_gauche -->
			
			<!-- Bloc contenu -->
		
		
		<?php code ?>
			
		<br />
      	
		<!-- Fin du block contenu -->
		
		<div class="footer"> <!-- Block du footer  -->
			<!-- Lien -->
			<a href='blabla.com' class='lien_footer'></a>
		</div> <!-- Fin du block footer -->
		
		<code php>
		 
	</body>
</html>

Bonjour,

Juste une petite remarque avant d'aller plus loin :

dans ta CSS, ta classe .copyright est imbriquée (à tort) dans ta classe .footer, ce qui ne doit pas arranger les choses...

j ai modifié la parti css

dans footer j ai change le code par ceci :

/* Footer */

      .footer {


clear:both;
bottom:100%;
background: url("test.jpg") no-repeat;
width: 800px;
height: 100px;

je n'ai plus de probleme d'affichage


j ai désimbriqué ( nouveau vocabulaire ) le copyright du footer également
Modifié par jolans (05 Jun 2006 - 15:40)