Menu css avec icones

Blueangel · 16 Juin 2010

Bonjour,

Nous réalisons actuellement un site web avec un stagiaire qui ne connait pas le langage CSS ( HTML et PHP uniquement): celà fait plus d'une semaine qu'il n'arrive pas à adapter le design d'un template.

Merci de votre aide. :!:

Voilà le problème: nous utilisons le template suivant :

/>http://www.free-css.com/assets/files/free-css-templates/preview/page87/consulting-services/

Comment remplacer la barre de navigation texte horizontale:

Par une barre de navigation mixte icones/textes (moins haute que dans l'exemple suivant)

Même question pour les 3 blocs centraux ( mise en place de 3 icones à la place du texte central, en laissant le titre et le lien)

Le code source:

/**Author Name:Gen 
   Developed in Vin Labs 
   Copyright at gendesigns.blogspot.com 
   ProjectName:Computer Zone **/
*{ margin: 0px; padding: 0px; }*
body
{ 
  background:#eee center top;
  color: #dcdcdc;
  font: .8em normal small "Trebuchet MS",Tahoma, verdana, arial, helvetica, sans-serif;line-height: 1.6em;
}
/**Common**/
p
{
	font-family:arial;
	font-size:0.9em;
}
/**Wrapper **/
#wrapper 
{
	width:900px;
	margin:5px auto;
	background:#ffffff;
}
#top,#footer,#main,#content,#container
{
	width:850px;
	margin:0px auto;
}
#top
{

	background:#fdfdfd url(images/cstrip.gif) repeat-x;
	height:74px;
}
#logo h1
{
	font-family:ae_Cortoba;
    font-size:2.4em;
    font-weight:500;
    margin:0px ;
    padding-left:50px;
	padding-top:20px;
	color:#eee;
}
#logo p
{
	 padding-left:60px;
}
#logo
{
float:left;
}
/**Menu***/
ul
{
list-style:none;
}
#menu li
{
display:inline;
}
li a
{
text-align:center;
color:#9ab2be;
float: left;
height: 38px;
margin-right: 1px;
text-decoration: none;
font-size: 1.1em;
padding: 20px 20px 13px 20px;
}
#menu
{
margin-left:350px;
}
#menu a:hover
{
	color:#fff;
}
#main
{
	background:#244458 url(images/pic.gif) no-repeat ;
	height:284px;
}
#content
{

	height:185px;
    background:url(images/cstrip.gif) repeat-x;	
}
#left,#right
{
	width:275px;
    height:184px;padding-top:5px;

}
#left
{
	float:left;

}
#right
{
	float:right;

}
#center
{
	margin:0px 275px 0px 275px;
	border-left:1px solid #4F4A4A;
	border-right:1px solid #4F4A4A;
	height:177px;
    padding-top:5px;
}
#left h1,#right h1,#center h1
{
font-size:1.5em;
padding:10px 0 0 50px;
font-family:arial;
}
#left p,#right p,#center p
{
padding:10px 15px 0px 20px;
}
#left h2,#right h2,#center h2
{
	padding-left:170px;
	font-family:arial,verdana,sans-serif,tahoma;
	font-size:0.9em;
}
#left a,#right a,#center a
{
	color:#fff;
	text-decoration:none;
}
#container
{
	height:270px;
	background:#d9d9d9;
	margin-top:5px;
	margin-bottom:5px;

}
#lcontain
{
	width:260px;
	background:#eeeeee;
	float:left;
	margin-left:5px;
	height:260px;
	margin-top:7px;

}
#rcontain
{

	background:#eeeeee;
	float:right;
	width:575px;
      height:260px;
	margin-right:5px;
    margin-top:7px;

}
#rcontain  h1,#lcontain h1
{
color:#2f2f2f;
font-size:1.5em;
font-family:arial;
padding:15px 0px 0px 15px;
}
#rcontain p
{
color:#2f2f2f;
padding:10px 10px 0 15px;
}
#lcontain p,#lcontain h2
{
color:#2f2f2f;
padding-left:15px;
}
#lcontain h2
{
font-size:1.1em;
font-family:arial;
}
#lcontain a 
{
	color:#1c443b;
}
.col
{
float:left;
width:280px;
}
.col li a
{
float:none;
color:#1c443b;
text-decoration:underline;
}
.col li a:hover
{
	text-decoration:none;
}

/**footer ***/
#footer {
	background: #2e2e2e url(images/fstrip1.gif) repeat-x;
	margin: 0 auto;
	text-align: center;
	clear:both;
	height:30px;
}
#footer a {
	color: #5E6F6E;
	text-decoration: none;
}
#footer a:hover {
	color: #9ab2be;
	text-decoration: underline;
}

Merci d'avance

zebulon365 · 17 Juin 2010

Bonjour,

J'imagine qu'en remplaçant le texte par les images cela devrait être suffisant.

Seul risque un décalage qui se règle en utilisant "padding" qui permet de positionner plus finement l'élément.
/>http://www.w3schools.com/css/css_padding.asp

De manière plus générale, remplacer du texte par des images ne me semble pas une bonne option pour le référencement.

C'est surement plus esthétique mais pas efficace pour l'indexation du contenu par les moteurs de recherche.

Blueangel · 17 Juin 2010

Merci de cette première réponse.

La technique est-elle aussi valable pour mixer texte et icone ?

Sur la barre supérieure, nous pensions rajouter des icones sous le texte ( les icones méritent d'être explicitées, par "Acceuil", "Services", 3contact"...)

**captain_torche** · 17 Juin 2010

Doit-on comprendre que vous avez embauché un stagiaire sans avoir de personnel en interne pour le former ?

Si c'est bien le cas, c'est à notre sens complètement irresponsable : un stagiaire, qui est par définition un débutant, doit avoir un maître de stage qui l'aide dans sa formation. Ce n'est pas une ressource pour pas cher.

zebulon365 · 17 Juin 2010

Pour le menu du haut texte et image, il faut créer 2 menus (1 texte et 1 image) puis les positionner grâce au CSS l'un sur l'autre.

Exemple : http://www.paolyre.com/fr/index.php

Doit-on comprendre que vous avez embauché un stagiaire sans avoir de personnel en interne pour le former ?

Si c'est bien le cas, c'est à notre sens complètement irresponsable : un stagiaire, qui est par définition un débutant, doit avoir un maître de stage qui l'aide dans sa formation. Ce n'est pas une ressource pour pas cher.

C'est pas faux !

Blueangel · 17 Juin 2010

Merci à Zebulon365 pour ses pistes

Concernant la formation du stagiaire, elle ne peut se faire que dans une structure de taille moyenne.

Dans le cas présent, il fait son stage dans une TPE, ou il n' y a aucune compétence en interne pour le web.

Le client pensait en toute bonne fois que sa formation (BTS Iris)lui permettrait de développer un site web de façon autonome ( il est sensé faire de la conception web, selon le programme du BTS), en fait il a seulement des notions en HTML et des connaissances en PHP.

Voilà pourquoi il a autant de mal sur le CSS et le graphisme.

Je lui apporte toute l'aide possible, mais je ne suis ni développeur, ni graphiste (plutôt spécialisé en promotion internet, ce qui est loin du CSS).

**captain_torche** · 17 Juin 2010

Le client pensait en toute bonne fois que sa formation (BTS Iris)lui permettrait de développer un site web de façon autonome ( il est sensé faire de la conception web, selon le programme du BTS)

La formation n'est pas finie, il est illusoire de penser qu'avant même la fin du cursus, et sans expérience professionnelle, l'étudiant sera aussitôt opérationnel.

en fait il a seulement des notions en HTML et des connaissances en PHP [...] il a autant de mal sur le CSS et le graphisme.

Si ça peut vous rassurer, c'est également le cas de la majorité des développeurs professionnels que vous rencontrerez sur ce forum (et sur d'autres !). Un profil expert en tout (HTML, CSS, PHP, Graphisme, Référencement ...) est atypique, et se monnaye cher !Chacun de nous se concentre sur ce qu'il fait le mieux, il n'y a rien d'illogique là-dedans

Le principe d'un stage est d'apprendre quelque chose au stagiaire.

Dans ce but, il est nécessaire que le stagiaire ait un tuteur de stage, qui le soutienne tout le long de son apprentissage.

Un stagiaire n'est par définition pas opérationnel dès le début de son contrat (Une personne opérationnelle serait un employé ou un prestataire), il est censé acquérir les compétences nécessaires en cours de formation (formation dispensée en partie par le tuteur !).

Blueangel · 17 Juin 2010

Je joue ce rôle de tuteur en l'accompagnant le plus possible et lui fournissant le maximum de ressources pédagogiques, ceci dit je n'ai pas de compétences en CSS.

Bien entendu, on lui laisse largement le temps de progresser, c'est la règle du jeu ( j'ai participé à la formation de près de 300 webmasters , c'est pour ça que j'ai accepté de l'encadrer).

Merci pour vos conseils en CSS, celà lui sera très utile. :cool:

**Nullette** · 17 Juin 2010

Concernant les stagiaires, c'est une lourde tâche. Mon mari en a souvent (domaine de la menuiserie). Ils sont obligés de trouver des stages et ils ne savent presque jamais rien faire. Les stages ne durent pas longtemps non plus et c'est une grosse perte de temps pour le "tuteur"/entrepreneur. Les rares qui s'appliquent se mettent après à leur compte.

**captain_torche** · 17 Juin 2010

Exactement, Nullette : il faut bien comprendre qu'on ne prend pas un stagiaire pour qu'il fasse le boulot à notre place, mais bien pour lui apprendre à bien faire notre boulot !

En conséquence c'est un investissement en temps non négligeable, et il FAUT absolument consacrer du temps à son apprentissage.

Dudu · 18 Juin 2010

Salut

Il y a deux choses que je ne comprends pas.

La première. Comment fait-on pour s'y connaître en HTML et pas en CSS ??? On écrit des sites en noir et blanc ? :blink:

La deuxième chose que je n'arrive pas à comprendre, c'est ça:

ceci dit je n'ai pas de compétences en CSS.[...] j'ai participé à la formation de près de 300 webmasters , c'est pour ça que j'ai accepté de l'encadrer

Je dois sûrement mal comprendre.

Parce que, tel quel, vous dites que vous formez des gens à quelque chose que vous ne connaissez pas :huh:

Blueangel · 18 Juin 2010

"vous dites que vous formez des gens à quelque chose que vous ne connaissez pas"

Non, je les formais dans ma discipline ( marketing internet): une formation webmaster touche plusieurs disciplines.

" Comment fait-on pour s'y connaître en HTML et pas en CSS ???"

Le CSS est un module spécifique.

**captain_torche** · 18 Juin 2010

Non, je les formais dans ma discipline ( marketing internet): une formation webmaster touche plusieurs disciplines.

Et ces webmasters ne faisaient QUE du marketing internet lors de leur passage dans votre entreprise ?

J'avoue que je suis impressionné (et plutôt dubitatif) quant à la quantité de webmasters que vous avez formés. Etaient-ils tous stagiaires ?

**Portekoi** · 18 Juin 2010

Bonjour,

Un module spécifique? Un peu comme la roue est un module spécifique pour une voiture?

Bizarre votre manière de voir les choses.

Portekoi

Dudu · 18 Juin 2010

Le CSS est un module spécifique.

Vous êtes sérieux ou c'est de l'humour ?

Vous faites souvent des sites en noir et blanc, sans CSS ?

Blueangel · 18 Juin 2010

Et ces webmasters ne faisaient QUE du marketing internet lors de leur passage dans votre entreprise ?

Non, j'agissais en tant que formateur marketing internet dans un organisme de formation

J'avoue que je suis impressionné (et plutôt dubitatif) quant à la quantité de webmasters que vous avez formés. Etaient-ils tous stagiaires ?

Pas seul, nous étions 4 formateurs à nous relayer ( design, réseau, développement, marketing internet).

En session de 20 webmasters en alternance dans un centre de formation Parisien, on arrive vite à 300 ( 4 sessions par an).

Un module spécifique? Un peu comme la roue est un module spécifique pour une voiture?

C'est un module de formation.

on est très loin du sujet de départ.... :nonono:

Modifié 18 Juin 2010 par Blueangel

**captain_torche** · 18 Juin 2010

Nous nous sommes effectivement éloignés ... Mais c'est logique : je ne me serais pas aventuré à embaucher un stagiaire webdesigner, n'ayant pas moi-même de connaissances dans le domaine (bien que je me targue d'une expertise dans des domaines complémentaires).

Vous nous dites ne pas connaître vous-même le CSS ... Dans ce cas, il serait sans doute plus logique que ce soit votre stagiaire qui cherche lui-même l'information que vous ne pouvez pas lui fournir, faute de compétences, alors que vous êtes son tuteur de stage.

Je conseille donc à votre stagiaire de s'inscrire sur le forum, et de nous poser toutes les questions qu'il voudra : il obtiendra ses réponses et en profitera pour progresser, malgré les menus obstacles qui auront été mis sur son chemin.

**Nullette** · 19 Juin 2010

Pour terminer l'éloignement du sujet.

Il y a quelques années, j'avais suivi un cours de CSS où la majorité des stagiaires ne connaissaient pas le html

Valtiel · 19 Juin 2010

Et bien, j'ai aussi envie de dire que votre stagiaire devrait changer d'établissement car lui donner des notions d'HTML et de PHP en omettant le CSS en route, ça craint... .

Bref, concernant votre problème, il serait judicieux de nous montrer également le code HTML car pour votre problème, c'est au code HTML que nous allons plus toucher.

Pour votre barre de navigation, j'y inclurais (dans le code HTML) une balise <img /> et quant aux blocs, remplacer le texte par encore une balise <img />.

Exemple (barre de menu) :

code HTML


<div id="menu">
<ul>
     <li><img src="votreimage.extension" alt="nom de l'image" /><br/>
     <a href="http://www.free-css.com/free-css-templates.php">Accueil</a></li>
</ul>

Exemple (blocs) :

code HTML


<div id="content">
     <div id="left">
          <h1>STRATEGY</h1>
               <img src="votreimage.extension" alt="nom de l'image" />
          <h2>
               <a href="http://www.free-css.com/free-css-templates.php">[More]</a>
          </h2>
     </div>
</div>

Mais comme l'a dit Zebulon365, remplacer du texte par des images nuis au référencement.

Modifié 19 Juin 2010 par Valtiel

**Portekoi** · 20 Juin 2010

Pour terminer l'éloignement du sujet.

Il y a quelques années, j'avais suivi un cours de CSS où la majorité des stagiaires ne connaissaient pas le html

Comment est ce possible? Comment mettre en oeuvre du CSS sans HTML?

Comme d'apprendre à courir avant de marcher...

**Nullette** · 20 Juin 2010

Les personnes qui suivaient le stage provenaient à 90% de sociétés qui leurs payait ce stage dans le cadre de la formation continue.

Deux personnes connaissaient un peu de html et suivaient ce stage dans le but de créer un site commercial et moi je l'ai suivi, offert par mon mari (le stage était très cher - environ 1000 euros pour trois jours) et j'étais celle qui connaissait le plus html !!

baulet · 20 Juin 2010

comment est ce possible que l'éducation fournisse des illettrés?

comment est ce possible que l'anpe fournisse des stages bidon payés une fortune avec nos sous?

système navrant...mais quoi faire?

:nonono:

**Nullette** · 20 Juin 2010

Ce n'était pas payé par l'Anpe. Le stage était excellent, du moins pour moi.

Les stagiaires étaient des salariés et le prof que j'avais eu était très bon.

Dommage, il a disparu et n'a pas tenu sa promesse de donner de l'aide après les cours.

baulet · 20 Juin 2010

je parlais d'une manière générale, Nullette, ma remarque ne t'était pas adressée, ni à personne d'autre d'ailleurs.

pour les stages bidon de l'anpe, j'en réfère à ma propre expérience d'y il a quelques années... les stages "baisseurs de statistiques"!

aussi bon soit ton stage, je trouve navrant qu'un "responsable-qui-n'y-connais-rien" ait décidé de scinder HTML et CSS.

désolé de pourrir ton post Blueangel :blushing:

...pour en revenir au menu, un lien absolu avec "title" et son image fera l'affaire pour pallier le manque de texte.

et pour peaufiner le tout, une belle url bien "parlante" ne fera pas de mal.

je reprends le code de Valtiel:

<div id="menu">
<ul>
     <li><a title="un beau titre plein de mots clé" href="http://www.free-css.com/free-css-templates.php"><img src="votreimage.extension" alt="nom de l'image" /></a></li>
</ul>
</div>

Modifié 20 Juin 2010 par baulet

Connexion

Menu css avec icones

Sujets conseillés

Blueangel

zebulon365

Blueangel

captain_torche

zebulon365

Blueangel

captain_torche

Blueangel

Nullette

captain_torche

Dudu

Blueangel

captain_torche

Portekoi

Dudu

Blueangel

captain_torche

Nullette

Valtiel

Portekoi

Nullette

baulet

Nullette

baulet

Veuillez vous connecter pour commenter

Parcourir

Activité