Bloctopmenu et affichage li

[shookai]

Bonjour à tous,

Je suis en serrage complet depuis bientot 4H et je ne trouve pas la solution...
J'utilise le module bloctopmenu pour l'affichage de mes catégories de produits. 

J'ai un bug d'affichage sur la catégorie "lumiere", les sous categories en balise li s'affiche correctement sauf "projecteur led" qui au lieu d'aller a la ligne s imbrique sur la derniere sous categorie de la ligne.

Voici l'adresse du site : www.distriscenes.com

et le css : 

li > ul > li {

1. display: block;
2. width: 12.5%;
3. float: left;
4. margin: 10px;

 

je m'arrache les cheveux... HELPPPP

Merci

Edited July 28, 2014 by shookai (see edit history)

[Atch]

Bonjour,

 

Il manque un clear ; left pour forcer le retour à la ligne après la 8eme colonne <li>.

 

ce clear: left est appelé par le class        .first-in-line-lg

 

cette class est ajouté via je ne sais pas encore

 

mais vous pouvez ajouter à la place :

li > ul > li:nth-child(9) {clear: left}

V++

 

Atch

[shookai]

Atch merci pour ta réponse !!!

L'idée pour contourner le pb est pas mal mais ca ne sera pas adapté pour le responsive

Je n'arrive pas à trouver la class à modifier. Une idée pour me guider ? 

Merci beaucoup pour ton aide...

ps : Que penses tu du site ?

[Atch]

Pourquoi pas adapté en responsive ?  Tu as les média css et donc possibilité de gérer les retours à la ligne et nombre de colonnes selon la taille de l'écran.

 

Pour les modifs css du menu ça ce passe dans A ..\themes\default-bootstrap\css\modules\blocktopmenu\css\ ou Sass si tu l'utilises.

 

Un conseil : tu aurais du dupliquer le theme est utiliser ton propre répertoire car là, après une MAJ, tu risques de perdre des modifs, meme si tu as mis le global.css dans autoload

 

V++

 

Atch

[shookai]

Merci..

Pour la modif des css, aucun souci je sais ou trouver les fichiers. C'est pour ajouter "  .first-in-line-lg" que je bute.
Avec la solution que tu as évoqué "li > ul > li:nth-child(9) {clear: left}" je pense que ce ne sera pas adapaté au responsive car sur un desktop le pb se pose à la 9eme colonne mais sur une tablette, ce sera à la 7 eme.

Il faut que j'arrive a faire ce clear left sur la derniere colonne de la ligne, mais qui ne sera jamais la meme en fonction des tailles d ecran.

Merci pour ton conseil, j'ai attaqué comme un bourrin dans le theme par defaut c'est vrai. Que me conseilles tu ? Modifier le nom du theme par defaut ?

Merci

Edited July 29, 2014 by shookai (see edit history)

[shookai]

et attention au resultat sur mobile... sur mon iphone le menu est totalement en vrac

[Atch]

C'est bien ce que j'évoque, dans le média tablette tu peux spécifier :

@media (min-width: $screen-sm-min) { li > ul > li:nth-child(7) {clear: left;} } 

Regarde comment sont construits les css du thème, ou va sur la doc de Bootstrap, toutes les infos y sont.

 

(PS : Attention Prestashop utilisent les média à  " l'envers " par rapport à bootstrap qui lui est mobile first    )

 

Pour le theme, tu as en back office une option pour dupliquer un theme et donner un nom de répertoire.

 

 

V++

 

Atch

[shookai]

Mais le retour a la ligne doit se faire a des colonnes differentes selon la taille des ecrans. Donc si je specifie un retour a la 7 eme colonne pour un ipad, le resultat ne sera pas satisfaisant sur un mini ipad par exemple. Ou bien je me trompe ?

Aurais tu une idée pour ajouter l'image de la categorie parente dans mon bloctopmenu ?

Un grand merci pour ton aide ;-)

[shookai]

Le pb se pose egalemment selon la position de la tablette paysage ou portrait

[Atch]

c'est ça le responsive  

[shookai]

Mais le retour a la ligne doit se faire a des colonnes differentes selon la taille des ecrans. Donc si je specifie un retour a la 7 eme colonne pour un ipad, le resultat ne sera pas satisfaisant sur un mini ipad par exemple. Ou bien je me trompe ?

Aurais tu une idée pour ajouter l'image de la categorie parente dans mon bloctopmenu ?

Un grand merci pour ton aide ;-)

[frugalis]

Atch vous indique que le fichier global.css est responsive et contient toutes les options pour les différentes tailles de média :

Vous y trouverez des rubriques à modifier successivement comme :

@media (min-width: 768px) { ....

}

 

@media (min-width: 992px) {....

}

 

.

.etc pour smartphone, tablets, etc ....

[shookai]

Ok merci à tous les 2 pour votre aide ;-)