28172 sujets

CSS et mise en forme, CSS3

Chevrons

Bonjour,

comment aligner les balises suivantes en CSS, le chevron right sur la bordure left et le left sur la rigght ? et par ailleurs, comment les insérer dans un 1/2 cercle ?

<i class="fas fa-chevron-right"></i>
<i class="fas fa-chevron-left"></i>

Voilà mon [code] CSS :

i
{
color: red;
font-family: 'fontawesome';
font-size: 30px;

}

i .fas fa-chevron-right
{
left: 0;
}

i .fas fa-chevron-left
{
right: 0;
}

Sachant que l'ensemble est intégré dans la bannière avec ce [code] CSS :

#bloc_page .banniere
{
position: relative;
background: url('images/slider/bg1.jpg') no-repeat;
width: 100%;
}

#banniere_description
{
position: absolute;
top: 250px;
color: white;
font-family: 'roboto', Arial, serif;
width: auto;
height: auto;
left: 75px;
padding-top: 5px;
}

C'est vraiment compliqué pour moi et je doute que ce métier me corresponde, néanmoins en formation, je try try try... et je suffer, suffer, suffer
Merci d'avance,
Bonsoir,

merci pour ce retour ; oui pour les <i> sauf qu'il s'agit des liens copiés directement depuis fontawesome à utiliser tels quels ; d'après ce que j'ai compris le <i> équivait à un span et donc, la logique devrait être identique html/css sauf que non (dans mon cas je précise)
Quoiqu'il en soit j'apprécie ce retour, isabelle
Administrateur
Bonjour Isabelle,

Ce n'est pas toujours évident en effet de débuter dans ce métier, mais il faut un peu de courage pour tout assimiler ensuite ça ira bien mieux.

Pour répondre à ta question :
- l'élément <span> est un élément neutre qui n'a aucune fonctione
- l'élément <i> a initialement une fonction purement décorative (il signifie "italique")

Son usage est détourné par Fontawesome qui s'en sert effectivement "comme un span" surtout parce qu'il s'agit d'une balise plus courte (et qu'il est toujours profitable d'avoir un code le plus court possible en production).

"et donc, la logique devrait être identique html/css sauf que non (dans mon cas je précise)"
> Là j'avoue que je n'ai pas compris ce que tu veux dire.

Bon courage et bonne journée !
Je pense avoir compris son problème. En fait tu voudrais afficher deux boutons de navigation dans un slider, la flèche gauche tout à gauche, et la flèche droite tout à droite.

Là en l’occurrence, je n'ai pas ton HTML ni tout ton CSS donc on va se baser sur des suppositions, mais j'imagine que ce qu'elle obtient, ce sont des chevrons collés à gauche.

Pour cause, tu utilises la propriété "right: 0;" sans définir au préalable une "position: absolute;" à ton chevron. En l’occurrence, son comportement sera relatif, et la propriété "right" ne lui sera pas utile. En définissant une "position: absolute" à tes chevrons, tu obtiendras normalement le résultat souhaité. (Attention aussi à choisir le bon container en relatif auxquels les éléments doivent se référer).

Tu trouveras tout sur les positions et leurs propriétés relatives ici

Note : Aussi dans ton cas, si on devait se fier au comportement natif du span et du i, la propriété qui permet d’aligner ce genre d'élément à droite est simplement "text-align: right", dans le cas bien sûr ou leur container à une taille définie (à 100% par exemple).
Modifié par Nolan (20 Aug 2018 - 14:20)
Sujet clos
Aller à