Aligner des div avec des input

**Candygirl** · 05/07/2013, 10h50

Envoyé par rodolphebrd

CandyGirl tu es sous windows?

Oui et avec un inline-block sur le label j'ai la même présentation foireuse que lui ce que je n'ai pas avec un <b> par exemple.

**rodolphebrd** · 05/07/2013, 10h50

CandyGirl

**rodolphebrd** · 05/07/2013, 10h52

Alors que moi, j'ai un bon rendu avec inline-block sur le label...

**Candygirl** · 05/07/2013, 10h55

Ben non GG à toi Rodolph, le véritable problème de base était le display:inline sur le div

@pc75

Un b serait sémantiquement plus adapté vu que tu veux mettre en exergue les fautes. Rien ne t'empêche de supprimer l'effet bold avec un font-weight:normal. Le inline-block dessus ne me semble servir à rien à part être éventuellement générateur de problème sur de vieux navigateurs.

Ensuite je m'interroge toujours sur ta motivation à ne pas mettre de doctype ? même si sur cet aspect esthétique ça te simplifie un peu la vie...

**rodolphebrd** · 05/07/2013, 10h59

Petite remarque :

C'est toujours compliqué à maintenir et déboguer lorsque les styles de mises en forme sont insérés dans le JavaScript.

Quand on peut le faire, il vaut mieux bien séparer chaque langage: HTML/CSS/JavaScript.

**pc75** · 05/07/2013, 11h07

Envoyé par Candygirl

Ben non GG à toi Rodolph, le véritable problème de base était le display:inline sur le div

@pc75

Un b serait sémantiquement plus adapté vu que tu veux mettre en exergue les fautes. Rien ne t'empêche de supprimer l'effet bold avec un font-weight:normal. Le inline-block dessus ne me semble servir à rien à part être éventuellement générateur de problème sur de vieux navigateurs.

Ensuite je m'interroge toujours sur ta motivation à ne pas mettre de doctype ? même si sur cet aspect esthétique ça te simplifie un peu la vie...

J'ai remplacé la balise span par une balise b et effectivement, les fautes sont encore mieux mises en évidence.
J'ai également remplacé le début par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">

**pc75** · 05/07/2013, 11h07

Envoyé par rodolphebrd

Petite remarque :

C'est toujours compliqué à maintenir et déboguer lorsque les styles de mises en forme sont insérés dans le JavaScript.

Quand on peut le faire, il vaut mieux bien séparer chaque langage: HTML/CSS/JavaScript.

OK, mais dans mon cas, je ne vois pas comment faire.

**rodolphebrd** · 05/07/2013, 11h12

La remarque valait surtout pour la balise label (b maintenant) et pour le style Css inline dans le Html (dans vos premiers posts).

**pc75** · 05/07/2013, 11h28

Encore une dernière (j'espère) chose si on veut atteindre la perfection ; Ci-joint, l'alignement à droite.

Pour contourner ça, j'ai modifié les styles comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#aff3 {
	width: 1004px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	display: none;
	background-color:lightgrey;
}

Ca ne me parait pas trop académique comme méthode, non ?

**rodolphebrd** · 05/07/2013, 12h26

Envoyé par pc75

Ca ne me parait pas trop académique comme méthode, non ?

Pourquoi ?
Est-ce clair ? -->oui
Est-ce facile à maintenir ? --> oui
Gagné-je du temps ? --> oui

**pc75** · 05/07/2013, 13h30

OK.

Merci encore pour le coup de main.

**Candygirl** · 05/07/2013, 14h36

Envoyé par pc75

Ca ne me parait pas trop académique comme méthode, non ?

Je suppose que tu fais référence aux 4 pixels ajoutés à ton div pour combler l'espace qui apparaît avec le doctype ?

Effectivement ce n'est pas très académique surtout que cette valeur peut varier d'un navigateur à l'autre. Il y a deux façons de réglé ce problème (IE8 +):

- ajouter la propriété border-sizing sur ton textarea

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#text1,#text2,#text3 {
            -moz-box-sizing: border-box; 
             box-sizing: border-box;
}

de cette manière tes textarea feront exactement la taille voulue et pas un peu plus.

- Une autre approche et qui répond directement à ta question de base

Envoyé par pc75

Y-a-t-il un algorythme qui permet d'ajuster la longueur de mes div à la longueur des zones de saisie desquelles elles dépendent.

En résumé comment faire pour que mes div aient la même longueur que mes zones de saisie ?

C'est réalisable en déclarant un display:table (IE8+) sur le div parent du textarea et de ton div #aff3. Cela permet de s'affranchir de la déclaration à double du width. L'idée est de définir une taille retreinte de tableau qui sera automatiquement agrandie en fonction de la taille du textarea mais qui maintiendra le div à la même taille:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="display:table;width:1px">
	<textarea name="texte3"  id="texte3" rows="10" style="width:1000px;" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3" style="background-color:lightgrey;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>

**pc75** · 05/07/2013, 15h10

Merci pour tout.

Aligner des div avec des input

HTML

Discussions similaires

Partager

Partager