[Résolu]Placer une image tout en bas de ma page

bonjour tout le monde,

voila j aimerai faire quelque chose qui en principe est simple et pourtant la ca marche pas...

j ai créé un bloc div dans lequel je place une grande image , j ai place ensuite ce bloc div avec ma feuille de style a l endroit ou je voulais

je souhaitais en fait que cette image soit tout en bas de ma page donc j ai mis ceci:

#tammy
{
   width: 240px;
   height: 300px;
   position: absolute;
   left: 780px;
   bottom: 0px;
}

comme vous voyer j ai mis bottom 0px pour que ca se mette tout en bas de ma page mais l ennui c est qu il y a un decalage d environ 10 px par rapport au bas , à votre avis pourquoi??
Modifié par tony k (28 Feb 2007 - 19:27)

Ce doit être une histoire de marge ou de padding, mais sans plus de précision, il est difficile de répondre.

j y ai pensé aussi mais pourtant je ne trouve pas dans ma feuille de style ou j ai pu mettre des margin qui causent ce probleme

voici mon css complet

body
{
   background-image: url('fond.png');
   background-repeat: repeat-y
}
   
#en_tete
{
   width: 1024px;
   height: 100px;
   background-image : url('ban.jpg');
   position: absolute;
   top: 0px;
   left:0px;
} 
#menu
{
   width: 1024px;
   background-color: rgb(199,48,48);
   height: 35px;
   position: absolute;
   top: 99px;
   left:0px;
} 


#sousmenu 
{
   
   width: 150px;
   height: 145px;
   position: absolute;
   top: 160px;
   left:10px;
   background-image: url('menu.png');
    
  border-left: 5px outset darkred ;
  border-right: 5px outset darkred;
  border-bottom: 5px outset darkred;   
}

#sousmenu 
{
   
   width: 147px;
   height: 145px;
   position: absolute;
   top: 160px;
   left: 10px;
   background-image: url('menu.png');
   list-style-type: square;
  padding: 3px;  
  border-left: 5px outset darkred ;
  border-right: 5px outset darkred;
  border-bottom: 5px outset darkred;   
}



  
#sousmenu li a:hover, #sousmenu li a:focus, #sousmenu li a:active 
{
   text-decoration: underline;
   color: rgb (199,48,48);    
}




#defile
{
   width: 600px;
   height: 25px;
   position: absolute;
   top: 140px;
   left: 10px;
   text-align : center;
   font-family : georgia;
   font-size : 11px;
   
}

#tammy
{
   width: 240px;
   height: 300px;
   position: absolute;
   left: 780px;
   bottom: 0px;
}

#french
{
   width: 30%;
   height: 25px;
   position: absolute;
   top: 140px;
   left: 530px;
   text-align : center;
   font-family : georgia;
   font-size : 11px;
  
}

#titre
{
   width: 595px;
   height: 30px;
   position: absolute;
   background-image: url('titre.gif');
   top: 160px;
   left: 200px;
   text-align : center;
   font-family : georgia;
   font-size : 11px
   
}



#corps
{
   width: 580px;
   height: 345px;
   position: absolute;
   top: 190px;
   left: 200px;
   padding-left:4px;
   padding-right: 5px;
   border: 3px groove darkred;
   overflow: auto;
   background-color: #e7e5e5; 
   scrollbar-face-color: #903030;
   scrollbar-arrow-color: black;
   scrollbar-track-color: #e7e5e5;
   scrollbar-shadow-color: rgb (0,0,0);
   scrollbar-highlight-color: rgb (0,0,0);
   scrollbar-3dlight-color: #808080;
   scrollbar-darkshadow-color: #202020;
}




#bloc
{
   width: 5%
   height: 300px;
   position: absolute;
   top: 337px;
   left: 10px;
   }



#news
{
   width: 48%;
   height: 155px;
   position: absolute;
   padding-left: 7px;
   padding-right: 5px;
   border: 1px solid darkred;
   background-image: url('fondtexte.png');
   background-color: #e7e5e5;
   top: 160px;
   left: 250px;
    font-family : arial ;
  font-size : 12px;
  color : black;
  text-align : left;
     
     
}

#news2
{
   width: 48%;
   height: 155px;
   position: absolute;
   padding-left: 7px;
   padding-right: 5px;
   border: 1px solid darkred;
   background-image: url('fondtexte.png');
   background-color: #e7e5e5;
   top: 330px;
   left: 250px;
        
}

#news3
{
   width: 48%;
   height: 20px;
   position: absolute;
   padding-left: 4px;
   padding-right: 5px;
   border: 1px solid darkred; 
   background-color : #e7e5e5;
   top: 505px;
   left: 250px;
        
}

#pied
{
   width: 100%;
   top: 550px;
   left: 10px;
   position: absolute;
   text-align : center;
   font-family : Arial Black;
   font-size : 11px;
   
}

.imageflottante
{
  float: right
  
  }
  
img 
{
  border: none;
  
  }  
  h3
{
  font-family : arial black;
  font-size : 14px;
  color : rgb(199,48,48);
  text-align : left;
  
  }
  
  h2
{
  font-family : arial black;
  font-size : 14px;
  color : white;
  text-align : center;
  
  }
  
  .text
{
  
  font-family : arial ;
  font-size : 12px;
  color : black;
  text-align : justify;
  margin-right: 10px;
  
  }
  
#active
{
  
  font-family : Trebuchet MS ;
  font-size : 20px;
  color : darkred;
  font-weight : bold;
  text-align : justify;
  margin-right: 10px;
  
  } 
  

   
.titre
{
  font-family : arial black ;
  font-size : 15px;
  color : rgb (199,48,48);
  text-align : left;
  
  }

  
p
{
  font-family : arial black ;
  font-size : 12px;
  color : black;
  text-align : center;
  
  }

li a
{
  text-decoration: none;
  color: black;
    
    
  }
  
li a:hover
{
  text-decoration: none;
  color : rgb(199,48,48);
    
  }

a
{
  text-decoration: none;
  color: rgb(199,48,48);  
    
  }


.menu
{
  font-family : arial black;
  font-size : 19px;
  color : white;
  text-align : justify;
  vertical-align: middle;
}

.menu2
{
  text-decoration: none;
  color: black;
  list-style-type: square;
  font-family: trebuchet MS;
  font-size: 15px;  
    
  }

J'aurais préféré le bout de html concerné plutôt que la CSS complète .
Certains éléments html ont des marges par défaut, comme le <body> par exemple.

Salut, je ne sais pas si c'est ça ou pas, mais j'ai remarqué que dans les attributs css de ton body, tu ne spécifie pas de margin et padding à 0, à savoir ceci :

body {
	margin:0;
	padding:0;
	}

Sinon, afin d'éviter d'avoir des problèmes de positionnement dans les différents navigateurs, tu peux aussi mettre ceci en même temps :

* {
	margin: 0;
	padding: 0;
	}

C'est écrit dans un des tutos(ou faq je sais plus) d'Alsacréations

Sinon, ben, si c'est pas ça, alors, je vois pas ce que ça peut être

touvert a écrit :

Sinon, afin d'éviter d'avoir des problèmes de positionnement dans les différents navigateurs, tu peux aussi mettre ceci en même temps :

* {
	margin: 0;
	padding: 0;
	}

Non.
Mais, une bonne fois pour toutes, quel est l'imbécile qui a pondu cette sottise ? Hum ?

(La seule certitude que j'ai est que ce n'est pas Raphael. je le pratique depuis longtemps, il n'aurait jamais osé ça, tout de même...)
Modifié par Laurent Denis (26 Feb 2007 - 18:16)

Laurent Denis a écrit :

Non.
Mais, une bonne fois pour toutes, quel est l'imbécile qui a pondu cette sottise ? Hum ?

Ah ben, j'ai bien relus, et autant pour moi, l'info n'était pas tout-à-fait exacte , décidément, les gaffes aujourd'hui, quand c'est pas sur les <BR>, c'est sur ce truc.:p

C'est situé dans la faq(je viens de retrouver l'article, il est ici)

Et je donne le bout de texte qui en parle :

a écrit :
Le principe est d'utiliser le sélecteur universel (*), qui s'appliquera à toutes les balises, et d'y mettre les marges à zéro :
* {margin: 0; padding: 0;}

Commencez votre feuille de style par cette déclaration. Si les décalages involontaires disparaissent, vous aurez détecté un problème de marges par défaut. A vous ensuite d'isoler l'élément qui provoque ce décalage.

Comme il est dit donc dans le bout de texte en question, ce code peut être utilisé pour déceler les problèmes de positionnement et une fois qu'ils sont localisés, ben apparement, si je comprends bien, on a plus qu'à le virer.

Toutes mes excuses, la prochaine fois, j'essayerai de mieux lire ce qu'il y a devant mes yeux

Les meilleures sites peuvent contenir des sottises.

Ramener à zéro les marges verticales par défaut de tous les éléments HTML n'est certes pas un souci... tant qu'on réécrit celles-ci de manière systématique dans le reste de la CSS.

Vous n'avez jamais eu un client râlant parce que, d"un coup, le formulaire qu'il avait ajouté dans son contenu était tout écrasé, hum ? Vous n'avez jamais pesté en vous disant si seulement je l'avais su qu'il mettrait un jour un formulaire à cet endroit-là ?

j ai essayé cette astuce mais toujours le meme probleme

Lanza a écrit :
J'aurais préféré le bout de html concerné plutôt que la CSS complète .
Certains éléments html ont des marges par défaut, comme le <body> par exemple.

pour le html j ai mis ca:

<div id="tammy">
<img src="photos/tammy1.png">
</div>

ce code la entre mes balises body

sinon j ai essayé un positionnement "fixed" et la ca fonctionne ...mais ca le fera qu avec une resolution de 1024

tony k a écrit :
pour le html j ai mis ca:

<div id="tammy">
<img src="photos/tammy1.png">
</div>

ce code la entre mes balises body

Oui, ben, c'est pas ça qui pose problème pour ton positionnement, c'est dans tes css que tu vas devoir trouver le moyen de supprimer cette marge

Sinon, un attribut alt est le bienvenu dans ton code xhtml, exemple :

<img src="photos/tammy1.png" [b]alt="photo de Tammy"[/b]>

ça permet entre autres de permettre au robots des moteurs de recherche de lire la description entre les guillemets et de s'en servir avec les autres infos de tes pages pour le référencement.
ça permet aussi aux navigateurs texte(pour les personnes aveugles et mal-voyantes)de le lire au même titre qu'un texte normal.
Modifié par touvert (26 Feb 2007 - 20:07)

merci pour l info touvert mais comment eliminer cette marge?? j ai essayé la technique citée ci dessus mais ca ne fonctionne pas

tony k a écrit :
j ai essayé la technique citée ci dessus mais ca ne fonctionne pas

De quoi, la technique de mettre les margin et padding à 0 pour ton body ?

Si c'est bien de ça que tu parles, eh bien alors, je ne vois vraiment pas ce que ça peut être .

Mais j'imagine qu'il doit exister une solution que je ne connais pas.

touvert a écrit :

<img src="photos/tammy1.png" [b]alt="photo de Tammy"[/b]>

Bah, non.

Parce que "Photo de Tammy", on s'en tamponne. Donc a priori, alt="".

En revanche, s'il y a dans cette photo une information significative, genre alt="Tammy est obèse", ou alt="Tammy est le sosie de Britney Spears ", là oui.

On en persécute que ceux qu'on aime
Modifié par Laurent Denis (26 Feb 2007 - 21:06)

Oui, tu as raison, je me suis mal exprimé sur le sujet, disons que j'ai voulu aller trop vite dans mon explication, j'ai pensé que l'on comprendrait sans problème qu'il faut mettre une info concernant la photo. Mais tu as bien fais de préciser que l'info du alt doit être complémentaire à la photo en question

pfiouuu, eh ben c'est sûr et certain que je deviendrai jamais prof moi

edit : Mais qui donc est assez vache pour comparer qui que ce soit avec Britney Spears ?
Modifié par touvert (26 Feb 2007 - 21:44)

j ai pu trouver une solution , j ai en fait dit dans mon css que ma propriéte image etait un bloc

donc j ai rajouté un display= block et maintenant ca fonctionne bien

tony k a écrit :
j ai pu trouver une solution , j ai en fait dit dans mon css que ma propriéte image etait un bloc

donc j ai rajouté un display= block et maintenant ca fonctionne bien

Hum...
Ton sujet est donc à classer comme étant [Résolu] ?