> Tous les forums > Forum des Webmasters
 CSS aligner les widgets avec labelSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
galopin01
  Posté le 21/02/2008 @ 11:31 
Aller en bas de la page 
Astucien

bonjour,

Tout est dans le titre : Comment aligner les champs de saisie à 200px par exemple tout en utilisant les labels (alignés à droite... si possible )

... pour obtenir qu.chose comme ça :

Bon, je demande pas qu'on me fasse tout le boulot ! (juste un embryon d'idée...)

Je sais, je peux me passer de label ! Mon ami Google n'étant guère plus causant que vous, je crois que je vais me rabattre sur cette solution...

A+



Modifié par galopin01 le 21/02/2008 15:08
Publicité
selen
 Posté le 21/02/2008 à 16:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maîtresse astucienne

bonjour

pour quelque chose ainsi :

<form method="post" action="traitement.php">
<p class="form">
<label>Votre pseudo</label> : <input type="text" name="pseudo" />
</p>
<p class="form">
<label>Votre nouvelle adresse</label> : <input type="text" name="adresse" />
</p>
</form>

p.form{
text-align:right;
padding-right:5px;
}

si de plus tu veux garder des champs de saisie de taille variable, alors il faut individualiser chaque p.form en donnant le padding adéquat, calculé selon la taille du champ de saisie. (le rendu à différentes résolution n'est sans doute pas assuré...)

galopin01
 Posté le 21/02/2008 à 18:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

bonsoir,

Y'a de l'idée, j'ai fait quelques tests, mais pour l'instant je passe à coté de quelque chose... Pas le temps de continer, je verrai ça... cette nuit à tête reposée !

A+

galopin01
 Posté le 21/02/2008 à 19:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Je suis arrivé à des choses avec des <p class="label1">... mais le seul mérite est un code clean.

Mais je doute que ça passe au validateur... (ça rompt l'association label-widget)

Néanmoins je pense que je me contenterai de ça vu la simplicité du code et la propreté du résultat.

Euh... A propos c'est quoi l'unité de "size" : Apparemment le rapport avec le px est de 1/6.

Y a t-il une explication autre qu'expérimentale ?

A+

elle
 Posté le 21/02/2008 à 19:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

selen
 Posté le 21/02/2008 à 21:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maîtresse astucienne

galopin01 a écrit :

Mais je doute que ça passe au validateur... (ça rompt l'association label-widget)

Euh... A propos c'est quoi l'unité de "size" : Apparemment le rapport avec le px est de 1/6.


l'association ça dépend de for et id :

ex de code valide :

<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />
</p>
</form>

la solution trouvée par "elle" est meilleure car elle évite de s'échiner avec des padding
NB pour que ça marche il faut mettre :

label{
float:left;
width:40%;
text-align:right;
}

l'unité de size est en colonnes= l'espace occupé par une lettre, je pense...

galopin01
 Posté le 21/02/2008 à 23:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

bonsoir,

Trop fort ! Merciiiiiiiiiiiii.

A+

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Les bons plans du moment PC Astuces

Tous les Bons Plans
33,90 €Caméra de surveillance TP-Link Tapo C200 à 33,90 €
Valable jusqu'au 04 Avril

Amazon fait une promotion sur la caméra de surveillance TP-Link Tapo C200 qui passe à 33,90 € livrée gratuitement au lieu d'une quarantaine d'euros ailleurs. Cette caméra se connecte à votre réseau en WiFi et peut ensuite être contrôlée à distance. Elle offre une définition FullHD 1080p, la vision nocturne, la détection de mouvements (recevez une notification si quelque chose est détecté), une alarme sonore et visuelle. Le stockage se fait en local sur une carte MicroSD.


> Voir l'offre
44,99 €Amazon Fire TV Stick 4K Ultra HD à 44,99 €
Valable jusqu'au 05 Avril

Amazon vient de lancer en France un nouveau modèle de son Fire TV Stick, une clé HDMI à brancher sur votre TV. Pour cette occasion, l'Amazon Fire TV Stick 4K Ultra HD est à 44,99 € livrée gratuitement au lieu de 59,99 €. Ce nouveau modèle offre désormais une sortie en 4K pour tous vos contenus en ultra haute définition, est compatible Alexa et possède une télécommande améliorée avec plus de boutons de contrôle. Avec cette clé, vous allez pouvoir voir facilement Prime Video, Netflix, YouTube, Spotify, MyCanal Molotov sur votre TV.


> Voir l'offre
11 €Carte mémoire Samsung 64 Go MicroSDXC Evo Plus U3 à 11 €
Valable jusqu'au 04 Avril

Un vendeur sur Amazon fait une promotion sur la carte mémoire Samsung 64 Go MicroSDXC Evo Plus U3 qui passe à 11 € livrée gratuitement. Elle est idéale pour les téléphones, caméras et appareils photo 4K. Elle est étanche, anti-choc et résiste aux rayons X et aux champs magnétiques. 


> Voir l'offre

Sujets relatifs
Aligner menu à gauche avec Css [réglé]
Hébergement de site avec nom de domaine
Migration PHP 5.3 vers 5.5 ou 5.6 (avec WAMP)
Wordpress : widgets ou thème premium
background css disparait avec le responsive design
Barre intempestive avec FF et pas avec IE
Problème avec free
défaut sur mon site avec FF et pas avec IE
créer mappage avec dreamweaver!
site avec virus que faire
Plus de sujets relatifs à CSS aligner les widgets avec label
 > Tous les forums > Forum Forum des Webmasters