28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

:shock: J'ai crée un formulaire simple avec 3champs,3 labels , 3 boutons images
voici en image mon formulaire
buton normale
Mais j'ai voulu appliquer la propriété float:right à mes boutons pour qu'il s'affiche a droite pour un soucis d'esthetique . Mais le rendu qui m'a été affiché n'etait plus celui souhaité en effet les boutons images sont decalés vers le bas par rapport à mes textbox.
Voilà en image:
bouton decalé vers le bas avec le float right Smiley rolleyes Smiley bawling
J'aurais aimé savoir comment aligner mes bouton images par rapport à mes textbox qu'il ne soit plus decalés tout en conservant le positionnement par la droite
:?:
voici mon fichier css:


body 
{
    font-family:Verdana;
    font-size:12px;
}

h1 
{
 font-size:12px;
 color:#555;
 padding-left:5px; 
}
label
 {

	font-size: 10px;
	font-style: oblique;
	float:left;
	text-align:right;
	width:120px;
	padding:0 .9em 0 0;
	line-height:20px;

}

fieldset 
{
 border:1px solid black;
margin:10px;
padding:10px;
}

.droite
{
float:right;

}
 
legend 
{
 border:1px solid orange;   
}

hr 
{
 border:1px solid orange;
    background-color:#ccc;
  padding:10px 0;  
 clear:both;   
}


p 
{
  
    margin:5px 0px;
}

select
{
    background-color:#ccc;
   
}




Cordialement,
totof Smiley sweatdrop
Modifié par totof (19 Jul 2006 - 00:22)
Bonjour,

Plutôt qu'un flottant, tu peux simplement forcer en CSS la même largeur pour les 2 champs textes et l'option (width: 50%, par exemple).

Il suffit ensuite d'ajuster de quelques pixels la marge gauche du bouton submit correspondant à l'option.


Sinon, deux remarques :
- les 3 possibilités de recherche devraient être trois fieldset distincts (dotés chacun de la légende "chercher des fichiers par"). En l'état, les risques de confusion sont nombreux dans un lecteur d'écran.
- les boutons images doivent avoir une alternative textuelle. Si tu ne veux pas mettre 3 filedset, le formulaire sera déjà plus clair avec des alt différenciant bien les trois boutons: "chercher par nom...", "chercher par secteur...", "chercher par mot clé".
Modifié par Laurent Denis (18 Jul 2006 - 05:52)