[Résolu]Alignement CSS

Alignement CSS [Résolu] - HTML/CSS - Programmation

Marsh Posté le 22-06-2006 à 23:09:58    

Bonsoir à tous,
 
J'éssaye de faire un truc tout simple à partir ce ce formulaire :

Code :
  1. <div id="rechercher">
  2.             <form action="http://www.avelif.info/fr/iffendic/eolienne/recherche.html" enctype="multipart/form-data" method="post" >
  3.               <fieldset id="formrechercher">
  4.                 <legend>Recherche</legend>
  5.                 <p>
  6.                   <label for="recherche" accesskey="4" title="[4] Saisir un ou plusieurs mots">Rechercher [ <a href="http://www.monsite.info/$lg/plan.html" accesskey="3"  tabindex="8" title="[3] Consulter le plan du site">Plan du site</a> ]</label>
  7.                   <input tabindex="2" size="25" name="recherche" id="recherche" type="text" value="Saisir un ou plusieurs mots"  onfocus="this.value=''" />
  8.                 </p>
  9.                 <p>
  10.                   <input tabindex="3" name="submit" type="submit" value="rechercher" class="bouton" />
  11.                 </p>
  12.               </fieldset>
  13.             </form>
  14.           </div>


J'aimerais simplement aligner le label, l'input text et l'input submit en haut à droite de mon écran.
J'ai bien réussi en jouant avec  margin, mais c'était vraiment caca et sous ie c'était horrible. Sinon j'ai bien éssayé les float, display inline mais au final rien de concluant...(c'est pour ça que je ne vous montre aucun CSS...)
Une idée, un exemple propre, élégant ?  
 
Bonne soirée
Merci


Message édité par 2xyo le 24-06-2006 à 16:44:01

---------------
2 * yo = yoyo
Reply

Marsh Posté le 22-06-2006 à 23:09:58   

Reply

Marsh Posté le 22-06-2006 à 23:23:37    

Il n'est pas utile d'entourer tes lables et inputs dans un paragraphe. Sémantiquement ... je vois pas trop l'interet. Enfin a la limite tu es seul juge sur ce point.
 
Pour aligner label et input, une fois les p enlevés, tu n'auras plus de probleme vu ke se sont des elements inline.

Reply

Marsh Posté le 22-06-2006 à 23:29:30    

Merci
 
Il serait préférable que j'aille me coucher vue que ma productivité est nulle voir négative... Dommage, j'aimerais bien suivre le fabuleux topic de aipsy0783 :)


---------------
2 * yo = yoyo
Reply

Marsh Posté le 22-06-2006 à 23:30:10    

on te l'enregistre si tu veux :p

Reply

Marsh Posté le 22-06-2006 à 23:34:04    

si tu veux conserver les p une solution possibles :

Code :
  1. * {
  2.   margin:0;
  3.   padding:0;
  4.  }
  5.  form {
  6.   position: absolute;
  7.   top:0;
  8.   right:0;
  9.  }
  10.  form > fieldset > legend + p {
  11.   float:left;
  12.  }


 
Alors les selecteurs sont pas valides pour IE, donc a remplacer par id et classe comme tu le souhaites. en fait les selecteurs c'est juste 'entre nous' pour savoir de kel element on parle.
 
Edit : conseil qui vaut ce qu'il vaut. Toujours utiliser des marges et un padding fixés a une valeur par défaut, que l'on maitrise, a l'ensemble des éléments d'un document.
c'est le but du *.
De cette maniere quelque soit le navigateur, tu partiras sur des marges et padding par défaut connus et maitrisés.


Message édité par afbilou le 22-06-2006 à 23:36:43
Reply

Marsh Posté le 23-06-2006 à 00:06:53    

afbilou >> puisqu'on en parle...
 
On voit souvent dans un formulaire, soit des <p> soit des <br/> pour marquer les différents groupes de <label><input>
 
Me suis aussi toujours demandé ce que sémantique est le mieux...
 
Aucun des 2 je suppose...
 
Et ensuite si on veux joué sur les espacements entre les lignes, modifié le style des 2...etc
 
J'aimerais etre fixé, sémantiquement :D

Reply

Marsh Posté le 23-06-2006 à 20:57:38    

En essayant ceci, j'ai le résultat attendu :

Code :
  1. #rechercher fieldset{border: 0 none;}
  2. #rechercher legend{display:none;}
  3. #rechercher label,input {display:inline; float:left;}
  4. #rechercher{
  5. position: absolute;
  6. width: 400px;
  7. height: 2em;
  8. top: 1px;
  9. right: 1px;
  10. }
  11. #rechercher input.bouton{
  12.   margin: 2px 2px 2px 2px; padding: 0; height: 23px; width: 55px; background-image: url("http://www.avelif.info/medias/images/recherche/Google.png" ); vertical-align:middle;
  13.   border: 1px solid #333; cursor: pointer; color: white; background-color: white;
  14. }
  15. #rechercher input {
  16.   color:#000; vertical-align: middle;display: inline; border: 1px solid #333;
  17.   height: 22px; margin: 2px 2px 2px 2px;font-size: 90%; padding: 0;}
  18. #rechercher label {
  19. color:#fff;display: block;border: 0 none; font-weight: bold;margin:6px 0 0 0;padding:0;}


Cependant, cela déplaie beaucoup à ce formulaire : http://www.avelif.info/fr/iffendic [...] tacts.html


---------------
2 * yo = yoyo
Reply

Marsh Posté le 23-06-2006 à 23:43:31    

la meilleure technique pour alligner ses textes et donc coder en css, et d'utiliser quoi exactement pour que se soit compatible avec tout (entre autre, firefox, Ie, 1024x768, 800x600).
Parceque, quand j'utilise  par exemple,  
 
#centre {
   position: absolute;
   left: 50%;
   width: 425px;
   height: 200px;
   margin-top: 130px;
   margin-left: -210px;
}
 
...sous Ie et firefox, celà ne rend pas pareil. Sous firefox, celà fonctionne parfaitement bien alors que dous Ie,il y à un décalage, donc faut-il utiliser quelque chose en particulier ?? (peut-être il vaut mieux utiliser le "%" au lieu de "px"...?).
Merci de m'éclairer un petit peu ;)

Reply

Marsh Posté le 24-06-2006 à 14:47:47    

Merci pour ces infos....
 
Une idée ?
 
EDIT :  
#rechercher label,input {display:inline; float:left;}
 
ça marche mais pourquoi....


Message édité par 2xyo le 24-06-2006 à 16:44:55

---------------
2 * yo = yoyo
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed