positionner une input image dans une div - HTML (RESOLU)

naskaanaskaa Membre
juin 2010 modifié dans Langages Web & serveurs #1
salut,
<html>
....
<style>
#test1{
height:100%;
}

</style>
<body>
<div id="test1">
<div>
<input class="test"  type="image"  align="bottom" src="images/test.png" />
</div>
</div>
....
L'image reste en haut dans ma div mais moi je veux la mettre en bas ou meme au centre  ??

Réponses

  • AliGatorAliGator Membre, Modérateur
    01:01 modifié #2
    "align=bottom" ne fait que jouer sur l'alignement du bouton par rapport à  la baseline du texte (si tu avais du texte en plus de ton <input> dans ton div).

    Il faut que tu appliques un style dans ton div pour indiquer que tu veux que son contenu (donc ton input) soit positionné en bas dudit div. Un truc genre [tt]<div style="position:absolute; bottom:0px;">[/tt]
  • naskaanaskaa Membre
    mai 2010 modifié #3
    j'utilise un style="position:absolute; bottom:0%;"
    En principe, le % est mieux si il y a un changement de resolution
    Ca resoud le probleme mais dans une autre situation ca ne fonctionne pas  :(.
    Si j'ai une div par dessus une autre qui se partagent la page html, mon input se place en bas de la deuxieme et se met a 0px. Hors je veux qui soit a 0px de la premiere. Que faire ?

    merci
  • naskaanaskaa Membre
    mai 2010 modifié #4
    Toujours pas de réponse  :(
    Je comprends qu'avec un position:absolute il suffit de mettre le bon pourcentage pour placer notre input (bouton en jaune sur l'image jointe) ou on le veut sur notre page html. Mais je me demande dans ce cas pourquoi utiliser une DIV si c'est pour positionner par rapport au cadre de la page.
    p.s.
    J'illustre ce que je veux faire avec une image.


    merci
  • AliGatorAliGator Membre, Modérateur
    01:01 modifié #5
    Alors je suis pas expert en CSS d'autant que ça fait un bail que j'en ai pas fait, mais quand tu mets "position:absolute", la position n'est pas calculée par rapport à  la page, mais par rapport au conteneur (en général un DIV) parent.

    La petite astuce du jour au cas où tu ne la pratiques pas déjà  : met des "border:1px solid red" (voire varie les couleurs) un peu sur chaque éléments de ta CSS le temps du debug et de l'ajustement de la position de tes éléments, ça va ajouter un cadre autour des éléments et te permettre de bien plus facilement visualiser l'emplacement mais aussi la taille de chacun de ces éléments (si ça se trouve ton bloc jaune est bien placé par rapport à  ton div n°1... mais ton div n°1 prend toute la page alors que tu t'attend à  ce qu'il ne prenne que la moitié de la hauteur, je sais pas... y'a des fois c'est traitre)
  • naskaanaskaa Membre
    juin 2010 modifié #6
    Ce que j'ai fait:
    il faut mettre le conteneur principal (parent) avec un style "position : relative" et tout ce qui est dedans en "position absolute". 
    Tout ce qui est en absolute se positionnera alors par rapport au conteneur parent.

    merci  Ali. 
Connectez-vous ou Inscrivez-vous pour répondre.