Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Programmation

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

Dernière réponse le 24 jun 2009 à 15:33:14 winow, le 23 jun 2009 à 14:04:00

Signaler ce message aux modérateurs

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+ A+
..Why..

Configuration: Linux Ubuntu 9.04
pc AMD semprom 2800+

Meilleures réponses pour « [HTML ou CSS] fixer la hauteur d'une cellule » dans :

[HTML/CSS] Fixer une image... Voir

HTML&CSS: pied de page "fixe" Voir

Probleme taille cellule tableau html Voir

Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beau, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...

Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...

Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...

HTML remonter en haut d'une page (Résolu) Voir

Photoshop: exporter psd en html/css Voir

Fixer une div sans width -PHP,HTML, CSS- Voir

Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...

Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

Tableur - Les cellules VoirLa notion de cellule On appelle "cellule" l'intersection entre une ligne (horizontale) et une colonne (verticale) de la feuille de calcul. Ainsi le nom de la ligne combiné au nom de la colonne donne les coordonnées d'une cellule (le terme d'adresse...

Posez votre question Répondre

giheller, le 23 jun 2009 à 14:09:53

Bonjour,

un peu du code html serait le bienvenu, pour voir cela d'un peu plus près ------------------------------------------------
J-L

Répondre à giheller

winow, le 23 jun 2009 à 14:13:07

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>

. A+
..Why..

Répondre à winow

giheller, le 23 jun 2009 à 14:33:00

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.
------------------------------------------------
J-L

Répondre à giheller

winow, le 23 jun 2009 à 19:48:28

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)
http://www.linternaute.com/...

Merci et A+ A+
..Why..

Répondre à winow

winow, le 23 jun 2009 à 20:16:00

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+ A+
..Why..

Répondre à winow

giheller, le 24 jun 2009 à 08:26:00

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) ------------------------------------------------
J-L

Répondre à giheller

winow, le 24 jun 2009 à 08:44:42

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+ A+
..Why..

Répondre à winow

garion28, le 24 jun 2009 à 08:53:28

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 ? Vous avez des problème avec IE8 ? moi je vous donne LA solution, installez firefox (cherchez sur google)

Répondre à garion28

winow, le 24 jun 2009 à 09:09:27

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+ A+
..Why..

Répondre à winow

giheller, le 24 jun 2009 à 09:13:29

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 ?
J-L

Répondre à giheller

winow, le 24 jun 2009 à 11:32:10

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. A+
..Why..

Répondre à winow

giheller, le 24 jun 2009 à 13:39:22

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 ! J-L

Répondre à giheller

winow, le 24 jun 2009 à 14:40:36

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.
http://www.amen.fr/welcome.php?PHPSESSID=70913b07470531a758e575a33446a889c01a988b A+
..Why..

Répondre à winow

giheller, le 24 jun 2009 à 14:45:24

Regardez chez OVH c'est pas plus cher et c'est inclus
J-L

Répondre à giheller

winow, le 24 jun 2009 à 15:09:14

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+ A+
..Why..

Répondre à winow

giheller, le 24 jun 2009 à 15:13:06

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
J-L

Répondre à giheller

winow, le 24 jun 2009 à 15:33:14

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+ A+
..Why..

Répondre à winow

Posez votre question Répondre