28217 sujets

CSS et mise en forme, CSS3

[résolu] Mettre sur la même ligne une image et un formulaire

Bonjour,

je n'arrive pas à mettre sur une même ligne (dans un TD) une image centré horizontalement et coller à droite un formulaire.... Smiley decu

Voici mon code :
<table border="1" width="100%" cellpadding="0" cellspacing="0">
  <tr><td align="center" height="10" colspan="2">

<img src="images/img.gif" style="border:0px;" />

<div style="text-align:right; font-size:0.7em; position:relative; vertical-align:middle; float:right">

       <form action="login.php" method="post">
          Login :<input class="log" name="login" value="" /><br />
          Mot de passe :<input class="log" type="password" name="pass" value="" ><br />
          <input class="log" value="&nbsp;-&nbsp;Valider&nbsp;-&nbsp;" type="submit" />
        </form>

      </div>

</td></tr>
</table>


J'ai essayer de bidouiller avec le float, le display, ... mais je n'est toujours pas trouvé la combine. Smiley bawling

Pourriez-vous m'aider s'il vous plait ?

Merci d'avance ! Smiley ravi
@+ Smiley cligne
Modifié par Tchupacabra (23 Nov 2005 - 09:52)

<style type="text/css">
img.floatleft {
float:left;
}
.formulaire {
display: block; // a priori inutile
}
</style>
<img class="floatleft" />
<div class="formulaire">
<form>
(...)
</form>
</div>


Essaie avec un truc dans le genre
j'ai essayé avec ton truc.... mais cela n'a pas marché.

revoici mon code :

<table border="1" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td height="80" colspan="2">

<img src="images/img.gif" style="border:0px; float:left;" />
      
<div style="text-align:right; font-size:0.7em; float:right">
       <form action="login.php" method="post">
          Login : <input class="log" name="login" value="" /><br />
          Mot de passe : <input class="log" type="password" name="pass" value="" /><br />
          <input class="log" value="&nbsp;-&nbsp;Valider&nbsp;-&nbsp;" type="submit" />
        </form>
      </div>

</td></tr>

Avec ce code, j'ai bien mon image et mon form sur la même ligne mais l'image n'est plus centré horizontalement dans le td ! Smiley decu
Tchupacabra a écrit :
j'ai essayé avec ton truc.... mais cela n'a pas marché.

revoici mon code :

(...)

Avec ce code, j'ai bien mon image et mon form sur la même ligne mais l'image n'est plus centré horizontalement dans le td ! Smiley decu

Mais heureusement ! tu as mis 
<img src="images/img.gif" style="border:0px; float:left;" />
en d'autres termes : "aligner à gauche du prochain élément".

Si tu veux centrer ton image, mieux vaut mettre par exemple
<div style="text-align: center;"><img src="monimage.jpg" alt="" /></div>
et là ton image sera alignée au centre... sauf si tu veux qu'elle apparaisse au milieu de ton formulaire ?

Essaie d'etre plus clair... ou de montrer un exemple du résultat que tu veux...
merci RomsIW pour ta participation et ton aide,

avec :
<div style="text-align: center;"><img src="monimage.jpg" alt="" /></div>
mon form n'est plus sur la ligne de l'image... Smiley confus

voici ce que je voudrais :
|-------------------------------------------------------------------------|
|---------------------************************---------*********|
|---------------------************************---------*********|
|---------------------************************---------*********|
|---------------------************************---------*********|
|-------------------------------------------------------------------------|

le contour vert est un td à 100%
les étoiles bleues représentent l'image
les étoiles rouges représentent le formulaire

J'espère être plus clair ! Smiley biggrin

@+ Smiley cligne
et au niveau des alignements, qu'est ce qui doit etre aligné où ?
ton dessin donne une idée mais où est placée l'image ? au centre du td ? à une distance du bord gauche ? du bord droit ? du formulaire ?
salut yyoupla Smiley biggrin

j'aimerai que :
- mon image soit centrée horizontalement/verticalement par rapport au td
- mon formulaire doit être collé en bas à droite du td avec si possible une petite marge

merci d'avance...
Smiley langue
oups pardon, j'avais zappé ce post Smiley sweatdrop

alors la solution est de positionner ton formulaire en absolu dans un conteneur en position relative. Exemple :
<html>
<head>
<style>
#conteneur{
width:100%;
text-align:center;
position:relative;
}
img{
display:block;
margin:auto;
}
#formu{
float:right;
position:absolute;
bottom:0;
right:0;
margin: 0  5px 5px 0;
}
</style>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<div id="conteneur">
<img src="images/img.gif" />
<div id="formu">...ton formulaire...<br />bliblibli<br />blobloblo</div>
</div>
</body>
</html>
Sujet clos
Aller à