Boutons Interactifs - HTML/CSS - Programmation
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/
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 :
|
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.
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 !