Bannière avec boutons survolés

LeBonDu91 -
LeBonDu91 - 19 janv. 2014 à 01:17

Bonjour à tous,
-
Débutant dans la création de mon site internet, je désire créer une bannière avec boutons survolés. Quelle méthode me conseilleriez-vous pour y parvenir?
-
J'ai réussi à créer une banniére avec bouton voir mon site :
-
http://the-kamikaze.perso.sfr.fr/Index.html
-
Par contre je n'arrivé pas faire un rollover sur les boutons, sachant que ma bannière est une seule est même image (zone hypertexte fait sur Dreamweaver).
-
Je pense que je n'ai pas utilisé la meilleure méthode pour créer ma bannière.
-
Merci d'avance pour vos réponses.

Afficher la suite

A voir également:

Bannière avec boutons survolés
Comment réinitialiser un téléphone avec les boutons - Guide
A quoi servent les boutons de couleur sur une telecommande - Guide
Application pour reconnaître les boutons - Accueil - Outils
Bannière instagram - Guide
Comment déverrouiller un samsung avec les boutons - Guide

1 réponse

Réponse 1 / 1

ronto

Bonsoir, si vous voulez faire quelque chose de sérieu laissez tomber Dreamweaver pour apprendre HTML et CSS.

Dreamweaver 'écrit' de manière automatique le HTML et CSS à partir de ce que vous faites et n'est pas toujours fiable à ce que vous verrez sur le navigateur internet.
Pour voir le code il y a plusieurs méthodes d'affichage, les symboles entre < et > sont des balises HTML qui indiquent les éléments présents dans votre page.

Concrètement ce que vous pouvez faire avec Dreamweaver ou vous même en HTML et CSS:
Créez un cadre(balise <div>) auquel vous donner une taille en pixels ou en %(ce qui permet de s'adapter à toutes les tailles d'écrans).
Vous indiquez à ce cadre d'avoir l'image que vous utilisez en fond.
Il faut alors créer les boutons dans le cadre, ils seront au dessus de l'image et les positionner, ainsi qu'un texte éventuel.

Plusieurs autre remarque qui aideront à ce que vous ayez un site performant:

l'image est trop grande, j'ai une résolution d'écran standard(dimensions long X large) et l'image dépasse de ma fenêtre. Un visiteur va pas apprécié (il le fera probablement pas) de déplacer la barre pour voir toute la page.

Si vous utilisez un texte dans une image certes celui ci peut avoir de jolis effets et police mais cela pose plusieurs problèmes:
Google qui fait la liste des sites comme un annuaire ne le référenceras car il sait lire les textes mais pas les images.
Si votre site marche et que vous devez changer le design, faire une version dans une autre langue ou simplement que vous voulez changer le texte il faut changer toute l'image tandis qu'un texte comme c'est prévu et fait pour en HTML c'est quelques secondes pour ouvrir un fichier, changer le mot et enregistrer à nouveau.

Vous redimensionnez l'image en une taille plus petite et celle ci est toujours trop grande. Indiquez lui en valeur en % tout en la laissant centrée, tout les écrans verront la page de la même façon.

Je fait quelque chose et vous montre.

ronto


<!DOCTYPE html>
<meta charset="utf-8">
<html lang='fr'>
<head>
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
text-align:center;

}

cadre#div{
border:2px solid red;
width:80%;
padding-left:10%;
padding-right:10%;
background-image:url('http://the-kamikaze.perso.sfr.fr/banniere.jpg');
}

.h1{
text-align:center;
}
ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul li a {
position:relative;
top:-3em;
font-size:1.75em;
border-radius:8px;
 display:block;
 float:left;   
 width:208px;
 background-color:#648895;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
margin-left:2.6em;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {

 background-color:#cdcdff;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 } 
</style>
<meta charset="UTF-8">
</head>
<body>

<div id="cadre" >
<img src="http://the-kamikaze.perso.sfr.fr/banniere.jpg" style="width:100%;" />
<ul>
	<li>
<a classs="bt" href="pagecreation.html">
Mes Créations
</a>
	</li>
	<li>
<a classs="bt" href="pagetutos.html">
Mes Tutos
</a>
	</li>
	<li>
<a classs="bt" href="pageliens.html">
Liens Utiles
</a>
	</li>
</a>
</div>

</body>
</html>

ronto

Enregistrez ce code au format html
comme ceci par exemple:

test.html (le bloc notes de windows suffit, il suffit d'indiquer modifier l'extension et vous écrivez tout à la main).

Voilà on peut mieux faire en prenant le temps mais je vois que vous êtes graphiste.
En web design c'est indispensable de séparer autant que possible les éléments, un peu comme les calques de toshop.
Pour débuter :

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Par exemple mais avec un peu de pratique HTML est simple et CSS permet de peaufiner l'affichage des éléments au cas par cas.

ronto

nb: j'ai pompé le code des boutons ici:

http://css.mammouthland.net/menu-horizontal-en-css.php

LeBonDu91

Merci beaucoup pour votre réponse j'en prends j'ai effectivement note j'ai repris la base de la base avant même de lire ce que vous m'avez écris, j'apprend actuellement le HTML et le CSS. Cela me servira grandement. Merci beaucoup de m'avoir consacré de votre temps.

Discussions similaires

Freebox révolution écran TV qui saute a cause des bannières

Bannieres pub sur Free tv

Photo de mauvaise qualité (tumblr)

Supprimer bannières pub freebox

Votre réponse

Discussions similaires