Discussion :

[oceane751]

bonjour à tous !!

je voudrais aligner 2 class d'un id l'un à coté de l'autre et non l'un au dessus et l'autre au dessous

mon code 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
 
#haut
{
text-align : center; 
 
 
 
 
}
 
.en_tete
{
background-color: yellow;
 
   width: 200px;
   height: 100px;
 
 
   background-repeat: no-repeat;
   margin-bottom: 5px;
border: 2px solid black;
}

mon 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
18
19
20
 
<div id = "haut">
 
       <div class="en_tete">
                  Compte<br>
                  <a href="page1.html">Lien</a><br>
                   <a href="page2.html">Lien</a><br>
                   <a href="page3.html">Lien</a>
 
                     </div>
 
            <div class="en_tete">
              Information<br>
                  <a href="page1.html">Lien</a>
 
 
 
       </div>
 
       </div>

en faite ce code je le mets en haut de page et à gauche de ma page j'ai un menu
donc voici le code 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
 
#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}
 
.element_menu
{
   background-color: yellow;
   background-image: url("images/search.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
 
}

et 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
18
19
20
 
<div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>        
       </div>

ça vous aidera surement à comprendre...

je cherche mais je ne trouve rien de concluant, ça me rend dingue!!

merci beaucoup de m'aider un ti peu ...

[Kerod]

Tu peux utiliser le positionnement flottant.

Si tu attribues à tes deux div le status de float: left (par exemple) à ce moment ils seront sur la même ligne, il te restera qu'à positionner correctement tes div. En effet, le fait de mettre le float retirera la position par défaut qu'il avait donc il te faudra jouer sur les margin ou même left

[oceane751]

merci pour ta réponse

mais j'aimerais l'ensemble de mon #haut soit aligner au milieu et que les .en_tete soit alignés l'un à coté de l'autre donc j'ai fait :

Code :

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

1
2
3
4
5
 
#haut
{
float : middle; 
}

mais ça ne veut pas se mettre centré

et quand je mets :

Code :

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

1
2
3
4
5
6
7
 
.en_tete
{
.....
 float:left;
.....
}

ça me mets tout mon menu, qui est normalement sur la gauche, à droite...
je voudrais en faite que mon #haut soit au dessus de mon #menu (un peu comme une baniere) et que mes .en_tete soit alignés l'un à coté de l'autre..

[oceane751]

ah non c'est bon
j'ai fait ça :

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
 
#haut
{
float : middle;
width: 760px; 
}
 
.en_tete
{
background-color: yellow;
 float:right;
   width: 376px;
   height: 100px;
 
...
}

j'avais oublié de mettre une taille à mon #haut...

[MasterOfChakhaL]

si tu passes ta feuille de style au validateur, tu verras que la valeur middle n'existe pas pour la propriété float.
Si ton navigateur est bien élevé, il se contentera d'ignorer la ligne incorrecte. Tu peux donc supprimer cette ligne...