Tom's Guide > Forum > Programmation > probleme css debutant

probleme css debutant

Forum Programmation : probleme css debutant

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
lexdc   21-07-2006 à 01:44:11

bon voila je viens de me mettre au css avec les feuilles de style et tout et tout et je voudrai simplifier mes page. Le but serai de pouvoir changer le menu de toutes les pages juste en modifiant le fichier .css, j'y arrive avec du texte mais pas pour les images surtout les images avec animation (changement au passage de la souris)
voila le menu

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
DIgItaL_ReaM   21-07-2006 à 01:52:41
- 0 +

je comprend pas trop ce que tu veux dire :/

Enfin bon soit pour changer le comportement d'une image se trouvant dans un div

#nomDuDiv img
{
/*propriétés*/
}

pour le changement lors du passage

#nomDuDiv img:hover
{
/*proprétés*/
}

Répondre à DIgItaL_ReaM
mongos@IDN   21-07-2006 à 01:55:48
- 0 +

met ce code

.imgmenu1 {background-image:url(urlimg);}
.imgmenu1:hover {background-image:url(urlimg2);}


urlimg=>adresse de l'image quand la souris n'est pas sur le lien

urlimg2=>adresse de l'image quand la souris est sur le lien

tu met ensuite le lien suivant dans la page html :
<a href="urllien" class="imgmenu1"> </a>

Répondre à mongos@IDN
lexdc   21-07-2006 à 02:00:20
- 0 +

merci je vai essayer vos codes, j'adore ce forum que des gens sympas, serieu sa aide beaucoup les debutants

merci !!!! ;-)

Répondre à lexdc
DIgItaL_ReaM   21-07-2006 à 02:23:24
- 0 +

Petit conseil de programmation web , fait un fichier externe qui ne contiendra que ton css , ca rendra plus clair ton code quand il sera plus étoffé .

La ligne à mettre dans ton head pour que le fichier css soit chargé.

Code :
  1. <link rel="stylesheet" type="text/css" href="style.css" />



Par contre je crois que ta balise style n'est pas utilisée comme il faut .

Si tu veux écrire dans ton html les propriétés css , ca devrait donner plutot ceci :

Code :
  1. <p style="background-color:#FFFFFF;font-size:10px;" > le texte </p>



Edit :petite note supplémentaire il n'y a rien entre tes balises <a> donc c'est normal que ca n'affiche rien . Donc je te dirai de mettre un width et un heigh definit pour qu'il prenne une taille par défaut.

Répondre à DIgItaL_ReaM
lexdc   21-07-2006 à 02:30:31
- 0 +

pour le reste de mon site j'aurai un fichier .css t'inquiet
la c'etai juste pour l'exemple et ton idée de rajouté les dimension ne marche pas parce que les balise <a></a> sont des balise de ligne ou je sais plus quoi
personne ne s'y connai un peu avec <div></div>
(j'ai plus beaucoup d'espoire) :-(

Répondre à lexdc
DIgItaL_ReaM   21-07-2006 à 02:38:14
- 0 +

bah si avec les div ca marche comme je te l'ai mis au dessus .

tu définis ton div dans le html:

Code :
  1. <div id="essai"></div>



tu définis les propriétés css

Code :
  1. #essai
  2. {
  3. width:200px;
  4. height:20px;
  5. background-image:url de ton image
  6. }
  7. #essai:hover
  8. {
  9. background-image:url de la deuxième image
  10. }

Répondre à DIgItaL_ReaM
lexdc   21-07-2006 à 02:46:21
- 0 +

sa marche toujours pas ... :-?
t'es sur que tu t'y connai ???
si oui, je pourrai peut etre partir d'une map :
exemple
mais je remplacerai les zoom de l'exemple par une nouvelle image, c'est possible ???

Répondre à lexdc
lexdc   21-07-2006 à 02:47:50
- 0 +

je re demain laisser moi des pti msg de coup de main svp

Répondre à lexdc
DIgItaL_ReaM   21-07-2006 à 02:52:07
- 0 +

Met moi ton source complètement , ca ira bien plus vite ...

Répondre à DIgItaL_ReaM
DIgItaL_ReaM   21-07-2006 à 02:56:38
- 0 +

J'ai toujours fait comme ca , et ca marche .

Vu que t'as l'air d'en douter , je vais te filer carrément un source complet , à toi à changer juste le lien des deux images .

Pour le html :

Code :
  1. <div id="menu">
  2.     <ul>
  3.       <li><a href="index.php?trt=news">News</a></li>
  4.       <li><a href="index.php?trt=forum">Forum</a></li>
  5.       <li><a href="#">Compte</a></li>
  6.       <li><a href="#">Membres</a></li>
  7.       <li><a href="index.php?trt=forminscription">Inscription</a></li>
  8.       <li><a href="#">A propos de </a></li>
  9.     </ul>
  10.   </div>



pour le css

Code :
  1. #menu
  2. {
  3.     background-image:url(images/menuhaut.gif);
  4.     position:absolute;
  5.     top:25px;
  6.     left:0px;
  7.     text-align:left;
  8.     font-family : arial;
  9.     font-size : 11px;
  10. }
  12. #menu ul
  13. {
  14.     width : 173px ;
  15.     height : 246px;
  16.     list-style:none;
  17.     padding-left : 29px;
  18.     padding-top: 29px;
  19.     text-transform : uppercase;
  20. }
  22. #menu li
  23. {
  24.     line-height : 30px;
  25.     text-align : left;
  26.     text-indent : 5px; 
  27.     list-style:none;
  28. }
  30. #menu li a
  31. {
  32.     background : transparent url(images/bg_menu.gif) bottom no-repeat;
  33.     width: 150px;
  34.     display: block;
  35.     height : 30px;
  36.     text-decoration: none;
  37.     margin :  0;
  38.     padding : 0;
  39.     color  : #232323;
  40.     list-style:none;
  41. }
  42. #menu li a:hover
  43. {
  44.     background : transparent url(images/bg_menu_ov.gif) bottom no-repeat;
  45.     height : 30px;
  46.     list-style:none;
  47. }



Et peut etre tout mon header :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>Site</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta http-equiv="Content-Language" content="fr" />
  7. <meta name="Description" content="" />
  8. <meta name="Keywords" content="" />
  9. <link rel="stylesheet" type="text/css" href="style.css" />



Si après ca tu me dis que ca ne fonctionne pas , je crois que ta touche copier coller doit avoir un problème ;)

Répondre à DIgItaL_ReaM
Kymic@IDN   21-07-2006 à 11:51:40
- 0 +

Tu as un lien qui est dans un div (ou plusierus liens )

donc tu fais sa :


#ton_div a{
color:red;
}

#ton_div a:hover{
color:blue;
}


voila qd tu survoleras ton lien il deviendra bleu.
Apres a toi d'apapter avec une image de background...

Répondre à Kymic@IDN
Kymic@IDN   21-07-2006 à 11:53:26
- 0 +

( petit souci de connexion du coup double post => à supprimer )

Répondre à Kymic@IDN
lexdc   21-07-2006 à 12:41:29
- 0 +

ouai mais c'est avec des images que je veu faire tt sa

Répondre à lexdc
lexdc   21-07-2006 à 12:49:44
- 0 +

j'ai pas été malin :
mon site
et dans le css je peux aussi definir la couleur bleu du tableau ???

Répondre à lexdc
lexdc   21-07-2006 à 13:48:45
- 0 +

c'est possible de faire comme avec les fichier .css mais de preprogramme un morceau de page en html
et apres des que je modifie ce morceau de page les autre page changeron aussi, vous me suivez ???

Répondre à lexdc
lexdc   21-07-2006 à 14:10:50
- 0 +

probleme reglé, je met le code pour ceux que sa iinteresse

<html>
<head>
<style>
#Menu a{
background-image:url(Image/Menu/Menu.png);
width : 200px ;
height : 26px;
}

#Photos a{
background-image:url(Image/Menu/Photos1.png);
width : 200px ;
height : 26px;
}
#Photos a:hover{
background-image:url(Image/Menu/Photos2.png);;
}

#Liens a{
background-image:url(Image/Menu/Liens1.png);
width : 200px ;
height : 26px;
}
#Liens a:hover{
background-image:url(Image/Menu/Liens2.png);;
}

#Jeux a{
background-image:url(Image/Menu/Jeux1.png);
width : 200px ;
height : 26px;
}
#Jeux a:hover{
background-image:url(Image/Menu/Jeux2.png);;
}

#TV a{
background-image:url(Image/Menu/TV1.png);
width : 200px ;
height : 26px;
}
#TV a:hover{
background-image:url(Image/Menu/TV2.png);;
}

#ST a{
background-image:url(Image/Menu/ST1.png);
width : 200px ;
height : 26px;
}
#ST a:hover{
background-image:url(Image/Menu/ST2.png);;
}

#Skyblog a{
background-image:url(Image/Menu/Skyblog1.png);
width : 200px ;
height : 26px;
}
#Skyblog a:hover{
background-image:url(Image/Menu/Skyblog2.png);;
}

#Xiaoxiao a{
background-image:url(Image/Menu/Xiaoxiao1.png);
width : 200px ;
height : 26px;
}
#Xiaoxiao a:hover{
background-image:url(Image/Menu/Xiaoxiao2.png);;
}

#Livreor a{
background-image:url(Image/Menu/Livreor1.png);
width : 200px ;
height : 26px;
}
#Livreor a:hover{
background-image:url(Image/Menu/Livreor2.png);;
}
</style>
</head>
<body>
<div id="Menu"><a href=""></a></div>
<div id="Photos"><a href="index.php?trt=news"></a></div>
<div id="Liens"><a href="index.php?trt=news"></a></div>
<div id="Jeux"><a href="index.php?trt=news"></a></div>
<div id="TV"><a href="index.php?trt=news"></a></div>
<div id="ST"><a href="index.php?trt=news"></a></div>
<div id="Skyblog"><a href="index.php?trt=news"></a></div>
<div id="Xiaoxiao"><a href="index.php?trt=news"></a></div>
<div id="Livreor"><a href="index.php?trt=news"></a></div>
</body>
</html>

Répondre à lexdc
lexdc   21-07-2006 à 21:29:11
- 0 +

le code marchai bien, j'ai refai toutes les pages du site sur mon pc, j'envoi par ftp et pouf y a plus rien qui marche !!
regarder

Répondre à lexdc
lexdc   21-07-2006 à 21:44:58
- 0 +

aller svp je suis degouté la !!!
j'aitout fai nikel sur mon pc et plus rien sur le site

Répondre à lexdc
lexdc   21-07-2006 à 21:46:53
- 0 +

heu desolé ...
j'ai fai une gaff...
mais c'est pas ma faute : sa marche pas avec firefox

Répondre à lexdc
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > probleme css debutant
Aller à :

Il y a 1508 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,615 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens