[Résolu]Alignement CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu]Alignement CSS

2xyo

2*yo = yoyo

Bonsoir à tous,

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

Code :

<div id="rechercher">
<form action="http://www.avelif.info/fr/iffendic/eolienne/recherche.html" enctype="multipart/form-data" method="post" >
<fieldset id="formrechercher">
<legend>Recherche</legend>
<p>
<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>
<input tabindex="2" size="25" name="recherche" id="recherche" type="text" value="Saisir un ou plusieurs mots" onfocus="this.value=''" />
</p>
<p>
<input tabindex="3" name="submit" type="submit" value="rechercher" class="bouton" />
</p>
</fieldset>
</form>
</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

Publicité

afbilou

pouet your life

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.

2xyo

2*yo = yoyo

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

afbilou

pouet your life

on te l'enregistre si tu veux

afbilou

pouet your life

si tu veux conserver les p une solution possibles :

Code :

* {
margin:0;
padding:0;
}
form {
position: absolute;
top:0;
right:0;
}
form > fieldset > legend + p {
float:left;
}

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

xtof_83

Freeride Spirit

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

2xyo

2*yo = yoyo

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

Code :

#rechercher fieldset{border: 0 none;}
#rechercher legend{display:none;}
#rechercher label,input {display:inline; float:left;}
#rechercher{
position: absolute;
width: 400px;
height: 2em;
top: 1px;
right: 1px;
}
#rechercher input.bouton{
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;
border: 1px solid #333; cursor: pointer; color: white; background-color: white;
}
#rechercher input {
color:#000; vertical-align: middle;display: inline; border: 1px solid #333;
height: 22px; margin: 2px 2px 2px 2px;font-size: 90%; padding: 0;}
#rechercher label {
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

lyneus

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

2xyo

2*yo = yoyo

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

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu]Alignement CSS

Sujets relatifs
[C#/Flash/ RESOLU] Soucis de cache IE avec donnees externes a charger	[xsl][Résolu] problème de if
[resolu]Remplir une listbox avec bdd access	[RESOLU]erreur de syntax
[CSS] hover avec des images? Positionnement, FF, IE	procedure trop longue résolu
[Résolu]Récupérer l'id du dernier enregistrement d'une table MySql	[HTML/CSS]alignement texte différents das une même cellule[résolu]
[XHTML / CSS] problème d'alignement horizontal [Résolu]	[RESOLU][CSS] Pb d'alignement avec balise <ul> -> Merci Lord ii !
Plus de sujets relatifs à : [Résolu]Alignement CSS

Page générée en 0.066 secondes