28220 sujets

CSS et mise en forme, CSS3

Bonsoir.

Y'aurais pas moyen de simplifier ce code. Je sais même pas si ça marche d'ailleurs, surtout pour le dernier

#dossier_menu
{
   	
	   width:900px;
	height:30px;

   border: 3px groove rgb(191,247,250); 
	font-size: 1.1em;  
   /*pour le texte normale dans un bloc*/  
     
   text-align: center;
	font-family: "Times New Roman", "Comic Sans MS", Verdana, serif;
     font-weight: bold;
    color: white;
	font-size: 1.1em;
	
	margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
   margin-bottom: 10px; /* margin = marge extérieur*/
   margin-top: 40px;
   padding: 12px; /* Marge intérieure de 12px */
      background-image: url("Fond_Css/banniere_menus01.jpg");
   background-repeat: repeat;
  }



#dossier_menu_b 
{
   	
	   width:900px;
	height:60px;

   border: 3px groove rgb(191,247,250); 
	font-size: 1.1em;  
   /*pour le texte normale dans un bloc*/  
     
   text-align: center;
	font-family: "Times New Roman", "Comic Sans MS", Verdana, serif;
     font-weight: bold;
    color: white;
	font-size: 1.1em;
	
	margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
   margin-bottom: 10px; /* margin = marge extérieur*/
   margin-top: 40px;
   padding: 12px; /* Marge intérieure de 12px */
      background-image: url("Fond_Css/banniere_menus01.jpg");
   background-repeat: repeat;
  }



#dossier_menu_c
{  	
	   width:900px;
	height:90px;

   border: 3px groove rgb(191,247,250); 
	font-size: 1.1em;  
   /*pour le texte normale dans un bloc*/  
     
   text-align: center;
	font-family: "Times New Roman", "Comic Sans MS", Verdana, serif;
     font-weight: bold;
    color: white;
	font-size: 1.1em;
	
	margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
   margin-bottom: 10px; /* margin = marge extérieur*/
   margin-top: 40px;
   padding: 12px; /* Marge intérieure de 12px */
      background-image: url("Fond_Css/banniere_menus01.jpg");
   background-repeat: repeat;
  }
  


#dossier_menu a, #dossier_menu_b a, #dossier_menu_c a
{	text-decoration:none;
	color:#ffff70;
	font-size: 1.1em;
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}



#dossier_menu a:hover, #dossier_menu_b a:hover, #dossier_menu_c a:hover /* Quand le visiteur pointe sur le lien */
{
	color:rgb(191,247,250);
	font-size: 1.1em;

	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
}


#dossier_menu a:active, a:focus , #dossier_menu_b a:active, a:focus, #dossier_menu_c a:active, a:focus  /* Appliquer le même style aux liens actifs et focus */
{
    text-decoration:none;
	background-color: rgb(3,20,62);
}


La seule différence entre le a, le b et le c est la taille du height. Je me serais bien passé de ça, mais j'ai besoin de préciser la taille pour ensuite centrer en vertical une image dans ces blocs. Bidouille du tutorial d'alsacréation.
Modifié par Damonya (19 Sep 2005 - 00:20)
Damonya a écrit :

Bidouille du tutorial d'alsacréation.

AlsacréationS tu veux dire ? (Tu as fait la faute au moins une douzaine de fois jusqu'à maintenant) Smiley ohwell
ah tiens oui y'a un s. Smiley ravi

T'as pas fini si tu repère les fautes d'orthographe. Chose étonnante je fais presque jamais de fautes d' orthographe de code par contre lol.

Bon pour ma question. J'ai testé. Ca marche bien comme ça, mais bon je trouve quand même que c'est un peut redondant de tout répéter alors qu'entre chaque bloc c'est juste un paramètre qui change.

Mais bon ça marche. Le résultat attendu est là.
Bonjour,
Il faut déja supprimer les répétitions:
font-size: 1.1em;

Tu peut aussi utiliser les raccourcis pour par exemple :
font:"Times New Roman", "Comic Sans MS", Verdana, serif bold 1.1em;


puis tu regroupe ce qui est commun :
#dossier_menu,#dossier_menu_a,#dossier_menu_b,#dossier_menu_c
{attributs communs}

Maintenant les particularités :

#dossier_menu_a{height:30px}
et ainsi de suite...

c'est pas compliqué Smiley cligne
tu l'as fait pour les liens Smiley biggol
Modifié par chmel (19 Sep 2005 - 00:16)
Ah merci bien. J'etais pas sûr de la démarche de la simplification du code.

C'est juste histoire de visualiser mieux le code, puisque ca marche aussi comme ça, mais faut avouer que la simplification a du bon, surtout quand on commence à avoir plein de code. Smiley sweatdrop Smiley langue

Je te dis donc merci. Smiley smile