28128 sujets

CSS et mise en forme, CSS3

Bonjour,
Je tente de faire une transition sur un li, mais cela ne fonctionne pas.
Là où il n'y a pas de classe, la transition se fait.
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 class="designer">nouveau style</a></li>
<li><a href="#">nouveau style</a></li>
</ul>
<img class="imagasiat" src="images/asiat.jpeg" alt="asiat">  </div>


Et mes CSS :

.designer {
color:white;
 text-shadow: 2px 2px 4px #000000;
font-size:8vw;
line-height:8vw;
}designer li a{
-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;}
	
.designer li a :hover {
font-size: 20vw;
color: 	#FAFAD2;
}

#textasiat2{
	padding: 0;
	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;}



#textasiat li a {
	color:white;
	 text-shadow: 2px 2px 4px #000000;
         text-decoration: none;
        ]z-index: 99;

	
}
#textasiat li a:hover {
  color: 	#FAFAD2;
}
ul {list-style:none;}



J'aimerais reproduire l'effet "#textasiat li a" sur ."designer li "a car je souhaite changer le style.

Merci pour votre aide,

P.
Modérateur
Salut,

Alors il y a pas mal d'erreur.

Pour commencer il manque une ouverture de <a> avec la classe designer (ou supprimer la fermeture du a si tu veux pas le <a>. Il manque aussi un point dans le CSS.

y'a un crochet qui traine..
     ]z-index: 99;


Colle ca dans un fiddle il te mettre tes erreurs en rouge et en jaune : https://jsfiddle.net/gw42mxsu/

Faut vraiment partir sur une base saine. Aide toi d'outil de coloration syntaxique et indente ton code. Si t'as rien jsFiddle le fait automatiquement (petit boutton "tidy" dans les coins haut droite des fenêtres)

Ensuite le :hover doit etre collé au a si tu veux capter le survol du a :
.designer li a:hover {

et non
.designer li a :hover {


Idem pour .designer li ca n'existe pas dans ton html :
<li class="designer">


Ici ca sera li.designer, le li n'est pas fils d'un élément qui a la class designer.

Ca fait beaucoup d'erreur. Corrige déjà tout ca et on verra si il y a toujours des soucis Smiley smile
Un énorme merci pour ces précisions. J'en apprends tous les jours Smiley cligne
Maintenant ça fonctionne avec cette ligne :
<li class="designer"><a href="#">nouveau style</a></li>

Bonne journée et encore merci Smiley smile
Bouhouhohuophuhohi,
La li class="designer"class sur la ligne HTML ne prend en compte que le margin-top Smiley decu ((

.designer {color:white;
text-shadow: 2px 2px 4px #000000;
font-size:4vw;
line-height:4vw;
margin-top: 2em;
}
.designer li a{
-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;}
	
.designer li a:hover {
font-size: 20vw;
color: 	#FAFAD2;
}


Smiley bawling
Modérateur
PLGPPUR a écrit :
Bouhouhohuophuhohi,
La li class="designer"class sur la ligne HTML ne prend en compte que le margin-top Smiley decu


Bah non... https://jsfiddle.net/9pazqxfs/

Il prend bien tout en compte (même la couleur, regarde la puce du <li> est blanche), il reste seulement la couleur bleue car elle est sur le <a> pas le <li>
Modifié par _laurent (02 Feb 2023 - 14:51)
Merci _laurent. Effectivement ça fonctionne Smiley smile
Mais c'est la div "textasiat2" qui chamboule tout (qui prend le dessus) Smiley decu

#textasiat2{
	padding: 0;
	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;}
	
	#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;
	}


Merci Smiley cligne
Modérateur
Tout ce code :
#textasiat2{
	padding: 0;
	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;}
	
	#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;
	}


N'a aucune influence sur ce code ci :

.designer {color:
white;
text-shadow: 2px 2px 4px 
#000000;
font-size:4vw;
line-height:4vw;
margin-top: 2em;
}


Du coup je vois pas trop de quoi tu parles.
Si tu parle du style du <a> alors oui il vient par dessus les style hérité de son parent designer.

La il va falloir reprendre un cours de poids de sélecteur https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Il va falloir cleaner tout ca de façon a ce que tes selecteurs soit simples et facilement overidables comme ce que tu cherche a faire avec l'ajout de la classe designer.

#textasiat2 est un poids très fort dans un sélecteur mais il n'est pas présent dans ton selecteur qui doit overider donc .designer ne peut pas s'imposer.

En gros ca devrait ressembler à ca ton CSS
#textasiat2 { }
    #textasiat2 li { }
        #textasiat2 li a { }
    #textasiat2 li.designer { }
        #textasiat2 li.designer a { }
Merci pour ces explications et les cours à suivre (mais mon anglais laisse à désirer Smiley cligne
Donc, cela devrait me donner ça ?
 #textasiat2{
	padding: 0;
	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;}
	
	#textasiat2 li{
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

}
	

#textasiat2 li a{
    font-size:84w;
	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;
	}
		
	
	
	
#textasiat2 li .designer li {	color:red;
	      text-shadow: 2px 2px 4px #000000;
	    font-size:4vw !important;

}

#textasiat2 .designer li a{	color:red;
	    font-size:4vw !important;
	line-height:4vw !important;
	
    
    -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;}
	

.designer li a:hover {
    font-size: 80vw;
    color: 	#FAFAD2;
	}



#textasiat2 prend toujours le dessus Smiley bawling

Je suis encore passé à côté de qq chose Smiley hum

Bonne soirée Smiley cligne
Modérateur
PLGPPUR a écrit :
Merci pour ces explications et les cours à suivre (mais mon anglais laisse à désirer Smiley cligne

L'article est en francais aussi Smiley cligne

PLGPPUR a écrit :
Donc, cela devrait me donner ça ?

Non

PLGPPUR a écrit :
#textasiat2 prend toujours le dessus Smiley bawling
Je suis encore passé à côté de qq chose

Oui

Ce que j'ai dit :
#textasiat2 { }
#textasiat2 li { }
#textasiat2 li a { }
#textasiat2 li.designer { }
#textasiat2 li.designer a { }

vs ce que tu as :
#textasiat2
#textasiat2 li
#textasiat2 li a
#textasiat2 li a:hover
#textasiat2 li .designer li
#textasiat2 .designer li a
.designer li a:hover { }


Tu n'as pas tout lu ou appliqué ce que j'ai dit :
_laurent a écrit :
.designer li ca n'existe pas dans ton html :
<li class="designer">
Ici ca sera li.designer, le li n'est pas fils d'un élément qui a la class designer.


Et y'a même un sélecteur :
#textasiat2 li .designer li
qui est apparu. Est-ce que tu comprends ce sélecteur ?


_laurent a écrit :
Aide toi d'outil de coloration syntaxique et indente ton code. Si t'as rien jsFiddle le fait automatiquement (petit boutton "tidy" dans les coins haut droite des fenêtres)

Ca aussi t'as loupé et ca manque coté lisibilité du coup
Modifié par _laurent (02 Feb 2023 - 17:37)
Meilleure solution
Je suis perdu, je n'arrive plus à rien. J'utilise "tab-it" pour indenter le code mais le résultat est très aléatoire.
Si j'ai bien (mais mal car ça fonctionne pas), le HTML devrait être ça :
<div class="article">
	<ul id= "textasiat2" >
		<li><a href="#">ce lien sera</a></li>
		<li><a href="#">Ce lien sera</a></li>
		<ul id= "textasiat2 li .designer li" >
			<li><a href="#">nouveau style</a></li>
			<li><a href="#">nouveau style</a></li>
		</ul>
		<img class="imagasiat" src="images/asiat.jpeg" alt="asiat">
	</div>


Il faut que je vois pour les CSS, je ne sais plus. Je ne comprends plus rien au B.A.BA pour la 1re fois Smiley murf
Modérateur
Il manque un </ul>
C'est bien indenté et ca se voit direct. le <ul> est au même niveau que </div> c'est qu'il y a un soucis.

Et qu'estt-ce que c'est que ça :
id= "textasiat2 li .designer li"

Depuis quand on mets des sélecteur CSS dans les id html ?!

Tu ne corriges pas ce que je dis et tu rajoutes des erreurs... je comprends rien a ce que tu fais...
Modifié par _laurent (02 Feb 2023 - 22:15)
Bonsoir _laurent,
J'apprends le code pendant mes heures de travail... pendant que mes collègues font des pauses clopes. Là, c'est trop pointu pour moi, pour quelque chose que j'aurais parié très simple. il va falloir que j'y consacre un week-end. Pas le prochain mais le suivant.
Merci pour toutes tes remarques, ton aide, ta sympathie et ta disponibilité.
Bonne soirée et merci à toi Smiley cligne
P.
Bonjour _laurent,
Après reflexion (il m'en faut beaucoup), voici le code qui fonctionne Smiley biggrin
CSS :
#textasiat
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}

#textasiat li a
{
	color:white;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: none;
	z-index: 99;
}

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

#textasiat2
{
	padding: 0;
	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;
}

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

#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;
}

#textasiat2 li.designer
{
	font-size: 4vw;
	color: #abbbae;
	-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.designer:hover
{
	font-size: 10vw;
	color: #abbbae;
}

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


Des corrections ? Désolé pour l'indentation du code made in "tab-it".
Merci pour tout et bon week-end Smiley biggrin
P.