openElement

[Mon message a été déplacé, et faisait suite au didacticiel "Chouette c'est responsive" de Larsene]

   [Mon message a été déplacé, et faisait suite au didacticiel "Chouette c'est responsive" de Larsene]

Super didacticiel !!!! 

Grâce à lui j'ai pu commencer une ébauche de site responsive, qui était pour moi un grand mystère...

Je ne sais pas si je peux poser des questions sur son utilisation directement ici, ou si je dois ouvrir un topic dédié, mais j'aurai forcément des interrogations vous vous en doutez...

J'ai bien suivi le tuto, ça marche pas mal jusqu'ici, j'ai pu me familiariser avec le concept des classes perso, un peu de code CSS, etc...

Par contre, comme bizarrerie, je n'arrive pas à réduire la taille du titre de la barre de menu (classe .titrebarremenu) lorsque la fenêtre se réduit...
J'arrive pourtant à le faire pour le texte des boutons liens, dont j'ai créé une classe spécifique .bouton (qui n'est pas dans le tuto me semble-t-il).

Je vous donne l'adresse (très) temporaire de l'ébauche (tout debut) de mon site pour vous faire une idée, et le code CSS commenté du menu, si ça peut vous éclairer...

https://hugaux.000webhostapp.com/
_________________________________________________________________

.barremenu{
	background-color:rgba(27,37,58,0.8) !important;
	width:100% !important;
	position : fixed !important;
	z-index:9999 !important;

}

@media screen and (max-width: 1134px) {
	.titrebarremenu{						
	font-size: 18px !important;			/* Taille du titre de la barre de menu, réduite à 18px */	Ne marche pas
	}
	#WEBoutonMenu{
	display:inline-block !important;		/* Affiche le bouton du menu déroulant */
	}	
	#WEmenuprincipal{				/* Cache la barre de menu principal */
	display:none !important;
	}
}

@media screen and (min-width: 1134px) and (max-width: 1400px) {
	.titrebarremenu{
	font-size: 20px !important;			/* Taille du titre de la barre de menu, réduite à 20px */	Ne marche pas
	margin-right: 3% !important;		/* réduit la taille de la marge droite de la barre de menu à 3% */
	}

	.menu{
	width: 800px !important;			/* réduit la taille de la barre de menu principal */
	}

	.bouton{
	font-size: 16px !important;			/* réduit la taille du texte des bouton liens à 16px */
	margin-right: 2% !important;		/* réduit les marges droite et gauche des boutons liens à 2% */
	margin-left: 2% !important;
	}

	#WEBoutonMenu{
	display:none !important;			/* cache le bouton du menu déroulant */
	}	
	#WEmenuprincipal{
	display:inline-block !important;		/* Affiche la barre de menu principal */
	}
}

@media screen and (min-width: 1401px) {
	.titrebarremenu{
	font-size: 24px !important;			/* Taille du titre de la barre de menu, normale */
	margin-right: 8% !important;
	}

	.menu{
	width: 919px !important;			/* Taille de la barre de menu principal, normale */
	}

	.bouton{
	font-size: 18px !important;			/* taille du texte des bouton liens, normale */
	margin-right: 3% !important;		/* marges droite et gauche des boutons liens */
	margin-left: 3% !important;
	}

	#WEBoutonMenu{
	display:none !important;			/* cache le bouton du menu déroulant */
	}	
	#WEmenuprincipal{
	display:inline-block !important;		/* Affiche la barre de menu principal */
	}
}

Edité par j74 - 20 Mai 2023 à 13:53

openElement

CSS et @media screen