Boutons Interactifs
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/
---------------
Réalisation amplis classe D / T Topic .Net - C# @ Prog
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.
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
Sujets relatifs:
- faire plusieur boutons flash sur la même scène
- Message box avec 6 boutons?
- Personalisation des boutons de partage sur les réseaux sociaux
- reprogrammer des boutons en VBA
- 2 Textbox 2 boutons 2 couleurs
- boutons ajout date et heure actuelle si la case est vide (excel)
- Codes pour les Boutons d'un formulaire sur Excel
- Afficher bannière et ses boutons en allant la chercher sur autre page
- boutons + labels
- image en surbrillance par plusieurs boutons meme page
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 !