[Résolu] Positionner menu <ul>

Bonjour,

Débutant et nouveau arrivant sur Alsacréations, je sollicite votre aide pour aligner mon menu de façon horizontal. Je souhaiterais pouvoir aligner chaque bloc <ul> les un après les autres à l'horizontal (A la suite).

J'ai trouvé beaucoup de code css pour aligner les balises <li> pour faire un menu horizontal, mais ce n'est pas ce que je cherche.

<div id="cadre1">

	<div id="cadre2">
                <ul> 
                    <li><a href="#" title="#">Lien 1</a></li> 
                    <li><a href="#" title="#">Lien 2</a></li> 
                    <li><a href="#" title="#">Lien 3</a></li> 

                </ul>

                <ul> 
                    <li><a href="#" title="#">Lien 1</a></li> 
                    <li><a href="#" title="#">Lien 2</a></li> 
                    <li><a href="#" title="#">Lien 3</a></li> 

                </ul>
    </div>

</div>

J'espère avoir été clair dans mes explications
Modifié par Dev35 (24 Nov 2010 - 03:20)

Salut,

/* [b]Technique 1 :[/b]
Si les <li> sont alignés via display:inline, et que les <a> ont toujours leur rendu par défaut : */
div#cadre2 ul { display:inline; }


/* [b]Technique 2 :[/b]
Peut-être un problème sur IE7 si les <li> et/ou les <a> sont en display:block */
div#cadre2 ul { display:inline-block; }
div#cadre2 ul { display:inline; } /* Pour IE7 via commentaires conditionnels ou autre */


/* [b]Technique 3 :[/b] */
div#cadre2 { overflow:hidden; }
div#cadre2 ul { float:left; }

On pourrait envisager une 4ème technique à base de display:table-cell (mais pas comptible IE7), et une 5ème avec du positionnement absolu si le design le permet.
Modifié par BeliG (22 Nov 2010 - 16:25)

Hey, j'ai comme un mauvais pressentiment, tu peux nous montrer le code actuellement en place ou un croquis / screenshot de ce que t'aimerais obtenir ?

Tes <ul> sont bien des menus indépendants qui n'ont rien à voir entre-eux, hein ?

merci d'avoir repondu
j'ai testé avec une nouvelle page et css.

j'utilise la technique1

div#cadre2 li  {
	display:inline;
}

div#cadre2 ul {
	display:inline;
}

les blocs se positionnent bien a coté des autres, mais les liens s'alignent également a l'horizontal.
Je souhaiterais qu'ils restent a la vertical.

j'ai testé avec display: inline-table / display: inline-block.
Mais ce n'est pas bon ou j'utilise mal display.

<div id="cadre1">

	<div id="cadre2">
                <ul> 
                    <li><a href="#" title="#">Lien 1</a></li> 
                    <li><a href="#" title="#">Lien 2</a></li> 
                    <li><a href="#" title="#">Lien 3</a></li> 

                </ul>

                <ul> 
                    <li><a href="#" title="#">Lien 1</a></li> 
                    <li><a href="#" title="#">Lien 2</a></li> 
                    <li><a href="#" title="#">Lien 3</a></li> 

                </ul>
    </div>

</div>

Modifié par Dev35 (22 Nov 2010 - 17:04)

Faudrait le code CSS, le code HTML je l'ai déjà.

Et concernant ma remarque juste au dessus ?

voici un screen.

http://achat2po.com/screen.png

je souhaiterais que ça s'aligne de cette façon.
Je débute tout juste, donc les blocs sont dans la meme div mais chaque <ul> est indépendante.
Modifié par Dev35 (22 Nov 2010 - 17:13)

Ok, donc oublie les techniques 1 et 2. Utilise soit du flottant, soit du table-cell si IE7 n'est pas une contrainte.

div#cadre2 { overflow:hidden; } 
div#cadre2 ul { float:left; width:...px; height:...px; }

Et pour les traits de séparation, il faudra que tu places la bordure (ou l'image) sur la gauche de tes <ul>, et que tu l'annules pour le premier enfant :

div#cadre2 ul { background:url(separation.jpg) repeat-y left; } 
div#cadre2 ul:first-child { background:none; }

Fais juste attention à bien respecter la largeur imposée par ton conteneur (#cadre2) quand tu calculeras les tailles & marges de tes éléments.

Plutôt qu'utiliser une image pour la séparation, une bordure me semblerai tout aussi efficace.
En jouant avec last-child et first-child et border-left/border-right, tu peux obtenir le même résultats sans image (sachant que la séparation est faites de 2 couleurs si je ne me trompe pas).

@kenor : last-child n'est pas compatible avec IE7/8.

Pour faire sans image (et pour que ça soit compatible IE), il faudrait mettre une bordure à gauche et à droite de chaque <ul>, annuler la bordure gauche du premier élément avec :first-child, et masquer la bordure droite du dernier élément grâce à un conteneur supplémentaire qui englobe les <ul> et qui fait 1px de plus que #cadre2 (ce pixel sera masqué par le overflow:hidden de #cadre2).

Ou si la compatibilité IE7 n'est pas nécessaire, utiliser :before / :after.
Modifié par BeliG (22 Nov 2010 - 18:46)

pas bête l'astuce pour la bordure droite

En ce qui concerne la barre, je gère la chose de cette manière:

.separation {
           position: absolute;
	background: #202020;
	border: 0;
	height: 250px;
	width : 2px;	
}

<hr class="separation" style="left: ....px; top: ....px;">

Modifié par Dev35 (24 Nov 2010 - 03:18)

En ce qui concerne la barre, je gère la chose de cette manière:

.separation {
position: absolute;
	background: #202020;
	border: 0;

	height: 250px;
	width : 2px;	
}

<hr class="separation" style="left: ....px; top: ....px;">

En ce qui concerne la barre, je gère la chose de cette manière:

.separation {
           position: absolute;
	background: #202020;
	border: 0;
	height: 250px;
	width : 2px;	
}

<hr class="separation" style="left: ....px; top: ....px;">

Modifié par Dev35 (24 Nov 2010 - 03:17)

En ce qui concerne la barre, je gère la chose de cette manière:

.separation {
           position: absolute;
	background: #202020;
	border: 0;
	height: 250px;
	width : 2px;	
}

<hr class="separation" style="left: ....px; top: ....px;">

Merci a tous pour votre aide
Désolé pour les 4 postes a la suite, bug plutôt bizarre avec la barre d'espace.