Aligner deux éléments l'un en dessous de l'autre

**Hilary** · 10/07/2010, 02h09

Bonsoir à tous!

J'aimerais savoir comment aligner ces deux numréos de téléphone l'un en dessous de l'autre.

Voici la capture d'écran:

**tsunamichups** · 11/07/2010, 11h13

salut, tu peu mettre les informations dans 4 div
2 div de même largeur qui contiendraient les descriptif de numéro et les deux autre div qui viendraient se coller a la droite qui elles contiendraient les numéros

je te donne un exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style tyle="text/css">
.info-num
{
width:250px;
float:left;
}
 
.numero
{
float:left;
width:10px;
}
</style>
 
<div class="info-num">Info num 1</div>
<div class="numero">0102030405</div>
 
<div class="info-num">Info num 2</div>
<div class="numero">0607080910</div>

**marco_fot_hxc** · 12/07/2010, 08h29

Bonjour,

personnellement je proposerai quelque chose dans ce style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<style>
div#info-wrapper {
	width: 180px;
}
 
div.info {
	width: 100%;
}
 
div.info span {
	display: inline-block;
}
 
span.num {
	float: right;
}
</style>
<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<div id="info-wrapper">
	<div class="info">
		<span class="nom">mon nom</span>
		<span class="num">01-02-03-05-04</span>
	</div>
	<div class="info">
		<span class="nom">mon nom</span>
		<span class="num">01-02-03-05-04</span>
	</div>
</div>
 
</body>
</html>

En espérant que ça t'aide...

Bon courage

**Bisûnûrs** · 12/07/2010, 08h32

Envoyé par tsunamichups

je te donne un exemple

Y a de l'idée. Mais pourquoi uniquement des div ? Il existe d'autres éléments que les div ...

**marco_fot_hxc** · 12/07/2010, 08h35

Au passage, on pourrait aussi se dire que, sémantiquement, passer par une liste serait plus juste. Donc un ul ou chaque "lot" nom+num est encapsulé dans un li.

Si tu vois pas ce que je veux dire n'hésites pas

**tsunamichups** · 13/07/2010, 00h17

Envoyé par Bisûnûrs

Y a de l'idée. Mais pourquoi uniquement des div ? Il existe d'autres éléments que les div ...

J'ai trouvé ça plus rapide

mais avec <span></span> ça marche aussi

**vodiem** · 13/07/2010, 01h15

salut à tous,

étant donné que le bloc numéro suit il n'est pas nécessaire de définir son style pour son positionnement:

Code HTML :

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

1
2
<span style="width:100px;float:left;">le nom long</span>01-02-03-05-04</br>
<span style="width:100px;float:left;">nom</span>01-02-03-05-04</br>

il y a encore la solution de définir ca dans un tableau:

Code :

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

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
	<td>le nom long</td><td>01-02-03-05-04</td>
</tr>
<tr>
<tr>
	<td>nom</td><td>01-02-03-05-04</td>
</tr>
</tr>
</table>

qui aura l'avantage de s'adapter automatiquement en fonction du contenu.
(prévoir un espacement entre cellule)

**Bisûnûrs** · 13/07/2010, 07h40

Envoyé par tsunamichups

J'ai trouvez ca plus rapide

mais avec <span></span> ca marche aussi

...
T'as raison, remplace une balise vide de sens par une autre balise vide de sens. Le mot sémantique te dit-il quelque chose ?

**tsunamichups** · 13/07/2010, 09h57

Au niveau de la validation w3c ca passe

Mais qu'aurais tu mis toi plutôt que des div ou des span ?
(les table c'est dépassé je les cites plus)

**Bisûnûrs** · 13/07/2010, 10h25

Comme l'a dit marco_fot_hxc, on aurait pu utiliser une liste non ordonnée pour baliser ces microformats. Voire même une liste de définition.

Et le validateur du W3C ne vérifie en rien la sémantique, il vérifie juste si la structure HTML (attributs et imbrication des éléments) est correcte.

**tsunamichups** · 13/07/2010, 22h22

Ok
Mais qu'apporte la sémantique sur une page de code ? sur une appli toute entière ?
Je connais le terme, mais pas ce que ca apporte.

**12monkeys** · 18/07/2010, 14h59

Bonjour

Cela facilite entre autre l'accessibilité web et le référencement (placer un mot clé dans un titre aura un peu plus d'impact que dans une balise div)...

Utiliser la sémantique c'est préciser ce que contiennent les balises : du texte dans les paragraphes, du contenu important dans les titres, des éléments dans les listes... Tout mettre dans des div ne permet pas de savoir à quoi correspond le contenu...