[HTML ou CSS] fixer la hauteur d'une cellule

Résolu/Fermé
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 - 23 juin 2009 à 14:04
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 - 24 juin 2009 à 15:33
Bonjour,
J'ai 5 imagettes dans une cellule d'un tableau.
Le tableau fait 644 de large et 88 de haut.
Chaque imagettes fait 100 largeur par 66 de hauteur,

si je rajoute une imagette le tableau garde la largeur mais la hauteur doubble et l'imagette se retrouve en dessous les autre imagettes.

je voudrai que la nouvelle imagette ne soit pas visible et que la hauteur de la cellule reste fixe,

comment faire ?

Merci et A+

16 réponses

giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
23 juin 2009 à 14:09
bonjour,

un peu du code html serait le bienvenu, pour voir cela d'un peu plus près
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
23 juin 2009 à 14:13
Merci giheller

voila la page complete, c'est le foulli pour le moment mais si ca marche je l'arrengerai.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>



<link rel="SHORTCUT ICON" href="favicon.ico">



<title>W-galerie</title>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">

<link type="text/css" media="screen" rel="stylesheet" href="srep/wgalerie/cssform/csgaleri.css" title="logo">

<style type="text/css">

.gallerycontainer{
position: relative;
/*Ajoutez un attribut et un ensemble de taille à la plus grande taille d'image pour empêcher le recouvrement*/
}

.thumbnail img{
border: 1px solid white;
margin: 6 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS pour l'image agrandie*/
visibility: visible;
top: -438;
left: 5px; /*position gauche de la grande photo */
z-index: 50;
}
.postablo {

width: 644px;
height: 88px;
float: center;
margin-right: auto;
margin-left: auto;
margin-top: 450px;overflow: auto;
}

.tdimagette{max-height: 88px;
width: 572px;
height: 88;
overflow: auto;
}

</style>




</head>

<body>

<br />

<table class="center" summary="TLF Edition">

<tr>

<td class="posmenu"><a class="loglien1" href="http://winow-apg.com/wws/pagindex1.html">Metal player</a></td>



<td class="posmenu"><a class="loglien1" href="http://winow-apg.com/wws/TLFwebTV.html" target="_blank">TLF Web TV/Radio</a></td>



<td class="posmenu"><a class="loglien1" href="#Anker_2">...</a></td>

</tr>

</table>





<table class="postablo" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="srep/wgalerie/cssform/imagale/next1.jpg" width="36px" height="60px" border="0" /></td>
<td ><div class="tdimagette">

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/cheval_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/cheval_1.jpg" width="528px" height="388px" border="0" />
<br />Un cheval que j'ai pris en photo au coteau de Moirans en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/champignon_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/champignon_1.jpg" width="528px" height="388px" border="0" />
<br />champignons que j'ai pris en photo au Col de toutes aures en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/fleurfenetre_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/fleurfenetre_1.jpg" width="528px" height="388px" border="0" />
<br />Un pot de jonquilles sur le rebord de la fenetre de chez moi</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/fleurjonquille.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/fleurjonquille.jpg" width="528px" height="388px" border="0" />
<br />Jonquilles prises en photo par Justine vers Charavines en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/boismontaud.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/boismontaud.jpg" width="528px" height="388px" border="0" />
<br />Groupe de sapin que j'ai pris en photo a Montaud en isere</span></a>




<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/cheminbocroissan.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/cheminbocroissan.jpg" width="528px" height="388px" border="0" />
<br />Un chemin derriere les etangs de Beaucroissant en isere</span></a>



<td><img src="srep/wgalerie/cssform/imagale/next2.jpg" width="36px" height="60px" border="0" /></td>
</div></tr></td></table>

<p>Pour enregistrer une photo en grand format<br />faite un clique droit sur une imagette et cliquer sur enregistrer l'image sous...</p>



<hr style="text-decoration:underline">



<center>

<a class="loglien3" href="#"><b>. Haut de page</b></a> | 
<a class="loglien3" href="mailto:%73%63%72%65%65%6E%63%6F%6C%6F%72%73%40%6F%72%61%6E%67%65%2E%66%72"><b>Ecrire a winow .</b></a>

</center>
<hr style="text-decoration:underline">

</body>

</html>


.
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
23 juin 2009 à 14:33
reBonjour,
même avec le code c'est assez difficile dans la mesure où je ne reproduis pas le problème.
Je ne peux que vous indiquer quelques pistes :

je crois voir en fin de tableau une inversion entre <td> et <tr>

ensuite 5 imagettes de largeur 100 et deux zones de 36 de large font bien un total de 572 mais attention l'attribut border du tableau prend lui aussi de l'espace.=> augmentez la largeur totale du tableau pour faire vos essais.


effectivement il y a passage à la ligne dès la sixième imagettes.
que souhaitez faire vous quand vous dites qu'il ne faut pas qu'elle soit visible ! alors pourquoi en ajouter une ?

la largeur et la hauteur du tableau définissent la zone d'affichage et génére une barre de défilement vertical en cas de débordement.
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
23 juin 2009 à 19:48
re bonjour a toi aussi giheller et Merci pour l'aide

la sixième imagette ne doit pas être visible car j'essaie de faire un diaporama de mes photos, elle doit etre visible qu"après avoir cliquer sur une des cinq première imagettes.

un peut comme sur le site (copain d'avant)
https://www.linternaute.com/actualite/magazine/1122978-le-bourget-comme-si-vous-y-etiez/1122985-ferrari

Merci et A+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
23 juin 2009 à 20:16
voila j'ai fait ça mais la sixième imagette sort de la cellule alors que j'aimerai bien quelle reste cacher tan que je clique pas sur la flèche NEXT.

CODE : -------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>



<link rel="SHORTCUT ICON" href="favicon.ico">



<title>W-galerie</title>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">

<link type="text/css" media="screen" rel="stylesheet" href="srep/wgalerie/cssform/csgaleri.css" title="logo">

<style type="text/css">

.gallerycontainer{
position: relative;
/*Ajoutez un attribut et un ensemble de taille à la plus grande taille d'image pour empêcher le recouvrement*/
}

.thumbnail img{
border: 1px solid white;
margin: 6 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS pour l'image agrandie*/
visibility: visible;
top: -438;
left: 5px; /*position gauche de la grande photo */
z-index: 50;
}
.postablo {

width: 644px;
height: 88px;
float: center;
margin-right: auto;
margin-left: auto;
margin-top: 450px;overflow: auto;
}

.tdimagette{max-height: 88px;
width: 580px;
height: 88;

}

</style>




</head>

<body>

<br />

<table class="center" summary="TLF Edition">

<tr>

<td class="posmenu"><a class="loglien1" href="http://winow-apg.com/wws/pagindex1.html">Metal player</a></td>



<td class="posmenu"><a class="loglien1" href="http://winow-apg.com/wws/TLFwebTV.html" target="_blank">TLF Web TV/Radio</a></td>



<td class="posmenu"><a class="loglien1" href="#Anker_2">...</a></td>

</tr>

</table>





<table class="postablo" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="srep/wgalerie/cssform/imagale/next1.jpg" width="36px" height="60px" border="0" /></td>
<td ><div class="tdimagette">

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/cheval_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/cheval_1.jpg" width="528px" height="388px" border="0" />
<br />Un cheval que j'ai pris en photo au coteau de Moirans en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/champignon_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/champignon_1.jpg" width="528px" height="388px" border="0" />
<br />champignons que j'ai pris en photo au Col de toutes aures en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/fleurfenetre_1.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/fleurfenetre_1.jpg" width="528px" height="388px" border="0" />
<br />Un pot de jonquilles sur le rebord de la fenetre de chez moi</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/fleurjonquille.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/fleurjonquille.jpg" width="528px" height="388px" border="0" />
<br />Jonquilles prises en photo par Justine vers Charavines en isere</span></a>

<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/boismontaud.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/boismontaud.jpg" width="528px" height="388px" border="0" />
<br />Groupe de sapin que j'ai pris en photo a Montaud en isere</span></a>




<a class="thumbnail" href="#thumb"><img src="srep/wgalerie/imgsgaleri/cheminbocroissan.jpg" width="100px" height="66px" border="0" /><span>
<img src="srep/wgalerie/imgsgaleri/cheminbocroissan.jpg" width="528px" height="388px" border="0" />
<br />Un chemin derriere les etangs de Beaucroissant en isere</span></a>



<td><img src="srep/wgalerie/cssform/imagale/next2.jpg" width="36px" height="60px" border="0" /></td>
</div></td></tr></table>

<p>Pour enregistrer une photo en grand format<br />faite un clique droit sur une imagette et cliquer sur enregistrer l'image sous...</p>



<hr style="text-decoration:underline">



<center>

<a class="loglien3" href="#"><b>. Haut de page</b></a> | 
<a class="loglien3" href="mailto:%73%63%72%65%65%6E%63%6F%6C%6F%72%73%40%6F%72%61%6E%67%65%2E%66%72"><b>Ecrire a winow .</b></a>

</center>
<hr style="text-decoration:underline">

</body>

</html>


------------------------------------------------------
j'ai viré overflow: hidden;
et j'ai replacer le <td>< tr>

c'est mieux mais problème d'image qui passe en dessous et sort de la cellule.
comment je pourrai faire ?
Merci et A+
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
24 juin 2009 à 08:26
Bonjour,

Hidden cache l'affichage mais la place est toujours occupée.

si je comprends bien, il ne faidrait que 5 imagettes qui s'affichent alors voilà une idée (pgm en php):

soit 5 variables $img1 $img2 $img3 $img4 $img5 initialisées avec le noms des 5 premières imagettes
le pgm php ira modifier les noms des images dans les variables en fonction du clic sur une image ou sur une flèche


il exsite aussi des programme tout fait pour faire des galeries d'images (jalbum par exemple)
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 08:44
Merci giheller
je vais voir pour jalbum, ça sera plus simple pour moi, j'y connais rien en PHP.
de plus mon hébergeur (Amen) ne gère pas le PHP dans le contrat entre eu et moi.

J'espère que jalbum existe pour Linux (Ubuntu).

Encore Merci giheller et A+
0
garion28 Messages postés 1545 Date d'inscription mardi 16 juin 2009 Statut Membre Dernière intervention 3 avril 2011 406
24 juin 2009 à 08:53
le php n'est pas un language microsoft et peut donc etre utilisé sur linux ^^
mais si ton hébergeur ne te permet pas de faire plus de chose tu devrai peut etre en changer non ?
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 09:09
Oui, effectivement je vais etudier cela mais oui, soit ils m'accordes le PHP soit Good Bye, chiao Amen,
De plus que le PHP a l'air tres interressant d'apres ce que j'ai pu lire dessus,

Merci giheller et A+
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
24 juin 2009 à 09:13
De rien.
si vous pensez que le problème est résolu, n'oubliez pas de la passer en résolu.

Quel FAI avez-vous pour qu'il n'accepte pas PHP ? orange ?
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 11:32
non, c'est chez Amen, je paye 14 euros par ans pour avoir un espace pour mon site.
et pour avoir le php il faut que je change de pack et ça va être plus chère je crois ?

Oui je suis chez orange (FAI) mais j'ai pas de site chez eux.
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
24 juin 2009 à 13:39
alors comme disait garion28 il est temps de changer de FAI.
il en existe même des gratuits ! free et d'autres ...
ou d'autres qui offrent PhP et Mysql en standard !
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 14:40
en fait c'est pas orange (mon FAI) qui me bloque,
c'est Amen.fr qui veut que je change de pack pour avoir le php mais le problème ca coute plus chère.
https://www.amen.fr/
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
24 juin 2009 à 14:45
regardez chez OVH c'est pas plus cher et c'est inclus
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 15:09
Oui, ta raison, c'est pas plus chère ( même moins chère par apport a mon pack) et j'ai bien plus d'options avec OVH

génial,
Je pense très fortement que je vais prendre OVH après la fin du contrat avec Amen, vers fin novembre.

Merci pour ton aide giheller, c'est très sympa de ta part, MERCI et A+
0
giheller Messages postés 1875 Date d'inscription dimanche 14 juin 2009 Statut Membre Dernière intervention 3 février 2024 142
24 juin 2009 à 15:13
Pas de problème.
j'ai plusieurs sites chez OVH etje n'ai jamais eu de problème.
si tu considères le pb comme résolu, n'oublie pas de le passer dans ce mode.

bonne continuation
0
winow Messages postés 516 Date d'inscription mercredi 19 novembre 2008 Statut Membre Dernière intervention 19 août 2009 48
24 juin 2009 à 15:33
deja le prix est tres interessant,
en plus si il y a pas de problèmes je serait des votre dans pas longtemps (Novembre).

Encore Merci giheller

a y est c'est fait pour le résolu.
Merci et A+
0