Rollover independant pour chaques boutons

Marsh Posté le 14-02-2009 à 04:00:55

Bonjour,

Je débute le HTML / CSS et j'ai quelques petits soucis ... après plusieurs heures de recherche et plus beaucoup de cheveux sur la tête, j'ai abandonné... :pt1cable:

Est il possible de créer un rollover sur chaques boutons, c'est à dire que mes boutons ont une forme différentes les uns des autres et le texte est deja présent dans le jpg. Je me retrouve donc avec 5 boutons dans mon dossier "images" + mes 5 boutons en mode rollover ; mais je n'arrive pas à les intégrer dans mon code.

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Morgan graphics</title>
<style type="text/css">

body {
background-color: #555555;
margin-top: 0px;
}

body,td,th {
font-size: 9px;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

</style>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

a:link {
color: #777777;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #999999;
}

a:hover {
text-decoration: underline;
color: #999999;
}

a:active {
text-decoration: none;
color: #999999;
}

a {
font-size: 9px;
}

.style1 {color: #CCCCCC}

</style></head>

<body>
<div align="center">
<table width="575" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="700" height="127" align="center" valign="top"><img src="images/header.gif" width="700" height="217" /></td>
</tr>
<tr>

<td height="28" align="center" valign="top"><a href="#"><img src="images/btn_accueil.gif" width="82" height="40" border="0" /></a><a href="#"><img src="images/btn_portfolio.gif" width="85" height="40" border="0" /></a><a href="#"><img src="images/btn_parcours.gif" width="85" height="40" border="0" /></a><a href="#"><img src="images/btn_cv.gif" width="85" height="40" border="0" /></a><a href="#"><img src="images/btn_contact.gif" width="83" height="40" border="0" /></a></td>
</tr>
<tr>
<td height="274" align="left" valign="top" class="tpl_body"><br />

<br />
<br />
<p> </p>
<p> </p>
Lorem ipsum nacerta java lagua sague orelut!</p>
<p>Sigue lavid lorem psute alarde sotrome ala luter salude comocion lajout ader soutre a vion porter asio.<br />
Please montro a ipsum porteur te reponse sali dejore hardser ilumiuder part friroure ala minore de putir .<br />
<br />
<br />

</td>
</tr>
<tr>
<td height="204" align="left" valign="top" class="line"> </td>
</tr>
<tr>
<td height="29" align="left" valign="top"><img src="images/footer.gif" width="700" height="38" /></td>
</tr>
<tr>
<td height="61" align="center" valign="top" class="footer2"><a href="#" target="_blank" class="style1">NBRgraphics</a></td>
</tr>
</table>

Il y a une autre partie sur une feuille css qui je pense ne vous informera pas plus.
Merci d'avance :hello:

Reply

Marsh Posté le 14-02-2009 à 04:00:55

Reply

Marsh Posté le 16-02-2009 à 11:38:05

Arrgh !

1. Quand tu postes du code, pense à utilser les balises qui vont bien :

Code :

body {
 background-color: #555555;
 margin-top: 0px;
}

Les balises code=css (par exemple).
Tu peux vérifier le résultat en cliquant sur le bouton Aperçu.
Du coup, tu constateras que code=html ne foncitonne pas :-(
=> Tu peux utiliser la balise cpp (ou code=php), à moins que quelqu'un sache comment présneter du html sur le forum...

2. Sépares ton CSS :
Crée un fichier style.css (par exemple) que tu appelles à partir de ta page.

Code :

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Avantage : si tu as plusieurs pages, tu gardes un unique fichier pour la présentation...

3. Vu que tu utilises un CSS, fais-le vraiment.
=> pas de description de table dans le HTML. Dans une balise

Code :

<td height="61" align="center" valign="top" class="footer2">

tu peux déporter dans le CSS tout et ne garder que

Code :

<td class= (ou id=)>

4. Tant qu'à faire profites-en pour faire une présentation correcte : un tableau ne sert pas à faire de la présentation, mais à présenter des données en tableau :fou:
Tu peux faire une recherche sur internet, par exemple sur "mise en page css" ou "mise en page sans tableau" pour avoir des conseils (et des détails sur pourquoi on ne doit pas utiliser de tableau)

5. Si je désactive les images, je ne vois pas ton menu. A corriger...

6. Pour en venir à ton problème - qui n'est qu'une conséquence du reste (mauvaise utilisation des possibilités du HTML et du CSS) :
Tu as le choix, suivant le type de bouton - et la police utilisée pour le texte...
en général, pour un rollover on définit une image de fond pour a et une autre (ou la même, mais décalée) pour a:hover

Reply

Rollover independant pour chaques boutons

Sujets relatifs:

Leave a Replay