Problème d'alignement avec des listes imbriquées.

Bonjour à toutes et à tous,

Je débute en CSS et je n'arrive pas à aligner des liste imbriquées.
en gros ce que je veux faire est:

¤aaaaaaaaaaa: bbbbbbbbbb
cccccccccc
dddddddddd

¤eeeeeeeeeee: ffffffffffffff
ggggggggg
alors que j'arrive juste à avoir ça:

¤aaaaaaaaaaa:
bbbbbbbbbbb
cccccccccc
dddddddddd

¤eeeeeeeeeee:
ffffffffffffffff
gggggggggg

Merci d'avance pour le coup de main.
Modifié par ben-j (09 Apr 2010 - 19:09)

Salut,

Un schéma serait certainement plus explicite que ton montage à base de caractères typographiques.

As tu une page en ligne pour voir ton code est être en mesure de t'aider ?

ben-j a écrit :
¤aaaaaaaaaaa: bbbbbbbbbb
cccccccccc
dddddddddd

¤eeeeeeeeeee: ffffffffffffff
ggggggggg
alors que j'arrive juste à avoir ça:

¤aaaaaaaaaaa:
bbbbbbbbbbb
cccccccccc
dddddddddd

¤eeeeeeeeeee:
ffffffffffffffff
gggggggggg

Epic...

BeliG a écrit :
Epic...

Oui mais vu avant… (hé hé)

désolé, c'est vrai que ce n'était pas du tout explicite.

en fait, je veux juste que la 1ere ligne ma liste imbriquée soit à la même hauteur que la ligne de la 1ere liste.
comme cela:

liste1ligne1 : liste2ligne1
------------ liste2ligne2
------------ liste2ligne3

liste1ligne2: liste3ligne1
------------ liste3ligne1

(ne pas tenir compte des pointillés)

Voilà, j'espère que cette fois ci je me suis mieux fait comprendre.
merci

Salut ben-j

J'espère que tu n'as mal pris ma moquerie, c'est de bonne guerre car nous sommes tous ignorants autant que toi… à la base. (faut bien commencer un jour, une nuit, un instant)

Il me parait difficile de garder le premier item de liste au même niveau (horizontal) que le parent et ensuite dégrader vers une liste verticale pour les autres. Je n'ai jamais vu ça. Pourrais-tu choisir un exploit moins compliqué pour un un premier site ?

Je crois que le mieux que tu aies à faire pour l'instant est de nous montrer un exemple en ligne de ce que tu aimerais faire (même s'il n'est pas de toi) Choisis nous un exemple parmi le web et dis nous : "C'est ça que j'aimerai" et je suis certain que quelqu'un te viendra en aide. Promis, je ne te laisserais pas dans la "m…e" et la communauté d'alsacréations non plus.

Aureance a écrit :

Il me parait difficile de garder le premier item de liste au même niveau (horizontal) que le parent et ensuite dégrader vers une liste verticale pour les autres. Je n'ai jamais vu ça. Pourrais-tu choisir un exploit moins compliqué pour un un premier site ?

Avant l'exploit le mieux serait, il me semble d'avoir un exemple du contenu lui-même, de sa nature. Peut-être une liste et la présentation envisagée n'est-elle pas la plus adéquate ?

C'est la raison pour laquelle je demande un exemple en ligne. Une chose, un exemple stable sur lequel aligner nos propos.

Non ne t'en fait pas Aureance, il en faut plus pour me fâcher. Et puis c'est vrai qu'on n'y comprend rien à mon post. Bon, c'est sûr, il y a mieux pour mon égo que de faire partie des perles du web, mais il s'en remettra je pense.

Donc voici mon code:

<div class="texte_site" id="acceuil_titre" >C'est tout un programme!
        <div class="texte_site, acceuil_puces" >Le 3G vous propose des soirées:
            <div id="puces">
                <ul>
                    <li>A thèmes: </li>
                       <div class="puces_imbriq">
                            <ul >
                                <li>Années 70-80 ...</li>
                                <li>Danses de salon ...</li>
                                <li>Country, Salsa, Karaoké ...</li>
                            </ul>
                        </div>
                    <li>Cabaret:</li>
                        <div class="puces_imbriq">
                            <ul >
                                <li>Chanteurs, Magiciens, Humoristes ...</li>
                            </ul>
                        </div>
                    <li>Thés dansants</li>
                    <li>Privées: </li>
                        <div class="puces_imbriq">
                            <ul >
                                <li>Anniversaires, C.E., à la carte </li>
                            </ul>
                        </div>
                </ul>
             </div>
        </div>
    
    </div>

et le CSS correspondant:

#acceuil_titre {
    font: italic 40px serif;
    width:1024px;
    margin: 5% auto;
    position: absolute;
    text-align: center;
    
}

.acceuil_puces {
    font: bold 20px cursive;
    width:600px;
    margin: 15px auto;
    text-align: center;
    
}

#puces {
    text-align: left;
    
    
}

.puces_imbriq ul{
   font: bold 15px cursive;
   list-style: none;
   margin-left: 30%;
}

ainsi qu'une copie écran du résultat




Voilà, j'aimerai juste que "Année 70-80" soit sur la même ligne que "A thèmes" , que "Chanteur" soit sur la même ligne que "Cabaret", et vous l'aurez compris, que "Anniversaires" soit sur la même ligne que "Privées".


J'ai essayé pas mal de trucs (mettre des div pour chaque ligne, jouer avec l'attribut position etc...) mais rien n'a donné ce que je voulais, donc je suis revenu a mon code du début car je me dis qu'il doit bien y avoir une astuce plus simple pour faire ça... mais peut être que je me trompe. Ou peut être pouvez vous me donnez une idée pour une meilleure présentation.


Merci pour votre aide.
Modifié par ben-j (10 Apr 2010 - 11:45)

salut,

j'ai fais ça sur la base de ta demande avant le dernier post.

ça me semble le faire. je voyais pas trop où était là difficulté?

et pourtant je suis nul en intégration.

perso ma solution intégrer les ul dans des div qui float. plus des div avec clear:both pour revenir a la ligne.

le dernier que j'ai mis est important si tu veux que le div global descende jusqu'en bas des 2 sous div

(je suis certain qu'en php a partir d'une base de données on peut dynamiser cette ecriture
si besoin)

ensuite en regardant ton dernier post je me dis que si les puces des 2 <ul> sont différentes ça peut impliquer des décalages.

voici ma proposition:

<style>
	.global {
		width:100%;
		background-color:#ccc;
	}

	.left{
		padding:10px;
		float:left;
	}
	
	.clear {
		clear:both;
	}
</style>

<div class="global">
	<div class="left"> <ul> <li>liste1ligne1</li> </div>
	<div class="left"> <ul> <li>liste2ligne1</li>   <li>liste2ligne2 </li>  <li>liste2ligne3 </li> </ul></div>
	<div class="clear"> </div>
	<div class="left"> <ul> <li> liste1ligne2 </li> <ul></div>
	<div class="left"> 
		<ul> <li>liste2ligne1</li>   <li>liste2ligne2 </li>  <li>liste2ligne3 </li> </ul>
	</div>
	<div class="clear"> </div>
</div>

Modifié par CPascal (10 Apr 2010 - 12:07)

Merci CPascal, ton code marche, me reste plus qu'a l'intégrer dans mon site.
Donc c'était bien ça, faire une div pour chaque ligne.
Je poste une copie écran dès que je l'ai fait.
Merci

Voilà, j'y suis (à peu prés) arrivé. Effectivement, il m'a fallu un peu bidouiller vu que les classe pour les ul ne sont pas les mêmes comme tu disait CPascal. Il me mettait la liste imbriqué un peu plus haute, j'ai donc mis le position en relative et le top a 10px.

Voici la copie d'écran:




Par contre quelle est la meilleure solution pour réduire l'espace entre chaque div?

je vous poste quand même mon code:

<div class="texte_site" id="acceuil_titre" >C'est tout un programme!</div>
        <div class="acceuil_puces" >Le 3G vous propose des soirées:
            <div class="clear"> </div>
            <div class="puces">
                <ul>
                    <li>A thèmes: </li>
                </ul>
            </div>
                       <div class="puces_imbirq">
                            <ul >
                                <li>Années 70-80,</li>
                                <li>Danses de salon,</li>
                                <li>Country, Salsa, Karaoké ...</li>
                            </ul>
                        </div>
            <div class="clear"> </div>
            <div class="puces">
                <ul>
                    <li>Cabaret: </li>
                </ul>
            </div>
                   <div class="puces_imbirq">
                            <ul >
                                <li>Chanteurs,</li>
                                <li>Magiciens,</li>
                                <li>Humoristes,</li>
                                <li>...</li>
                            </ul>
                   </div>
            <div class="clear"> </div>
            <div class="puces">
                <ul>
                    <li>Thés dansants </li>
                </ul>
            </div>
            <div class="clear"> </div>
            <div class="puces">
                <ul>
                    <li>Privées: </li>
                </ul>
            </div>
                        <div class="puces_imbirq">
                            <ul >
                                <li>Anniversaires,</li>
                                <li>C.E.,</li>
                                <li>à la carte,</li>
                                <li>...</li>
                            </ul>
                        </div>
            </div>
        <div class="clear"> </div>
       
    </div>

et le CSS:

#acceuil_titre {
    font: italic 40px serif;
    width:1024px;
    margin: 5% auto;
    text-align: center;
}

.acceuil_puces {
    font: bold 20px cursive;
    color: white;
    width:600px;
    margin: 5px auto;
    text-align: center;
}

.puces {
    padding:10px;
    float:left;
    width: 200px;
    text-align: left;
}

.puces_imbirq ul{
   font: bold 15px cursive;
   list-style: none;
   padding: 10px;
   float:left;
   position: relative;
   top: 10px;
   text-align: left;
}

.clear {
   clear:both;
}

voilà, si vous voyez des erreurs ou améliorations à faire, n'hésitez pas.
Merci
Modifié par ben-j (10 Apr 2010 - 14:48)