[Résolut]Plusieurs questions à propos du Xhtml

Plusieurs questions à propos du Xhtml [Résolut] - HTML/CSS - Programmation

Marsh Posté le 20-06-2006 à 20:30:40    

Bonjour,
Je debute dans le xhml
Je viens de commencer mon premier petit site réalisé avec notepad++ ,j'ai beaucoup avancé grace aux tutos mais j'ai des questions :
-Comment faire pour réaliser un liens où il y a deux images...C'est à dire ,avec photoshop ,j'ai fais deux images une avec le texte en gris (non eclairé) et une avec le texte en blanc (texte eclairé) et donc je voudrais que on voit le texte en gris sur la page ,puis quand la sourie va dessus on vois le texte en blanc (deuxieme image) et que le tout donne sur un lien.
-Ensutie je m'amuse donc a faire un menu avec des images en colonne.Le problème c'est que toutes mes images sont séparé par un petit blanc...Et je n'arrive pas à y remedier.
 
J'éspère que vous avez à peut près compris ce que je voulais.
Au pire je vous mettrais des images.
Merci d'avance


Message édité par Alexzo le 22-06-2006 à 01:03:11
Reply

Marsh Posté le 20-06-2006 à 20:30:40   

Reply

Marsh Posté le 20-06-2006 à 21:22:04    

Pas de réponse ?Même a au moins une question ?

Reply

Marsh Posté le 20-06-2006 à 21:25:11    

Reply

Marsh Posté le 20-06-2006 à 21:42:06    

Oui voilà c'est ca !!Comment je fais ?

Message cité 1 fois
Reply

Marsh Posté le 20-06-2006 à 21:43:49    

une question de plus : est ce que l'on peut interdire les cliques droits avec du xhtml ?

Reply

Marsh Posté le 20-06-2006 à 21:49:47    

Alexzo a écrit :

Oui voilà c'est ca !!Comment je fais ?


Si je te donnais un exemple ultra basique tu penses que tu pourrais l'etudier pour comprendre ?

Reply

Marsh Posté le 20-06-2006 à 21:51:05    

oui
Je suis pas idiot ,j'ai déjà de bonne conaissance ,mais il y a des choses que je ne connais pas ^^

Reply

Marsh Posté le 20-06-2006 à 21:53:43    

Exemple ultra basique : http://afbilou.free.fr/tmp/preload.html :s
 
Astuce : lire le code source minimaliste ... et regarder l'image "image.jpg"

Reply

Marsh Posté le 20-06-2006 à 21:55:49    

ok je vois le code sourceet dans le fichier image ,il ya à deux images ,je vais essayer de me debrouiller avec ca.
Merci ^^

Reply

Marsh Posté le 20-06-2006 à 22:03:39    

faut que je met <style type="text/css">
  a {
   display:   block;
   width:    280px;
   height:    99px;
 
   background-image: url(image.jpg);
   background-position:0 0;
  }
  a:hover {
   background-position:0 98px;
  }
 </style>
 
Dans le fichier .css ? Ou je peux le mettre directement dans le fichier .html ?

Message cité 1 fois
Reply

Marsh Posté le 20-06-2006 à 22:03:39   

Reply

Marsh Posté le 20-06-2006 à 22:06:01    

j'ai beau faire avec ton exemple ,mais ya rien a faire ,min image ne s'affiche pas du tout...

Reply

Marsh Posté le 20-06-2006 à 22:09:14    

En gros moi ca donne ca :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Crealexzo</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
   </head>
   <body>
   <div id="en_tete">
</div>
 
<div id="menu">
   <a href="http://www.crealexzo.free.fr"><img src="boutons/acceuil_noir.jpg"/> </a> <br/>
 <style type="text/css">
  a {
   display:   block;
   width:    150px;
   height:    75px;
 
   background-image: url(boutons/gallerie.jpg);
      background-position:0 75px;
  }
  a:hover {
   background-position:0 75px;
  }
 </style> <br/>
</div>(après ya la suite mais là ya pas besoin....)
 
Ou est mon erreur ?

Reply

Marsh Posté le 20-06-2006 à 22:10:23    

Alexzo a écrit :

faut que je met <style type="text/css">
  a {
   display:   block;
   width:    280px;
   height:    99px;
 
   background-image: url(image.jpg);
   background-position:0 0;
  }
  a:hover {
   background-position:0 98px;
  }
 </style>
 
Dans le fichier .css ? Ou je peux le mettre directement dans le fichier .html ?


L'exemple ne repondrait il pas de lui meme ?  :heink:

Reply

Marsh Posté le 20-06-2006 à 22:12:51    

ok ,donc faut que je le met dans le .css ,c'est pour ca que ca marche pas.

Reply

Marsh Posté le 20-06-2006 à 22:16:13    

L'exemple fonctionne comme ceci :
 
* on crée un fichier image qui comprend les deux etats de l'image : au repos et parcouru par la souris - voir image.jpg
* la CSS indique que le lien <a> doit avoir comme image de fond image.jpg . Comme l'element <a> a une certaine dimanesion ... il se trouve que on ne verra que la partie de image.jpg que l'on souhaite.
* Quand le lien est survolé par la souris on modifie les coordonnées d'affichage du fond pour que ce soit la deuxieme partie de l'image que l'on voit a travers la "fenetre" de l'element <a>.

Reply

Marsh Posté le 20-06-2006 à 22:18:53    

Ca j'ai compris ,mais alors je vois pas ou est mon erreur :D

Reply

Marsh Posté le 20-06-2006 à 22:21:43    

Ben tu fais totalement n'importe koi dans TON exemple.
Je n'arrive pas a imaginer que tu puisses avoir compris quoi que ce soit :/
Tu connais pourtant les CSS ??

Reply

Marsh Posté le 20-06-2006 à 22:24:53    

oui
J'ai un fichier .css
qui me determine la position de mes cadres ,la couleur de la police ,la taille ,etc....
Mais là en fait c'est dans un cadre que j'ai appelé menu ,je voudrais mettre environ 4 boutons de ce genre là...
Mais comme en fait le tuto que j'ai vu a propos des cadres et le tient ne corresponde pas .Je suis un peu perdu :(
Car j'ai bien trouver pour faire la même chose mais que avec des liens alors que je veux le faire mais avec des images...

Reply

Marsh Posté le 20-06-2006 à 22:35:05    

Bon ,j'ai à peut près réussi ,ca fais l'effet que jeveux ,mais bon c'est pas encore ca ^^
Merci encore à toi
Mais comment faire si je veux faire la meme chose mais avec les boutons les uns sur les autres et comment les associer à un lien ?


Message édité par Alexzo le 20-06-2006 à 22:37:34
Reply

Marsh Posté le 20-06-2006 à 22:38:03    

Exemple avec des "boutons" de dimension 100x40 pixels

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  5. <head>
  7.  <title>Rollover</title>
  8.  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  10.  <style type="text/css">
  11.   ul * {
  12.    margin:    0;
  13.    padding:   0;
  14.   }
  15.   ul li a {
  16.    display:   block;
  17.    width:    100px;
  18.    height:    40px;
  20.    background-position:0 0;
  21.   }
  22.   ul li a:hover {
  23.    background-position:0 40px;
  24.   }
  25.   #bouton1 { background-image: url(image/menu1.jpg); }
  26.   #bouton2 { background-image: url(image/menu2.jpg); }
  27.   #bouton3 { background-image: url(image/menu3.jpg); }
  28.   #bouton4 { background-image: url(image/menu4.jpg); }
  29.   #bouton5 { background-image: url(image/menu5.jpg); }
  30.  </style>
  32. </head>
  34. <body>
  36. <h1>Un menu avec rollover CSS</h1>
  38. <ul>
  39.  <li id="bouton1"><a href="">Menu 1</a></li>
  40.  <li id="bouton2"><a href="">Menu 2</a></li>
  41.  <li id="bouton3"><a href="">Menu 3</a></li>
  42.  <li id="bouton4"><a href="">Menu 4</a></li>
  43.  <li id="bouton5"><a href="">Menu 5</a></li>
  44. </ul>
  46. </body>
  48. </html>


Message édité par afbilou le 20-06-2006 à 22:43:48
Reply

Marsh Posté le 20-06-2006 à 22:41:55    

Merci ;)

Reply

Marsh Posté le 20-06-2006 à 22:51:43    

Bon ,une fois de plus je n'y arrive pas ,mainteant il me marque *menu 1  
                                                                                    *menu 2
Mais bon je vais y arriver ^^

Reply

Marsh Posté le 20-06-2006 à 22:54:24    

il y a bien une partie a mettre dans le css et une autre dans le htm ?

Reply

Marsh Posté le 20-06-2006 à 22:57:35    

avec l'ancienne methode à un bouton ca marchait et là ca marche plus :(
Dans le htm j'i mis ca :

Code :
  1. <div id="menu">
  2.  
  3.     <ul>
  5.         <li id="bouton1"><a href="http://www.crealexzo.free.fr">Acceuil</a></li>
  7.         <li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/">Gallerie</a></li>
  8. </ul>
  10.  
  11. </div>


 
et dans le css j'ai mis ca :

Code :
  1. ul * {
  5.             }
  7.             ul li a {
  9.                 display: block;
  10.                 width: 150px;
  11.                 height: 75px;
  13.                 background-position:0 0;#
  14.             }
  16.             ul li a:hover {
  18.                 background-position:0 75px;
  20.             }
  22.             ul a#bouton1{ background-image: url(boutons/acceuil.jpg); }
  24.             ul a#bouton2 { background-image: url(boutons/gallerie.jpg); }


 
Quest ce qui manque ?


Message édité par Alexzo le 20-06-2006 à 22:59:10
Reply

Marsh Posté le 20-06-2006 à 23:15:46    

a#bouton1 n'existe pas dans ton html :s

Reply

Marsh Posté le 20-06-2006 à 23:18:32    

Reply

Marsh Posté le 20-06-2006 à 23:21:41    

merci ,ca marche un peu mieu ,mainteant jai le lien en bleu souligné qui saffiche avec mes images animés.


Message édité par Alexzo le 20-06-2006 à 23:25:11
Reply

Marsh Posté le 20-06-2006 à 23:27:31    

mais comme tu as de bonnes connaissances tu vas savoir le vire grace aux css

Reply

Marsh Posté le 20-06-2006 à 23:28:07    

J'ai resolu le problème de du lien souligné en bleu ,il n'apparait plus c'est bon ;)
Par contre maintenant j'ai un point noir a coté de chaque image animé ce qui fais que mes boutons animé sont decallés sur la droite..

Reply

Marsh Posté le 20-06-2006 à 23:30:46    

Maintenant j'ai ca :

Code :
  1. <div id="menu">
  2.  
  3.     <ul>
  5.         <li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
  7.         <li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
  8. </ul>


 
 
et ca  

Code :
  1. ul li a {
  3.                 display: block;
  4.                 width: 150px;
  5.                 height: 75px;
  7.                 background-position:0 0;#
  8.             }
  10.             ul li a:hover {
  12.                 background-position:0 75px;
  14.             }
  16.              #bouton1 a { background-image: url(boutons/acceuil.jpg); }
  17.    #bouton2 a { background-image: url(boutons/gallerie.jpg); }


Message édité par Alexzo le 20-06-2006 à 23:31:14
Reply

Marsh Posté le 20-06-2006 à 23:33:49    

Wahou ...
Mais c'est mal ! il faut du texte dans les liens !
avec text-indent tu vires le texte grace au CSS.

Reply

Marsh Posté le 20-06-2006 à 23:35:19    

Peut tu être plus clair stp et me dire la marche a suivre ,car je galère commec c'est pas possbile :(

Reply

Marsh Posté le 21-06-2006 à 00:13:37    

Bon j'ai réussi à enlver les point ,maintenant il rest le problème du menu qui est trop à gauche .
Html :

Code :
  1. <div id="menu">
  2.  
  3. <ul>
  5.         <li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
  7.         <li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
  8. </ul>


 
CSS :
 

Code :
  1. ul {list-style-type: none;
  3. }
  4. ul li a {
  6.    list-style-type: none;
  7.                 display: block;
  8.                 width: 150px;
  9.                 height: 75px;
  11.                 background-position:0 0;#
  12.             }
  14.             ul li a:hover {
  16.                 background-position:0 75px;
  18.             }
  20.              #bouton1 a { background-image: url(boutons/acceuil.jpg); }
  21.    #bouton2 a { background-image: url(boutons/gallerie.jpg); }


Et image du problème :
 
http://img521.imageshack.us/img521/9595/problme5wd.jpg
 
Comme vous pouvez le voir ,mes boutons sont trop à droite et chevauche mon texte,je ne sais pas pourquoi.
 
Merci pour votre aide .
A demain matin et bonne nuit mdr  :sleep:


Message édité par Alexzo le 21-06-2006 à 00:16:04
Reply

Marsh Posté le 21-06-2006 à 11:27:32    

Bonjour ,un petit up ,car là je suis bloké ,je peux rien fare ^^

Reply

Marsh Posté le 21-06-2006 à 14:14:29    

bon je galère là...Personne pour m'aider ?
Quand je pense au nombre de fois où ce poste à été lut.
Help

Reply

Marsh Posté le 21-06-2006 à 14:24:57    

Pas besoin de upper le sujet tout les secondes...
 
;) si personne répond, laisse le temps. Ton probléme n'a pas l'air incommensurable, alors cherche un peu de ton côté :D
 
Si tu trouves pas , maybe ce soir, je te donne la soluce

Reply

Marsh Posté le 21-06-2006 à 14:29:29    

J'ai pas suivi le topic... mais tu as bien mis le margin à zéro sur le ul ?


Message édité par j_lecruel le 21-06-2006 à 14:29:37

---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 21-06-2006 à 14:37:22    

Ca fais un bon moment que je cherche tout seul (hier soir ,ce matin ,enfin j'arrete pas ) et merci à toi j_lecruel ,j'avais oublié de mettre ca :  

Code :
  1. margin:    0;
  2.            padding:   0;


à ul ,merci encore pour votre aide ,mon problème est enfin resolu je vais pourvoir avancer ;)
Maintenant ca donne ca :  
Pour le css

Code :
  1. #menu
  4.  
  6. ul
  7. {
  8. padding:   0;
  9. margin:    0;
  10. list-style-type: none;
  11.   float: left; /* Le menu flottera à gauche */
  12. }
  13. ul li a {
  16.                 display: block;
  17.                 width: 150px;
  18.                 height: 75px;
  21.             }
  23.             ul li a:hover  { background-position:0 75px;}
  25.              #bouton1 a { background-image: url(boutons/acceuil.jpg); }
  26.    #bouton2 a { background-image: url(boutons/gallerie.jpg); }


 
et pour le html :

Code :
  1. <div id="menu">
  2.  
  3. <ul>
  5.         <li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
  7.         <li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
  8. </ul>


 
Si j'ai d'autre problème je vous avert


Message édité par Alexzo le 21-06-2006 à 14:38:47
Reply

Marsh Posté le 21-06-2006 à 14:47:37    

afbilou a écrit :

http://afbilou.free.fr/tmp/preload.html


 
 
super malin, je n'avais encore jamais vu un rollover sans javascript, merci  :jap:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed