alignement de boites

Le problème exposé dans ce sujet a été résolu.

Bonjour, n'étant peut familier avec la css, mais obliger d'y passer. J'ai un problème avec les "boites" (div, article, aside, …)

j'aimerai aligner ma boite aside avec une autre horizontalement :

Image utilisateur

j'ai essayer avec "float : left" sans sucés. avec des tableaux, sans succès non plus :/

Merci de votre aide.

+0 -0

Bonjour,
sans de plus amples informations, on aura du mal à te conseiller… Donne nous ton code source, ou mieux un lien vers ta page :)

Pour aligner horizontalement, il y a plusieurs choix en CSS, dont notamment :

  • Faire un "float : left;" sur tes blocs (en t'assurant que tu as bien mis un "width" à chacun de tes blocs)
  • Transformer tes blocs avec "display : inline-block;" pour qu'ils réagissent comme du texte (pareil, pense à mettre une "width" à tes blocs). Tu pourras alors gérer leur alignement avec "text-align". Cette solution est particulièrement utilisée lorsque la taille du bloc parent peut être amener à changer, les blocs à aligner vont alors automatiquement prendre la place et aller à ligne tout seul s'il n'y a plus de place en largeur :)
+1 -0

Re,

j'ai testé le 2 sans succès non plus, je vous envoie le code source des pages :

ici la page de connexion (qui s'appelle "accespannel.php" login: pi mdp: kangourou ) 

1
Le contenu à été supprimé par son auteur. Il reste tout de même la partie css.

ici la page concernée (qui s’appelle "pannel.php") :

1
Le contenu à été supprimé par son auteur. Il reste tout de même la partie css.

et la page CSS (qui s'appele "allcss.css") :

 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }
  
a.type1 { color: red; }
a.type1:hover { color: yellow;}
a.type2 { color: blue; }
a.type2:hover { color: green; }
.menu
 {
  border-top:    1px solid black;
  border-bottom: 1px solid black;
  border-left:   1px solid black;
    border-right:  1px solid black;
  margin-left:   5%;
  margin-right:  5%;
  margin-top:    2%;
  margin-bottom: 0%;
  text-align:    center;
  background-color: rgb(39,40,34); /* Pour les navigateurs anciens */
    background-color: rgba(39,40,34,0.8); /* Pour les navigateurs plus récents */
  color: rgb(0,0,0);
  color: rgba(255,255,255,1);
  
}
.page
 {
  border-top:    0px solid black;
  border-bottom: 0px solid black;
  border-left:   1px solid black;
    border-right:  1px solid black;
  margin-left:   5%;
  margin-right:  5%;
  margin-top:    2%;
  margin-bottom: 2%;
  text-align:    center;
  background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.9);
  color: rgb(39,40,34);
  color: rgba(39,40,34,1);
}
.panel
{
  border:    1px solid black;
  margin-left:   1%;
  margin-right:  1%;
  margin-top:    1%;
  margin-bottom: 1%;
  text-align:    center;
  background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,1);
  color: rgb(223,223,223);
  color: rgba(223,223,223,1);
}




/* ici mes 2 "articles" qui posent probléme*/


.pan
{
  width : 50%;
  display : inline-block;
  border :    1px solid black;
  margin-left:   0%;
  margin-right:  50%;
  text-align: left;
}
.panel2
{
  width : 50%;
  display : inline-block;
  border :    1px solid black;
  margin-left:   50%;
  margin-right:  0%;
  text-align: right;
}








/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }

+0 -0

Bonjour,

Ton CSS ne fait pas ce que tu veux pour deux raisons :

  • Tu n'as pas besoin de spécifier un margin-right: 50%. Ton bloc a deja une largeur de 50%, si tu ajoutes un margin, il va réserver une place de plus de 50% (width + marge) ! (et donc, plus de place pour placer le second bloc à sa droite.
  • width: 50% : oui ! Mais petit détail, la largeur n'inclut pas les bordures, donc ton bloc en réalité fait 50% + 1px + 1px. Pour régler cela, tu peux utiliser la propriété box-sizing: border-box. Sans rentrer dans les détails, ça permet entre autre de dire que width doit inclure les bordures, ainsi ton bloc fait réellement 50%.

Donc en utilisant les floats, ça donne :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.pan
{
  width : 50%;
  float: left;
  border : 1px solid black;
  text-align: left;
  box-sizing: border-box;
}

.panel2
{
  width : 50%;
  float: left;
  border : 1px solid black;
  text-align: right;
  box-sizing: border-box;
}
+3 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte