Appliquer un style ou une classe à un <li>

Bonsoir,

J’ai tenté par tous les moyens d’appliquer un style ou une classe à deux <a href="#">.

Voici mon HTML :

		      <div class="article">
	 <ul id= "textasiat2" >
     <li><a href="#">ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">nouveau style</a></li>
     <li><a href="#">nouveau style</a></li>
	</ul>

et mes CSS :

#textasiat2 li a {
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;   
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}
#textasiat2 li a:hover {
    font-size: 20vw;
    color: #FAFAD2;
	}
	

J’ai bien respecté ce que préconisaient les sites web… sans succès

Merci pour votre aide

Peux-tu détailler ton problème ?

Je vois rien de choquant dans ton code. Ça me semble marcher.

Bonjour ache,

Avec

 <li class="petit"><a href="#">nouveau style</a></li>

CSS :

.petit{
  size: 0.5em;
  color: red;
}

Rien ne change. Avec

<li style="color:red; font-size: 0.2em">

Rien ne change excepté la transition (size) qui ne fonctionne plus

Une idée ? Je pense avoir tout fait

Merci

Modification par @Amaury  — Correction du Markdown

À quoi ressemble ton code global avec ces modifications ?

Car tu as un sélecteur #textasiat2 li a qui est prioritaire sur .petit et qui contient déjà une propriété font-size.

Il faut peut-être revoir tes sélecteurs pour surcharger une propriété déjà appliquée.

Bonjour viki53,

Veux-tu parler d’un " !important;" sur la font-size de .petit ?

J’ai essayé :/

C’est une solution, mais c’est sale et à éviter si tu veux un code maintenable.

Je parle de changer tes sélecteurs pour ajuster leur spécificité.

Mais sans ton code complet, difficile de savoir s’il n’y a pas d’autres problèmes.

Sinon j’ai fait ceci :

		      <div class="article">
	 <ul id= "textasiat2" >
     <li><a href="#">ce lien sera</a></li>
		 <li><a href="#">Ce lien sera</a></li></ul>
				 	 <ul id= "textasiat2b" >

		 <li><a href="#">nouveau style</a></li>
				  <li><a href="#">nouveau style</a></li>
	</ul>

et les CSS :

#textasiat2{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}
#textasiat2b{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-left: 50px;
	position: relative;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}
#textasiat2 li a{
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover {
    font-size: 20vw;
    color: 	#FAFAD2;
	}

#textasiat2b li a{
    font-size:2vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}

#textasiat2b li a:hover {
    font-size: 20vw;
    color: 	#FAFAD2;
	}
	
		

Mais les ul se chevauchent

Tu peux commencer par enlever height: auto; bottom: auto; qui ne sert à rien dans un contexte sans positionnement explicite.

Ensuite ton chevauchement est probablement dû à float: left. J’ai l’impression que tu utilises des bouts de CSS un peu au hasard sans trop savoir ce qu’ils font… il vaudrait mieux passer un peu de temps à lire des tutoriels pour maîtriser les bases, tu perdrais moins de temps sur des choses comme ça

J’apprends petit à petit, en allant pas mal sur le net. Mais pas assez, je sais

Le float left a son importance (je ne sais plus pourquoi je l’ai mis, mais si je le retire ça me fout le bazar )

Je pensais plus à un prob de position mais je ne vois pas

Bonne soirée viki53

Il y a effectivement un position: absolute que j’avais pas vu, ça fait sortir l’élément du flux, donc les suivants peuvent se retrouver à sa place.

C’est pas d’apprendre petit à petit le problème, c’est que tu as l’air de t’attaquer à un projet assez conséquent sans évaluer l’impact de ce que tu utilises. Maîtriser le positionnement ou les flottants en CSS c’est essentiel pour la mise en page, c’est pas en testant des trucs au hasard jusqu’à ce que le résultat te convienne que tu apprendra vraiment : la théorie est importante en CSS.

J’ai répondu entre-temps. J’ai aussi tenté de mettre la première liste en relative

Dans ce cas il vaut mieux commencer avec des styles qui n’ont pas ce problème, notamment en enlevant tout ce qui touche au positionnement : https://codepen.io/viki53/pen/bGjjvmp

À partir de ça tu pourras gérer tes positions si tu le souhaites.

Attention encore une fois avec les positions : il faut bien comprendre comment les utiliser sinon tu risques de te retrouver avec des résultat exubérants. Et ça, ça passe par travailler la théorie plus que par des tests au hasard comme tu le fais.

Je ne vois pas ce que tu as fait excepté retirer les positions ! C’est ça ?

En tous cas… ça roule :))))))))

Merci !!!!

Le float left a son importance (je ne sais plus pourquoi je l’ai mis, mais si je le retire ça me fout le bazar )

Bon, je suis désolé de te le dire de cette façon-là. L’informatique n’est pas magique. Il va falloir apprendre à comprendre ce que tu fais et surtout pourquoi tu le fais. Si quelque chose marche sans savoir pourquoi alors c’est que ça ne marche pas vraiment. Ça te permettra ensuite d’anticiper le résultat de ce que tu codes.

Ensuite, j’ai l’impression qu’il te manque une certaine forme d’organisation. C’est un peu lié au manque d’anticipation. Ce qui m’indique cela c’est que, depuis le début du sujet, je n’ai pas un code reproductible clair ni une description de ce que tu souhaites faire et des problèmes que tu rencontres.

Ce que je te propose, c’est de faire un code minimal qui met effectivement le problème en exergue. Ainsi, ça te permet de l’isoler et de mieux l’attaquer.

SORRY… tu as raison ache, mais il faut savoir que je m’améliore (à ma vitesse )

@viki53 Ton codepen fout en l’air (décale un max) ma photo :

		      <div class="article">
	 <ul id= "textasiat2" >
     <li><a href="#">ce lien sera</a></li>
		 <li><a href="#">Ce lien sera</a></li>

		  <li style="font-size:2vw; color:red;align-items:  padding: 5px; margin: 5px 0;">Designers</li>
				  <li><a href="#">nouveau style</a></li>
	</ul>

    <img class="imagasiat" src="images/asiat.jpeg" alt="asiat">  </div>

Oui, il y avait une photo… Désolé

Bonjour ache et viki53 La nuit porte conseil dit-on. Histoire de "fixer" mon image, j’ai utilisé le HTML suivant

<div class="article">
	 <img class="imagasiat" src="images/asiat.jpeg" alt="asiat"> 
	<ul id= "textasiat2" >
		<li><a href="#">ce lien sera</a></li>
		<li><a href="#">Ce lien sera</a></li>
	</ul>
	<ul id= "textasiat2b">
		<li><a href="#">nouveau style</a></li>
		<li><a href="#">nouveau style</a></li>
	</ul>

    </div>

en conservant les CSS de viki53 pour le texte. M Voici mes CSS de l’image :

			
#imagasiat{
	bottom: 0;	
	z-index: 999;
	-webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 

		  }


.imagasiat{
	height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	margin-right: 10vw;

	-webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
	
}

Maintenant, le texte vient se cogner à la photo, ne vient plus dessus. Je pensais que c’était un problème de position mais apparemment pas :/

Merci encore et bonne journée

Alors, commençons par nettoyer (encore une fois) ton code.

• Tu peux supprimer les préfixes de transition qui ne servent plus à grand chose (sauf pour de très vieux navigateurs).
• Les propriétés top et bottom ne servent à rien si elles ne sont pas couplées avec un position que je ne vois pas ici
• Idem pour z-index, d’autant plus que tu utilises des valeurs inutilement hautes : il vaut mieux y aller par incrément que de monter directement à des valeurs très hautes qui seront difficiles à dépasser
• Abuser du !important est à proscrire : c’est une rustine plus qu’une solution, si tu as besoin de l’utiliser c’est que quelque chose ne va pas ailleurs (sauf rares exceptions comme des class utilitaires spécifiques)
• L’ordre des éléments HTML ne doit pas servir à régler tes problèmes de mise en page mais à porter la sémantique de ta page : le HTML est avant tout là pour porter ton contenu, qui sera lu dans l’ordre. Le CSS vient après pour la mise en page sur les supports qui le supportent.

À partir de ça tu peux nous poster un ensemble de code (HTML + CSS) qui permet de reproduire ton problème.

J’en apprends des choses

#textasiat li a {
	color:white;
	      text-shadow: 2px 2px 4px #000000;

				text-decoration: none;
				z-index: 99;

	
}

ul {
		list-style:none;}

#textasiat li a:hover {
  color: 	#FAFAD2;
}


#textasiat2 {
	padding: 0;
	margin-left: 50px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;


}
#textasiat2b {
	padding: 0;
	margin-left: 50px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}
#textasiat2 li a {
	font-size: 8vw;
	line-height: 8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;


	transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover {
	font-size: 20vw;
	color: #fafad2;
}

#textasiat2b li a {
	font-size: 2vw;
	line-height: 8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;

	transition: color 2s, font-size 2s;
}

#textasiat2b li a:hover {
	font-size: 20vw;
	color: #fafad2;
}
#imagasiat{
	bottom: 0;	
	z-index: 999;

    transition: transform .3s ease-out; 

		  }


.imagasiat{
	height: 100vh;
	float: right;
	max-width: 100%;
	z-index: 9999;
	vertical-align:middle;
	border: 1vw solid #000000;
	margin-right: 10vw;

    transition: transform .3s ease-out; 
	
}

Pour le HTML (avec une image enfin bien placée  :

<div class="article">
	 <img class="imagasiat" src="images/asiat.jpeg" alt="asiat"> 
	<ul id= "textasiat2" >
		<li><a href="#">ce lien sera</a></li>
		<li><a href="#">Ce lien sera</a></li>
	</ul>
	<ul id= "textasiat2b">
		<li><a href="#">nouveau style</a></li>
		<li><a href="#">nouveau style</a></li>
	</ul>

    </div>

Merci viki53

AU passage, que puis-je utliser pour bien indenter le code ? Je passe par Tab-it, mais il est loin d’être parfait

Tout dépend de ton éditeur/IDE. Tu peux regarder du côté de Prettier par exemple qui peut gérer pas mal de choses pour la propreté du code : il y a des plugins pour pas mal d’éditeurs si besoin.

Quelles sont les dimensions de l’image que tu as intégrées ? Que je puisse simuler le même rendu de mon côté.

1400 sur 2100. Merci ! Je regarde Prettier et les plugins