Discussion :

[amateurprg]

Salut

Un drole de problème m'oblige à demander vos bons conseils, car j'ai perdu beaucoup de temps à essayer de trouver l'erreur sans résultats.
j'ai un div "cadre" centré, qui contient deux div alignés horizontalement l'un avec l'autre, mais le deuxième (celui de droite) est décalé vers le bas d'au moins 40px par rapport au premier, qui lui, est bien collé au bord haut du div cadre (qui les contient).
Le div cadre a un padding de 10px.

Le code HTML :

Code html :

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
<div id="cadre">
	<div id="champs">
		<div class="contacts" id="contact1">
			<label class="gras">ADRESSE :</label><p/>
				36 Rue des Bateliers<br/>
				07100 Pimoniers, FRANCE.<p/>
				<label class="gras">MAIL :</label><p/>
				contact@voyage.com
		</div>
		<div class="contacts" id="contact2">
			<label class="gras">FORMULAIRE :</label><p/>
			Si vous êtes déjà un(e) membre validé(e) de voyage.com,<br/>
			Vous pouvez utiliser le formulaire situé dans la zone "membres".<br/>
			Pas besoin d avoir une adresse email.
		</div>
	</div>
</div>

La page CSS :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#cadre
{
position:relative;
width:90%;
margin:auto;
padding:10px;
text-align:center;
font-size:20px;
font-style:none;
font-weight:none;
border-radius:10px;
margin-bottom:20px;
background-color:cyan;
}
 
#champs
{
position:relative;
text-align:center;
width:800px;
border:double;
padding:10px;
margin:auto;
}
 
.gras
{
position:relative;
font-weight:bold;
}
 
.contacts
{
position:relative;
top:0;
text-align:left;
display:inline-block;
height:100%;
margin-left:auto;
margin-right:auto;
}
 
#contact1
{
position:relative;
width:300px;
background-color:red;
}
 
#contact2
{
position:relative;
width:480px;
background-color:blue;
}

En passant, cherchez pas la ville PIMONIER, FRANCE : Elle n'existe pas

J'ai mis une couleur à chaque div pour trouver le problème, c'est une sorte de debug

Voilà, si vous pouviez m'aider ce serait cool

NB: Pas moyen içi de mettre une apostrophe dans un mot sans que la ligne devienne rouge :/

[Invité]

Bonjour,


Une solution (parmi d'autres) :

Code :

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

1
2
3
4
5
6
7
8
#champs
{
  display:table;
}
#champs > div
{
  display:table-cell;
}

Et si tu veux être "responsive", évite les dimensions en pixels et privilégie les %.

[amateurprg]

Salut et Merci jreaux, mais je comprend pas, j'ai pas de table dans mon code et sinon que puis-je faire avec cette exemple ?

[Invité]

Bonjour,

tu manques de curiosité, ou tu n'as pas (encore) le réflexe ?

• CSS - display

display:table; / display:table-cell; permet de simuler le comportement d'une <table>.

[amateurprg]

J'ai trouvé la solution

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
 
.contacts
{
position:relative;
top:0;
left:0;
text-align:left;
margin-left:auto;
margin-right:auto;
display:inline-block;
}
 
#contact1
{
width:240px;
background-color:red;
}
 
#contact2
{
width:480px;
background-color:blue;
vertical-align:top;
}

Merci de me dire ça, mais si je suis là c'est parce que j'ai cherché d'abord.

En tous cas la solution était de mettre inline-block dans la classe "contacts", et de mettre vertical-align au deuxième div "contact2".


EDIT : Ah tu disais ça pour le display table, oui c'est juste tu as raison je ne suis pas allé voir, surement car j'ai trop cherché sur le net ces temps-ci pour pleins de problèmes de codes.
Merci de ton aide encore une fois.

[Invité]

Rassure-toi, on a tous commencé en construisant des "usines à gaz".

Plus tu apprendras, plus tu sera capables d'optimiser ton code, et d'utiliser les meilleures solutions.

Mais pour ça, il faut :

• RECHERCHER
• TESTER
• APPRENDRE