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


#121

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


#122

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.


#123

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


#124

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.


#125

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


#126

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/


#127

Bonjour et merci de m’avoir répondu,

Je viens d’essayer. Ça s’affiche très mal :
:arrow_right: http://romanolapince.com/test-caroussel.html

Pour les autres, je verrais.

Merci d’avance pour votre aide.

Bonne après-midi.


#128

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


#129

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:


#130

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.


#131

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


#132

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.


#133

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%}

#134

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.


#135

Je regarde ça quand je suis sur le pc

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


#136

Ok merci beaucoup :+1:


#137

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é


#138

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.


#139

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


#140

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