Boutons Interactifs

Boutons Interactifs - HTML/CSS - Programmation

Marsh Posté le 20-11-2016 à 18:15:42    

Bonjour à tous je suis débutant en HTML/CSS j'ai fait un petit site perso pour m'essayer aux commandes et j'aimerais introduire des boutons interactifs pour essayer. Cependant j'ai essayé plusieurs choses et ça ne marchait pas. Si quelqu'un pourrait me dire comment proceder ^^.
 
Voici le code HTML ;  
 
<html>
 <head>
  <title>Site test</title>
  <link rel="stylesheet" type="text/css" href="Test css.css" />
 </head>
 <body>
  <a href="#" class="button"><span class="add">Add to your bookmark</span></a>
  <div id="Liens">
  <a href="http://www.youtube.com">Youtube</a>
  <a href="http://www.google.fr">Google</a>
  </div>
  <div id="Style">
  <img src="fallout.png" width="292" height="274">
  <h2 id="fallout">Test</h2>
</html>
 
 
Le code CSS ;  
 
body {
  background: url("fond.jpg" ) no-repeat fixed -6cm -0.5cm;
  margin: 100px 40px 10px 70px;
}
h2 {
  font: normal small-caps 18pt arial, sans-serif;
  text-decoration: overline underline;
}
p {
  text-indent: 30px;
  text-align: justify;
   
}
a {
  font-size:18pt;
}
a:link {
  color: #0000FF;
}
a:visited {
  color:#6600FF;
}
a:active {
  color:#0066FF;
}
a:hover {
  color: orange;
  font-style: italic;
  text-transform: uppercase;
}
a.google {
  color: purple;
}
a.google:hover {
  color: pink;
  font-style: italic;
  text-transform: uppercase;
}
#fallout {
  color: #336699;
}
#Liens {
  position:absolute;
  top:18%;
  left:5%;
  padding:20px 0px 10px 20px;
  height:50px;
  width:280px;
  border-width: thin;
  border-color: #FFFF00;
  border-style: dotted;
}
#Style {
  position:absolute;
  top:60%;
  left:80%;
}
 
 
Merci d'avance !

Reply

Marsh Posté le 20-11-2016 à 18:15:42   

Reply

Marsh Posté le 21-11-2016 à 16:29:44    

Et c'est sensé faire quoi un "bouton interactif" ?  
 
Pour partager ton code sur le forum tu devrais utiliser les balises code de l'édition de post, et pour permettre de tester rapidement les exemples tu peux utiliser jsfiddle (entre autres). Voilà ce que donne ton code par exemple : https://jsfiddle.net/5jn5cvzv/


---------------
Topic .Net - C# @ Prog
Reply

Marsh Posté le 03-12-2016 à 02:30:12    

Euh ton CSS ne fonctionnera pas comme ça =o  
 
Sont où les class sur les boutons des liens google et youtube ?
 
Parce que tu mets a.google mais dans la balise <a></a> t'as pas mit la class "google".
 
Comme ça, ça fonctionnera mieux : <a class="google" href="#">....</a>
 

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


 
Pas bien du tout de mettre des espaces dans les fichiers. La nomenclature c'est soit remplacer les espaces par des '_' soit écrire tes fichiers comme ça 'MonFichier.css', 'monFichier.css',... Mais surtout pas d'espace
 
Et je te conseil de voir les codepens si tu veux apprendre vite le css et html, y'a des gens qui font du code propre et très efficace.


Message édité par chrispc le 03-12-2016 à 02:35:00

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Sujets relatifs:

Leave a Replay

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