28172 sujets

CSS et mise en forme, CSS3

Image au survol

Bonjour,

J'ai installé sur mon site un tableau pour visualiser un calendrier de floraison
Les données s'affichent correctement et la souris détecte bien l'image contenue dans la cellule photos, mais le format de la ligne est redimensionné.
Je souhaiterais que l'image apparaisse en plus grand, en survol et en superposition , sans modifier la ligne .
Mon code html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylecalendar.css">
</head>
<body>
<table>
<CAPTION><FONT FACE="ARIAL" SIZE="8" , color=#000000 >Tableau de floraison des fleurs méllifères</FONT></CAPTION>
<thead>
<tr>
<th>Nom commun</th>
<th>Photos</th>
<th>Nom latin</th>
<th>Famille</th>
<th>Floraison</th>
<th>Nectar</th>
<th>Pollen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amandier</td>
<td style="width:50px;height:70px";
onmouseover="this.style.backgroundImage='url(amandier.jpg)';"
onmouseout="this.style.backgroundImage='url(none)';" >
Amandier </td>
<td>Prunus dulcis</td>
<td>Rosacées</td>
<td> Février->Mars</td>
<td>++</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='#6f5b5a';" onMouseOut="this.bgColor='#FFFFFF';" >Gris marron</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Nom commun</th>
<th>Photos</th>
<th>Nom latin</th>
<th>Famille</th>
<th>Floraison</th>
<th>Nectar</th>
<th>Pollen</th>
</tr>
</tfoot>
</table>
</html>

Mon code css
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
}
tr:hover{background-color:#EFEFEF}
td, th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
th {color:#000000;font-size:18px;}
td {color:#000000;font-size:15px;}
tr:nth-child((3n+0) {
background-color: #D9E6F6;
}
</style>
Avez-vous une solution ?
Par avance merci et bonne année 2017
Bien cordialement
api82 upload/63620-Calendrier.jpg
Bonjour,

Pas évident de plonger dans ce problème. Le fait de na pas utiliser les balises de mise en forme du forum est rédhibitoire.

De plus j'ai du main à cerner le sens de ce propos Smiley confus
Api82 a écrit :
mais le format de la ligne est redimensionné
A mon sens, le format d'une ligne est horizontal. Peut-être parlez-vous de la hauteur ?

Cette question reste toute aussi confuse
Api82 a écrit :
Je souhaiterais que l'image apparaisse en plus grand, en survol et en superposition , sans modifier la ligne
En grand où ? En dessous du tableau ? Superposé sur quoi ?

Non vraiment, j'ai été pris de patience et ai relus 4 fois sans succès. Smiley ohwell

PS: En Html5 (je vois à votre doctype), la balise font n'existe pas !
Soit vous insérez le style dans la partie Css (fichier externe ou dans le head),
soit au sein de la balise concernée comme ceci:
<caption style="font-family: Arial; font-size: 8px; color: #000;">
Même chose pour l'attribut bgcolor.
Sinon il faut mettre un doctype html 4.01 mais quel intérêt ?!

2ème PS: On n'installe pas du code sur son site, on le code Smiley cligne
Modifié par Greg_Lumiere (10 Jan 2017 - 11:51)
Bonsoir

la hauteur de la ligne est fixée à "height :10 px"
le format de l'image est à définir , mais il faut qu'elle apparaisse en "foreground" ou premier niveau par rapport au tableau."background"
Le fichier joint décrit sa position en condition survol

Ne mettez pas votre patience à contribution !!!!!
Mon tableau fonctionne correctement, seule mon idée de survol pouvait agrémenter le site en apportant des précisions florales.

Bonne soirée
Sujet clos
Aller à