alignement horizontal de 2 class

Version imprimable

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:

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:

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:

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:

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!!8O

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

27/12/2006, 05h11
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 ;)
27/12/2006, 13h38
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:

1 2 3 4 5 #haut { float : middle; }
mais ça ne veut pas se mettre centré:?

et quand je mets :
Code:

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..

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

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...:roll:

27/12/2006, 21h22
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...