Programmation : entraide et discussions (html, css, etc)

Je ne suis pas spécialiste de ces sliders, mais je pense que ça va nécessité un code javascript un peu différent pour avoir cette navigation précise. Au niveau du css, on ne peut retoucher que les boutons Next et Previous

On peut les placer là où tu l’as indiqué par exemple et changer leur forme, mais il n’y aura que deux boutons, et pas un indicateur du nombre d’images

1 « J'aime »

Bonsoir @Steven et merci de m’avoir répondu,

D’accord.

Comment rajouter un indicateur du nombre d’image dans le genre ou du moins quelque chose qui se rapproche de ma demande ?

Merci d’avance pour ta réponse et ton aide.

Bonne soirée.

Il y a un exemple ici, avec les flèches next/previous et les petits boutons avec le nombre d’images : https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Bonjour @Steven et merci de m’avoir répondu,

Pas mal :slightly_smiling_face:

Maintenant, comment faire pour mettre en place cela sur mon carrousel actuel ?

Désolé de poser cette question, mais je suis vraiment novice en programmation :worried:

Merci d’avance pour ton aide.

Bonne journée.

Le plus simple sera de prendre un code source complet, j’ai trouvé ce modèle qui ressemble beaucoup

Là tu as le html et css. Il est sans javascript semble-t-il

Donc là il faudra juste ajouter le css dans tes balises styles et le html là où tu veux le placer.

Si tout marche, on retouchera le css derrière

Humm … y’a du SCSS … ce ne sera pas interprété comme cela. Là dans l’exemple donné par @Steven, le code fonctionne car un précompilateur a été indiqué.

L’exemple précédent fonctionne avec Bootstrap, c’est une librairie assez lourde, donc la charger juste pour un carrousel, c’est pas top.

Il y a cette librairie qui est pas mal : http://kenwheeler.github.io/slick/

ou sinon https://bxslider.com/

Bonjour et merci de m’avoir répondu,

Je viens d’essayer. Ça s’affiche très mal :
:arrow_right: Test caroussel

Pour les autres, je verrais.

Merci d’avance pour votre aide.

Bonne après-midi.

Oui le Sass (SCSS) est un langage qui doit être compilé (code sass ==> compilateur ==> code css). C’est pour cela que j’ai dit tout à l’heure que ce ne sera pas interprété.

Il est bien ce topic. Plus je lis et moins je comprends :clarkson:

Voilà, j’avais juste envie de vous le dire. Vous pouvez reprendre.

:sac:

1 « J'aime »

Bonjour @sargon et merci de m’avoir répondu,

Désolé pour le délai…

Excuse moi mais je suis vraiment novice en css (je n y connais presque rien). Je trouve ça où ?

Merci d’avance pour ton aide.

Bon début de semaine.

@romano97002 c’était pour dire que la solution indiquée par @Steven n’était pas forcément adaptée.
Je ne connais pas le logiciel que tu utilises, donc je ne sais pas ce que tu peux faire avec. SI tu as moyen d’intégrer du JS et de la CSS avec, il vaut peut-être mieux te tourner vers les librairies que je t’ai indiqué (ou une autre).

1 « J'aime »

Bonsoir à tous,

Je cherche à personnaliser mon menu de navigation de mon site afin d’avoir une barre active quand on est sur la page concernée.

Je cherche tout simplement à faire cela :

Voici le code qui m’a été donné :

<style>
li{display:inline-block;min-width:50px;}
li a {
    text-decoration:none;
    line-height: 70px;
    padding: 0 10px;
    text-align: center;
    font-size: 1.3em;
    color: #444444;
}
li a:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
li a:hover:after {
    width: 90%;
    background: #444;
}
</style>

Que dois-je modifier ou ajouter pour avoir l’effet désiré.

Egalement, j’aimerait que la barre fasse toute la largeur du texte (comme sur l’image de l’exemple).

Merci d’avance pour votre aide.

Bon week-end.

La class sera li a:active, le code sera reconnu, j’imagine que tu sais quoi personnaliser derrière.

Pour la largeur du menu, il faudra peut-être la class supérieure au li

Mais sinon teste ça

li {display:inline-block;min-width:50px; width:100%}

Bonsoir @Steven et merci de m’avoir répondu rapidement,

D’accord.

Hélas non car je ne connais pas ce langage.

Je viens de tester mais ça ne fonctionne pas. Le lien Test menu (de ma page active actuelle) n’est pas souligné :
http://romanolapince.com/test-menu.html

Merci d’avance.

Bon week-end.

Je regarde ça quand je suis sur le pc

Je suis meilleur quand j’ai la source avec et je teste en live dessus

1 « J'aime »

Ok merci beaucoup :+1:

Là ça ne marchera pas car il n’y a pas de pages créées, quand tu auras créé les différentes pages, le texte se mettra en bleu et sera souligné sur le menu concerné.

li a:active {
    color: #43749c;
}
li a:active:after {
    width: 90%;
    background: #43749c;
}

Au niveau de la taille, rien n’empêche qu’il prenne le maximum de largeur possible, ajouter du css ne semble pas nécessaire. A confirmer quand le menu sera complété

Bonjour et merci de m’avoir répondu,

D’accord.

Je viens de tester mais ça ne fonctionne pas.

Ne connaissant rien au CSS et n’ayant pas le temps d’apprendre ce langage j’ai tout d’abord ajouté ton code à mon code CSS soit :

<style>
    li{display:inline-block;min-width:50px;}
    li a {
        text-decoration:none;
        line-height: 70px;
        padding: 0 10px;
        text-align: center;
        font-size: 1.3em;
        color: #444444;
    }
    li a:after {
        content: '';
        display: block;
        margin: auto;
        height: 3px;
        width: 0;
        background: transparent;
        transition: width .5s ease, background-color .5s ease;
    }
    li a:hover:after {
        width: 90%;
        background: #444;
    }
    li a:active {
        color: #43749c;
    }
    li a:active:after {
        width: 90%;
        background: #43749c;
    }
</style>

Vu que ça ne fonctionnait pas j’ai supprimmé mon code actuel et l’ai remplacé par ton code soit :

li a:active {
    color: #43749c;
}
li a:active:after {
    width: 90%;
    background: #43749c;
}

J’ai également essayé :

<style>
li a:active {
    color: #43749c;
}
li a:active:after {
    width: 90%;
    background: #43749c;
}
</style>

Mais rien n y fait.

Merci d’avance pour ton aide.

Bon week-end.

Les liens dans le menu sont vides, c’est normal que ça ne marche pas, il faut attendre d’avoir créé les autres pages pour que les liens actifs soient reconnus.

Avec deux pages ça te suffira à tester, la page actuelle et une page nommée au pif, mets les liens de chacune dans le menu et tu verras

La classe active est sur la balise li, pas sur le a. Du coup, c’est plutôt li:active a.