Aller au menu - Aller au contenu

Aligner ses formulaires sans tableaux

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page Précédente  1  2  3  4 
Pseudo Commentaire
Page Précédente  1  2  3  4 
Hors ligne matheous64 # Posté le 01/10/2008 à 12:02:40
My name is os, mac os
Avatar

 Très bon tuto, bien expliqué et surtout très simple! Ainsi que très utile, bravo!
Image utilisateur

 
Hors ligne canadou # Posté le 22/11/2008 à 22:47:49
Avatar

 Tout simplement, super tuto !
Secret (cliquez pour afficher)
Note : 20/20


Canadou, le Québékwé ! :magicien:

Site Web ....
Recommencé du début pour mieux repartir :D
 
Hors ligne apognu # Posté le 29/11/2008 à 14:26:44
Avatar

 Méthode simple et connue, mais toujours bonne à expliquer. Un petit bémol néanmoins, aucune remarque sur le fait que, pour une fois, les tableaux sont la bonne solution à la présentation d'un formulaire.

Je vais sûrement me faire incendier par les gens qui brulent tout ce qui ressemble à un tableau, mais réfléchissez-y, un formulaire, c'est une présentation de données tabulaires, sauf qu'au lieu d'être écrites en dur, c'est à l'utilisateur de remplir les blancs.

Donc d'un point de vue sémantique, les deux méthodes se valent.

Sincèrement, Antoine.
Antoine POPINEAU -- http://www.apognu.net
 
Hors ligne MaxiGolden # Posté le 16/12/2008 à 23:35:03
Avatar

 Rien a dire simple efficace rapide beau magnifique super...
Recrute codeur php-----> Post de recrutement
Image utilisateur
 
Hors ligne Can # Posté le 30/12/2008 à 22:04:34
Post inutilé détecté =>
Avatar

Ville : Strasbourg
Pays : France métropolitaine

 Je cherche ça depuis des mois merci

Secret (cliquez pour afficher)
20/20
Image utilisateur


Faites tourner le lien : MER IL ET FOU
 
Hors ligne moustix # Posté le 04/01/2009 à 03:36:54
Avatar

Ville : St quentin fallavier
Pays : France métropolitaine
études : Université de Lyon

 Rien à dire ! C'est nickel ! Merci beaucoup pour ton tuto ! :)
Hors ligne soblonde78 # Posté le 19/02/2009 à 21:12:30
Avatar

études : CNAM

 parfait , merci
Hors ligne Jean_Bouchat # Posté le 24/03/2009 à 20:28:58
Rien n'est parfait !

 Rapide et facile... Génial quoi...
A la recherche d'un travail rémunéré (5€ sont parfois suffisants..) :)
 
Hors ligne Eko57 # Posté le 18/04/2009 à 17:51:04
Avatar

 Tuto clair et rapide.

19/20, merci ;)
Image utilisateur
 
Hors ligne cypher666 # Posté le 16/05/2009 à 13:59:46
Heu....
Avatar

Ville : Paris
Pays : France métropolitaine

 Très bon tuto, rien à dire, même si je soutient apognu qui a précisé la possibilité d'un tableau ^^

EDIT: 100ème commentaire :D

Image utilisateur

Image utilisateur

Site non officiel de mon lycée A VOIR!!!

Quand vous allez sur un site amateur, cliquez sur les publicités, ça rapporte de l'argent au webmaster et vous ça ne vous coûte rien :)
Image utilisateur



 
Hors ligne dada85 # Posté le 22/05/2009 à 16:17:58

études : ENI Nantes

 euh, au risque de dire une connerie, niveau css, nikel rien à dire, mais bon quand je passe ma page html au validateur W3C, aïe !!!
o_O
 
Hors ligne Cr@ounch # Posté le 05/07/2009 à 13:54:02
Tout est bio qui finit bio…
Avatar

 Faudrait retravailler la partie sur les options: le <label> ne se met pas sur sur "Sexe" mais sur "Homme" et "Femme". Du coup, le CSS ne marche pas comme voulu... Sinon, bon tuto.
Viendez tous! Aide à la réalisation de captchas performants et accessibles
Image utilisateur
Image utilisateur
Image utilisateur
E6750 @ 2.66 GHz | nVidia 7300GT | 2Go RAM | 250Go HDD
"Linux a un noyau, Windows n'a que des pépins… Mac, on ne sait pas encore, la pomme n'est pas complètement mangée."
Je fais du théâtre, mais je n'aime pas les S.C.E.N.E.
 
Hors ligne berli888 # Posté le 15/07/2009 à 17:48:07
-> Supinfo Paris
Avatar

études : SUPINFO Île-de-France à Paris

 Merci pour ce tutoriel !
Image utilisateur
 
Hors ligne Lone # Posté le 24/08/2009 à 21:23:03
On est tous un peu zéro
Avatar

 merci, tuto très utile
Secret (cliquez pour afficher)
langage C : ||||||||||||||||||||||||||||
langage C++ : |||||||||||||||||||||||||||||
XHTML / CSS : ||||||||||||||||
PHP / MySQL : ||||||||||||||||||||||||||||

Attention cela correspond a mon avancée sur les tutos, pas à ma connaissance dans les langages.
myUseBar (v1.0)

 
Hors ligne romilly # Posté le 26/08/2009 à 15:16:06

Merci pour ce tuto.

Autre solution, très similaire:

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
label
{
	position: absolute;
	width: 150px; /* on laisse 150px pour les étiquettes */
	text-align: right;  /* texte des étiquettes aligné à droite */
}
input
{
	margin-left: 160px; /* 150px pour "label" + 10px de blanc */
}


Et tant qu'on est dans les formulaires: si vous voulez personnaliser la présentation, par exemple en évitant que chaque "input" soit dans un cadre, on peut commencer par supprimer toutes les bordures, toutes les marges, internes comme externes, pour l'ensemble du document:

Code : CSS
1
2
3
4
5
6
*
{
	border: 0;
	margin: 0;
	padding: 0;
}


Ensuite, on est libre de présenter les formulaires à sa guise:

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
input
{
	margin-left: 160px; /* 150px pour "label" + 10px de blanc */
	border-bottom: 1px solid #264471; /* le champ à remplir est juste souligné d'un trait bleu */
	padding: 2px; /* pour "aérer" un peu en évitant que la bordure colle au texte */
	font-size: 1.2em; /* on indique la taille de caractère souhaitée pour éviter des caractères minuscules; tout dépend bien sûr de la taille des caractères dans l'élément parent; parfois, 1em suffit. */
}

/* Le champ sélectionné a une couleur d'arrière-plan, ce qui permet de tout de suite voir où on en est dans le formulaire; c'est une astuce recommandée pour améliorer l'accessibilité. */
input:focus
{
	background: #dde; /* violet très clair */
}
Hors ligne 6pri1 # Posté le 27/08/2009 à 14:39:37
Codeur/Jongleur/Eleveur
Avatar
Flux RSS
close

Ville : Versailles
Pays : France métropolitaine

 Merci pour ce tuto. Simple et très utile !
Image utilisateur

La parole est d'argent et le silence endort... (Clique !) ;)
Image utilisateur



 
Hors ligne christophetd # Posté le 30/08/2009 à 21:12:14
is watching you
Avatar
Flux RSS
close

Ville : Gap
Pays : France métropolitaine

 Bon tuto, (que je qualifierai d'ailleurs plus de <acronyme valeur="Truc et Astuce">TeA</aconyme> soit dit en passant), bien utile. :)
Image utilisateur
Mes tutoriels :
Utilisation d'un ORM : les bases de Doctrine (en cours de reconstruction)
Un système de news sans base de données

Image utilisateur


Image utilisateur


 
Hors ligne punkka # Posté le 03/10/2009 à 17:32:21
Cherche invit beta Starcraft 2
Avatar

Ville : Evry
Pays : France métropolitaine
études : TELECOM SudParis

 Petit tutoriel sympathique !

Il faudrait voir voir si l'utilisation de

Code : CSS
1
display : inline-block

ne serait pas plus adaptée dans certaines situations.
Enfin mon script perso !!

 
Hors ligne cyril5789 # Posté le 06/10/2009 à 20:04:26
Technicien Supérieur !
Avatar
close

Ville : Bischoffsheim
Pays : France métropolitaine

 Tiens je viens de penser à un truc.

Dans le titre du tuto "Aligner ses formulaires sans tableaux "

Y'a pas de "X" à tableau ! vu que y'en a pas ^^ ( = 0 )
Image utilisateur
 
Hors ligne Garouserique # Posté le 27/10/2009 à 17:20:56

Ma solution pour avoir un fonctionnement correct de la balise input radio :

Code : HTML
1
2
3
<label>Sexe:</label>
<input type="radio" name="sexe" id="sexe1" /><label for="sexe1">Homme</label>
<input type="radio" name="sexe" id="sexe2" /><label for="sexe2">Femme</label><br />


Code : CSS
1
2
3
4
input + label {
  display:inline;
  float:none;
}


;) Ce n'est pas parfait, mais ça corrige très simplement le problème.

Cordialement
Hors ligne xababafr # Posté le 22/11/2009 à 11:42:09
Teeworlds
Avatar

 En effet ce tutoriel m'a aidé! Merci beaucoup! :)
Image utilisateur
Il est encore temps de changer! Si tu as IE, passe à Firefox! ;)
Un moteur d'actualités performant : http://www.modene.info/
Si votre sujet est résolu, passez-le au vert (en résolu) Image utilisateur ;) !
projet en cours[alpha] : I I I I I I I I I I I I I I I I I I I I
Image utilisateur
 
Hors ligne LCaba # Posté le 02/12/2009 à 09:25:16
C'est toi la citation !
Avatar

Ville : Charmauvillers
Pays : France métropolitaine

 Ben voilà un tuto concis et très utile ;) merci
C'est toi la signature !

Image utilisateur MUSIQUE : découvrez mon frère, Kryl
 
Hors ligne eloi-du-67 # Posté le 21/12/2009 à 11:52:28
l'informatique, j'adore !
Avatar

Ville : Altenstadt
Pays : France métropolitaine

 ce tuto est génial et super merci beaucoup c'est exactement ce que je cherchais !Secret (cliquez pour afficher)
21/20 ^^
ELOI
Image utilisateur

un site sympa sur les pétards : pétards-prod
et un jeu sympa : la brute
 
Connecté Aravis # Posté le 23/12/2009 à 10:59:04
apt-get install Windows
Avatar

 Simple mais efficace c'est ce que je cherchais.
Image utilisateur
 
Pour accéder à cette section
Connectez-vous !
connexion_rpx