Différents petits "soucis" au niveau du

Question

Bonjour,

J'ai quelques problèmes concernant ma page web

Tout d'abord,
Je voulais créer un menu horizontal qui se serait mis sous ma bannière. Premiere difficulté : j'ai suivi les indications du siteduzero, mais mon css n'a pas l'air de fonctionner, ainsi quand je charge ma page avec le code html et css, je n'ai point ma mise en page css, ce qui est bien embetant...
Ensuite, comme je n'arrivais pas a créer ce menu horizontal, j'ai fais appel a un pote graphiste a moi qui a lui meme créer un menu horizontal a l'aide de toshop. cependant, deuxieme problene, je sais qu'on peut insérer des liens dans les images en définissant une zone de "cliquage" par les coordonnées de l'image a l'aide des balise "map" et "usemap". cependant, je n'arrive pas a savoir comment trouver ces coordonnées ...


j'espere que vous pourrez m'aider dans l'un ou l'autre des cas. Je ne vous demande pas de me faire un code tout frais payé, mais juste de m'indiquer une solution envisageable si vous le savez et que vous souhaitez me faire part de votre connaissance =D.

Amicalement

Robin.

dutom007 · Answer

Il y a beaucoup de chose à voir ici :p

Premièrement ton css qui n'est pas appliqué veut surement dire que tu as mal renseigner dans ta balise "link" le chemin de ton css.

Pour les coordonnés tu peux utiliser photoshop pour connaitre les coordonnées des points, sachant que le bord haut gauche a pour coordonnées (0,0)

Robin_01 · Answer

Bon, petit etat d'avancement :p

J'ai réussi a créer des onglets grace au css, iouuuuf XD
cependant, j'aimerais mettre une image bien spécifique en fond de ces onglets si vous voyez ce que je veux dire, ainsi je ne sais pas ou dans mon css je dois mettre et spécifier le background. De plus j'aimerais insérer une police partiulière (télécharger sur Dafont.com et donc orginal, et non présente sur les logiciels comme Word, open office ou autre..)

Pouvez vous m'aider toujours =D ?

Merci cependant, de m'avoir répondu dutom007 :)

Ci joint le code de mon css pour mes onglets : 



ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 float:left; /*pour IE*/
 border-left:3px solid black;
 }
ul li a {
 display:block;
 float:left;   
 width:150px;
 line-height:40px; /*hauteur de l'image de fond*/
 background:black url(images/noir-1.png) repeat-x;
 color:#DCDCDC;
 text-decoration:none;
 text-align:center;
 }
ul li a:hover {
 background:black url(images/noir-2.png) repeat-x;
 color:white;
 }

dutom007 · Answer

Il y a déja un background sur les liens (noir-1 et noir-2 au hover). Donc quand votre souris est sur le liens noir-2 apparait. Ainsi remplacer ceci par vos images changerait le fond. Concernant la police, pas de secret une police spécifique ne sera prise en compte que si le visiteur l'a! Il faut donc faire une image du texte. Ici deux possibilités vu que le texte devient blanc au survol: -Faire deux images grise et blanc du texte et intervertir au survol avec du javascript, c'est image remplaceront le texte dans le -Faire deux image une étant onglet normal plus texte et lautre onglet de survol +texte blanc, mais cela oblige à faire un css par onglet (#menu1, #menu2...) La deuxieme solution est la plus facile si vous ne connaissait pas le JS Troisième solution que je n'ai jamais testé mais qui devrait marché: ul { padding:0; margin:0; list-style-type:none; } li { float:left; /*pour IE*/ border-left:3px solid black; display:block; background:black url(images/noir-1.png) repeat-x; } li:hover { background:black url(images/noir-2.png) repeat-x; } ul li a { display:block; float:left; width:150px; line-height:40px; /*hauteur de l'image de fond*/ text-decoration:none; text-align:center; text-indent:-9000px; //Cache le texte } ul li a.menu1 { background:black url(images/text_menuX_OFF.png) repeat-x; } ul li a.menu1:hover { background:black url(images/text_menuX_ON.png) repeat-x; } ... ul li a.menuX { background:black url(images/text_menuX_OFF.png) repeat-x; } ul li a.menuX:hover { background:black url(images/text_menuX_ON.png) repeat-x; } Ainsi vous ne rajouter que les class menu1... menuX a vos

Robin_01 · Answer

d'accord d'accord, je pense voir a peu pres, ce que vous voulez dire :)

Cependant, je persiste, est-il possible d'intégrer une image fixe en background, quitte a supprimer le hover ?
Et le code que vous m'avez fourni, ne me fait apparaitre qu'un fond noir...

PS : je débute quand meme en css ^^"

et de plus, je n'ai aucune connaissance en JS. 

Merci encore de m'avoir répondu.

dutom007 · Answer

Pourriez vous préciser où vous souhaitez avoir ce backgroud? Sur la totalité du menu ou sur les onglets?

dutom007 · Answer

bg62 ton code est valide mais ne permet pas ce que veut Robin_1 car pas de block sur le <a>

Mon code est parfaitement valide... C'est mon commentaire pour le text-indent et le "..." pour dire la répétition de la manoeuvre...
Faire le malin avec un outils d'analyse sans même lire le post ou tenter de répondre ne sert à rien :p

Robin_01 · Answer

En fait ce que je veux faire, si vous avez bien compris, c'est un menu horizontale, comprenant plusieurs onglets, environ 4-5, et le probleme se situe sur le fond de l' ce menus, car avce le code css que j'ai je ne peux changer le fond de mon menu ... (a cause du hover donc je crois ...) et je voudrais changer le fond de ce menu par une image ( je crois que le format pour le css est le png), qu'un ami graphique m'a faite, cette image devra donc etre aux memes dimensions que celle que j'ai précédemment établies.

dutom007 · Answer

Alors premier point, tu peux utilisé tout type de format connu dans le css (jpg jpeg png gib bmp) cependant le seul à offrir de la transparance est le png. Pour ton menu c'est simple, il suffit d'encadrer ton menu comme suit (ex pour deux menus): HTML CSS: #menu { width:/* largeur de l'image de fond*/ height:/* hauteur de l'image de fond*/ background:black url(images/fond.png) no-repeat; ul { padding:0; margin:0; list-style-type:none; } li { float:left; /*pour IE*/ border-left:3px solid black; display:block; background:black url(images/noir-1.png) repeat-x; } li:hover { background:black url(images/noir-2.png) repeat-x; } ul li a { display:block; float:left; width:150px; line-height:40px; /*hauteur de l'image de fond*/ text-decoration:none; text-align:center; text-indent:-9000px; /* Cache le texte BIEN COMMENTE POUR BG62 :p */ } ul li a.menu1 { background:black url(images/text_menu1_OFF.png) repeat-x; } ul li a.menu1:hover { background:black url(images/text_menu1_ON.png) repeat-x; } ul li a.menu2 { background:black url(images/text_menu2_OFF.png) repeat-x; } ul li a.menu2:hover { background:black url(images/text_menu2_ON.png) repeat-x; }

Robin_01 · Answer

a savoir que quand vous marquez dans le code css 

menu 1 et menu 2 , je n'ai qu'a reproduire autant de fois que nécessaire la commande c'est cela?

En tout cas merci beaucoup de m'aider, je vais tester le doe et vous tiens au courant :)

dutom007 · Answer

Erruer de ma part: c'est :

MENU 1

MENU 2

bg62 · Answer

désolé ... après je me casserai mais là on ne peut pas laisser passer de fausses informations ...
cependant le seul à offrir de la transparance est le png. 
et le gif alors ??? ça n'existe pas ??
le png est souvent codé en 24 bits quand il est bien fait (ou 8 bits)  et cette version est très mal prise par IE ... fait un test, cherche dans le forum ou sur google tu verras ... les problèmes déjà survenus ...

Robin_01 · Answer

donc, dutom007, si j'ai bien compris, j'insere le css (pas de pb pour ça :D ) , et je remplace les "Menu X" par le nom de mes onglets c'est ça ?

dutom007 · Answer

Hum... j'ai un doute sur ta compréhension car la présence de menu1 on peut partout peut te mélanger alors voici le code pour 2 menu qui serait ACCUEIL et CONTACT: HTML CSS: #menu { width:/* largeur de l'image de fond*/ height:/* hauteur de l'image de fond*/ background:black url(images/fond.png) no-repeat; ul { padding:0; margin:0; list-style-type:none; } li { float:left; /*pour IE*/ border-left:3px solid black; display:block; background:black url(images/noir-1.png) repeat-x; } li:hover { background:black url(images/noir-2.png) repeat-x; } ul li a { display:block; float:left; width:150px; line-height:40px; /*hauteur de l'image de fond*/ text-decoration:none; text-align:center; text-indent:-9000px; /* Cache le texte BIEN COMMENTE POUR BG62 :p */ } ul li a.menu1 { background:black url(images/text_ACCUEIL_OFF.png) repeat-x; } ul li a.menu1:hover { background:black url(images/text_ACCUEIL_ON.png) repeat-x; } ul li a.menu2 { background:black url(images/text_CONTACT_OFF.png) repeat-x; } ul li a.menu2:hover { background:black url(images/text_CONTACT_ON.png) repeat-x; } Si je rajoute un menu je rajoute: HTML

NEWS

CSS ul li a.menu3 { background:black url(images/text_NEWS_OFF.png) repeat-x; } ul li a.menu32:hover { background:black url(images/text_NEWS_ON.png) repeat-x; } *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Rien de sert de courir (chez le reparateur) il suffit de partir sur CCM

Robin_01 · Answer

Ouais, c'est ce que je pensais.

J'essaye tout ça demain, je suis completement claqué la, je vous laisse, encore merci pour ton aide. =)

Robin_01 · Answer

En faite, soucis : Une fois rentré le code, je ne vois plus le css... je ne sais pas purquoi, j'ai pas modifié le dossier de destination, le css est directment intégré dans ma page voila ce que donne le code :

bg62 · Answer

cette balise n'est même pas ouverte au début ... oups ... c'est vrai j'ai dit que je laissais tomber ... !

Robin_01 · Answer

si si ^^ j'ai juste pas recopier tout le code. voila ce que ça donne en complet, et un peu modifier au niveau des liens :

Robin_01 · Answer

haha oui c'est vrai suis-je bête, cependant, je viens de rajouter ce que j'avais omis, et je remarque malgré tout, que maintenant mon onglet est tout noir, et que les deux onglets ne sont pas sur la meme ligne, mais l'un en dessous de l'autre ...

ci-joint un screen : 
http://img704.imageshack.us/img704/5696/screenshot017t.png


En espérant que vous pourrez toujours m'aider :)

dutom007 · Answer

CHAT

Section DOWNLOAD

il n'y a pas de ";" aprés la class

Robin_01 · Answer

enlevé mais le problème persiste malheureusement, je ne vois vraiment pas où est l'erreur, déja pour l'alignement de mes onglets :

c'est bien la commande float: left ; 
non ? 
Et j'ai résolu le pb du background sa y est :)

dutom007 · Answer

Personnellement j'aurais fait ainsi:

/* Menu */
#menu {
       /* Ce que tu as */
}
#menu ul {
	margin:0px;
	padding:0px;
}
#menu ul li {
	margin:0px;
	padding:0px;
	display:inline;
	list-style:none;
}
#menu ul li a{
	font-size:18px;
	font-weight:bold;
	color:#888;
	text-decoration:none;
	padding: 5px 10px 5px 10px;
	font-family:"Century Gothic";
}
#menu ul li a:hover, #menu ul li a.active{
	color:#EEE;
}

Ceci est une exemple sans background.. Donc tu rajoute les tailles et tout ce que tu veux ^^

Robin_01 · Answer

J'ai pas super bien capter le code, 
Donc je repet juste, j'arrive plus a mettre les textes des onglets de maniere linéaire, et non verticale, de plus, ou puis-je changer la taille d'espacement entre deux onglets ? (en gros par exemple : je veux que Accueil et Contacts soit séparé par 45px pour correspondre a mes bordures sur mon Background, comment faire ? ^^)

Robin_01 · Answer

Je vous ai ajouté, en attente de confirmation.

Différents petits "soucis" au niveau du

23 réponses

Votre réponse

Discussions similaires

Newsletters