Aller au contenu

Menu css avec icones


Blueangel

Sujets conseillés

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:

nav1.jpg

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

fstrip4.jpg

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)

nav2q.jpg

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 :)

Lien vers le commentaire
Partager sur d’autres sites

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.

;)

Lien vers le commentaire
Partager sur d’autres sites

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"...)

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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 !

Lien vers le commentaire
Partager sur d’autres sites

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).

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

"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.

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
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é par Blueangel
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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é par Valtiel
Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

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 !!

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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é par baulet
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...