Tweet
Re : Balise <span> dans le menu ?!
Le problème est que je ne sais pas vraiment ce qu'il veut, car je trouve son explication pas très clair.
Il faudrait qu'il donne plus de détails, comme par exemple quel template de Joomla il pense utiliser, ensuite est-ce qu'il veut un menu horizontal ou vertical. Combien de boutons quel dimension ect.
Maintenant pour revenir à t'as question :
Eh bien, c'est le navigateur (Google, Mozilla ect.) qui te transforme cela en page lisible, le code HTML est aussi interprété par le navigateur.
A la différence du code PHP qui est traité par le serveur puis renvoyé au client puis traité à son tour par le navigateur.
Voici un lien pour plus d'infos :
https://openclassrooms.com/courses/c...oduction-a-php
Ensuite tu dis
le mod_module de Joomla te mâche le travail pour le positionnement disponible sur le template que tu utilise il contient le code du menu que tu vas utiliser.
Maintenant si tu veux modifier il faut aller dans la feuille de style CSS pour modifier les changements de structures que tu souhaites.
Tu dis :
Voici un exemple de menu sprite d'abord un peu de code CSS
Puis encore un peu 
Et voici l'mage qui va avec 
Voilà bonne soirée en attendant plus d'infos pour savoir ce qu'il veut exactement !
Le problème est que je ne sais pas vraiment ce qu'il veut, car je trouve son explication pas très clair.
Il faudrait qu'il donne plus de détails, comme par exemple quel template de Joomla il pense utiliser, ensuite est-ce qu'il veut un menu horizontal ou vertical. Combien de boutons quel dimension ect.
Maintenant pour revenir à t'as question :
Et ils apparaissent comment les sélecteurs pour accrocher le CSS ?
A la différence du code PHP qui est traité par le serveur puis renvoyé au client puis traité à son tour par le navigateur.
Voici un lien pour plus d'infos :
https://openclassrooms.com/courses/c...oduction-a-php
Ensuite tu dis
Si tu as raison, donnes lui le code pour réaliser ce qu'il veut à partir du code HTML généré par le module mod_menu de Joomla.
Maintenant si tu veux modifier il faut aller dans la feuille de style CSS pour modifier les changements de structures que tu souhaites.
Tu dis :
Pour info, les sprites sont un moyen de regrouper plusieurs images en une seule pour diminuer les requêtes serveur. Aucun rapport avec le sujet actuel.
Code HTML:
/* pour les anciens navigateurs ne prenant pas en charge les balise html5 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* -------Styles généraux ---------*/
body{
margin:0;
font-family:Tahoma, Geneva, sans-serif;
background:url(../images/fond-2.jpg) center center fixed no-repeat; /*** NEW ***/
background-size:cover;/*** NEW ***/
}
#conteneur{
width:920px;
margin:0 auto;
padding:0 10px;
}
footer{
margin-top:10px;
background-color: #cecece;
color:#555;
padding:5px 0;
font-size: 12px;
}
.annuleFloat{clear:both;}
/* -------Styles header ---------*/
header h1{display:inline-block;vertical-align:middle;}
header h2{display:inline-block;font-size:12px;color:#3c76fa;}
/* -------Styles contenu ---------*/
.vert{
color:green;
}
.rouge{
color:red;
}
.orange{
color:orange;
}
.bleu{
color:blue;
}
#conteneur > section{
padding:10px;
background-color: #fff;
}
section .nousVous{
display:inline-block;
width:155px;
vertical-align:top;
padding:10px;
margin-right: 10px;
}
section .nousVous h1{
text-transform: uppercase;
font-size:16px;
color:blue;
margin-bottom: 10px;
font-weight: 100;
}
section .nousVous h1 .bdc{
text-transform: lowercase;
}
section .nousVous p{font-size:10px;}
section .rectangle h2{
margin:0;
font-weight: 100;
font-size: 12px;
text-transform: uppercase;
}
section .rectangle {
border-radius: 5px;
padding:5px;
margin:10px 0;
}
section .contenu{
display:inline-block;
width:520px;
vertical-align:top;
padding:5px;
}
section .contenu h1{margin:0; font-size: 20px}
section p{font-size:14px;}
section .contenu p:nth-child(3) img{
float:left;
margin-right: 10px;
}
section .pub{
display:inline-block;
width:175px;
vertical-align:top;
padding:0;
margin-left: 10px;
}
section .pub img{vertical-align:middle;}
section footer{
font-style:italic;
background: transparent;
}
.ombre{box-shadow: 0 0 10px #999;}
Code HTML:
ul{
padding:0;
margin: 0;
list-style-type: none;
background: url(../images/sprite.png) left top;
height: 36px;
width: 618px;
}
nav li{float: left;}
nav a{display: block;
width: 103px;
height: 36px;
text-indent: -1000px;
}
nav li:nth-child(1) a:hover{
background: url(../images/sprite.png) left -72px;
}
nav li:nth-child(2) a:hover{
background: url(../images/sprite.png) -103px -72px;
}
nav li:nth-child(3) a:hover{
background: url(../images/sprite.png) -206px -72px;
}
nav li:nth-child(4) a:hover{
background: url(../images/sprite.png) -309px -72px;
}
nav li:nth-child(5) a:hover{
background: url(../images/sprite.png) -412px -72px;
}
nav li:nth-child(6) a:hover{
background: url(../images/sprite.png) -515px -72px;
}
Voilà bonne soirée en attendant plus d'infos pour savoir ce qu'il veut exactement !
Commentaire