tableau et images en "vignettes" avec nvu ou kompo

[esmeralda]

Bonjour à tous !
je voudrais avoir sur ma page, une grande image sur la gauche (jusque là, ok) et aligné sur la droite, un tableau, avec plusieurs petites images, toutes de la même dimension, style vignette. Mais je n'y arrive pas ! je suis entrain de m'arracher les cheveux ! si quelqu'un pouvait m'aider un peu ???
Merci à tous !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

Je n'avais pas très bien compris ce que tu cherchais quand tu as posté sur Framasoft (framagora)
Je n'ai pas le temps ce soir, mais si j'ai 5 mn demain matin, je te prépare quelque chose.... Mais si d'autres t'aident avant, ce sera encore mieux

[esmeralda]

merci Chinon37 !
ça serait vachement sympa si tu avais 5 mn oui !
j'espère bien que d'autres vont m'aider, mais tu es la seule bonne âme pour le moment ! lol !
merci !
bisous

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Fabrice.Tres.Net]

Rapidement voici quelques indices
Les images sont du type inline et un tableau est du type block.
Les éléments de type inline se suivent sur la ligne comme les caractères dans un mot ou une phrase.
Les éléments de type Block s'empile verticalement.

Donc si tu mes une image puis un tableau, le tableau se retrouvera en dessous de l'image.

Mais heureusement il est possible de "forcer" un élément de type block en type "inline" accessible à partir des propriétés de la boite (style inline)

.

Il est aussi possible d'utiliser un div qui flotte à droite pour ranger les vignettes dedans... tu choisis la largeur du div pour recevoir 1 ou 2 ou 3 vignettes horizontalement, les retours "à la ligne" se feront alors automatiquement... tu mets une marge aux éléments de type vignette pour éviter qu'elles ne se touchent!

[chinon37]

Fabrice, tu es sympa, mais je ne suis pas sûr que notre invitée comprenne très bien notre charabia: amha, elle veut beaucoup plus simple.

Esmeralda, j'ai concocté un truc du plus basique qui correspond peut être à ce que tu cherches:
clique ici

Les carrés de couleur sont les images. Si tu clique sur une image celle-ci s'affiche en grand. Il te suffit de remplacer les images bleu1, vert1 et rouge1 (petites) par tes miniatures et les vert2, bleu2 et rouge2 par tes grandes images.
C'est basique, il faudra affiner...
Pour récupérer le code de la page dans firefox:
tu vas sur une des pages que j'ai faites:
ctrl+u > ctrl+a > ctrl+c
Tu vas dans kompozer
Nouvelle page > onglet source > ctrl+a > ctrl+c
Tu peux repasser sur l'onglet aperçu

[esmeralda]

Fabrice, Chinon37,merci à tous les deux ! c'est sympa de m'aider !
alors, oui, tu as raison CHinon 37, c'est un truc dans le genre que je voulais le plus simple pour moi ! lol ! suis trop nulle sinon ! j'ai copié ton code et tout et tout. J'en demande beaucoup, je sais....
En fait, je voudrais la grande image à gauche, les petites à droite, sans couleur, sans pied de page ni entête.....
Ouais, je sais, vous allez me trucider ! lol !
mais je vous avoue que je suis vraiment, mais alors vraiment nulle ! j'étais persuadée que je pouvais faire ça facilement, comme dans front page ! quelle gourde ! merci à tous les deux !
gros bisous !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[esmeralda]

Encore moi ! décidemment ! si je savais comment vous envoyer la page qui me cause soucis, ça serait plus clair pour vous non ? Si vous voulez toujours m'aider ! lol !
mais je ne sais pas envoyer dans le forum une page en pj...
Bisous
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

Tu peux nous envoyer le code en allant sur l'onglet source: ctrl+a puis ctrl+c
puis dans le message que tu écris sur le forum: Ctrl+v pour coller le code.
Sinon, si tu le peux, tu mets ta page en ligne, même incomplète: on pourra y regarder.

Ce que tu demandes est très simple, si j'ai le temps... , je te le fais

[esmeralda]

wahou ! je sais pas si vous allez comprendre quelque chose... Ca fait long comme écritures tout ça ! lol ! moi je suis perdue ! merci pour ton aide ! ça me fait chaud au coeur !
j'espère que t'as passé un bon we !
bisous et merci !

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0"><meta
 name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type"
 content="text/html; charset=windows-1252"><title>Visite
guidée</title></head>
<body><p><font size="5"><b>Visite guidée</b></font></p>
<table style="border-width: 0px;" border="1"
 height="539"> <tbody><tr> <td rowspan="4"
 style="border-style: none; border-width: medium;" align="left"
 height="535"> <img
 src="photo/ext%E9rieur%20maison/6206_2.jpg" border="0"
 height="362" width="482">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p>&nbsp;&nbsp;</p> <p>Le bâtiment
principal, avec ses deux chambres d'amis et un petit salon à
l'étage.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></td>
<td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="130"> <a
 href="visite%20guidee/cuisine.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/cuisine.jpg"
 align="top" border="0" height="102" width="167"></a>
</td> <td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="130"> <a
 href="visite%20guidee/salon%20bibliotheque.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/salon%20biblioth%E8que.jpg"
 align="texttop" border="0" height="116" width="91"></a>
</td> <td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="130"> <a
 href="visite%20guidee/escalier.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/montee%20escalier%20%283%29.jpg"
 align="texttop" border="0" height="118" width="89"></a>
</td> <td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="130"> <a
 href="visite%20guidee/salon.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/salon%201er%20etage%20table.jpg"
 align="texttop" border="0" height="118" width="91"></a></td>
</tr> <tr> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" align="left" height="131"
 valign="top">&nbsp;<a
 href="visite%20guidee/ch%20botero.htm"><img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/ch%20rose%20table.jpg"
 align="texttop" border="0" height="116"
 width="151"></a>&nbsp;&nbsp;&nbsp;</td>
<td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" bordercolordark="#000000"
 height="131" valign="top"> <a
 href="visite%20guidee/sdb%20botero.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/ch%20rose%20sdb.jpg"
 align="top" border="0" height="116" hspace="6"
 vspace="3" width="90"></a></td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" bordercolordark="#000000"
 height="131" valign="top"> <a
 href="visite%20guidee/ch%20TM.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/chambre%20Marthe%20bis.jpg"
 align="top" border="0" height="123" vspace="3"
 width="92"></a></td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="131" valign="top">
<a href="visite%20guidee/SDB%20CH%20TM.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/ch%20jaune%20sdb%20evier.jpg"
 align="texttop" border="0" height="115" vspace="3"
 width="88"></a></td> </tr> <tr> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="133" valign="top">
<a href="visite%20guidee/cabanon.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/6206_3.jpg"
 align="texttop" border="0" height="117" hspace="6"
 width="159"></a></td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="133" valign="top">
<a href="visite%20guidee/escalier%20cabanon.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/escaliers.jpg"
 align="texttop" border="0" height="143"
 width="100"></a> </td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="133" valign="top">
<a href="visite%20guidee/coin%20salon.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/coin%20salon%201.jpg"
 align="texttop" border="0" height="141" width="99"></a></td>
<td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="133" valign="top">
<a href="visite%20guidee/terrasse%20chapeau.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/terrasse1.jpg"
 align="texttop" border="0" height="124" vspace="3"
 width="81"></a> </td> </tr> <tr> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="135" valign="top">
<p align="justify"> <a
 href="visite%20guidee/bassin%20fa%E7ade.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/Photo%20039.jpg"
 align="top" border="2" height="126" width="98"></a></p></td>
<td style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="135" valign="top">
<a href="visite%20guidee/chaise%20longue.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/Image%20008.jpg"
 align="texttop" border="2" height="115" vspace="3"
 width="87"></a> </td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="135" valign="top">
<p align="center"> <a
 href="visite%20guidee/palmier%20bassin.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/6206_1.jpg"
 align="top" border="2" height="72" vspace="3"
 width="108"></a> </p></td> <td
 style="border-style: none; border-width: medium;"
 bordercolorlight="#000000" height="135" valign="top">
<a href="visite%20guidee/cabanon2.htm"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/cabanon%202.jpg"
 align="top" border="2" height="70" hspace="6"
 width="101"></a></td> </tr> </tbody></table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table align="left" border="0" cellpadding="3"
 cellspacing="4" height="650" width="84%"> <tbody><tr>
<td height="267" width="36%"> <img
 src="../Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20sites%20Web/maisonnette3.jpg"
 border="2"><p>La petite maison</p></td> <td
 height="50%" valign="top" width="13%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;<table border="0" cellpadding="0"
 cellspacing="0" height="646" width="156"><!-- MSTableType="layout" --> <tbody><tr>
<td height="114" valign="top"><!-- MSCellType="ContentBody" --> <a
 href="visite%20guidee/maisonnette/salon.htm"> <img
 src="salon.jpg" align="top" border="2"
 height="102" width="152"></a></td> </tr>
</tbody></table> </td> <td height="267"
 valign="top" width="8%"> &nbsp;<table
 border="0" cellpadding="0" cellspacing="0"
 height="603" width="156"><!-- MSTableType="layout" --> <tbody><tr>
<td height="117" valign="top"><!-- MSCellType="ContentBody" --> <a
 href="visite%20guidee/maisonnette/cuisine.htm">
<img src="cuisine%20echelle%20meniere.jpg" align="left"
 border="2" height="110" width="146"></a></td>
</tr> <tr> <td height="486" width="156">&nbsp;</td>
</tr> </tbody></table> </td> <td
 height="267" valign="top" width="9%"> <table
 cellpadding="0" cellspacing="0" height="160"
 width="104"><!-- MSCellFormattingTableID="1" --> <tbody><tr>
<td height="160" width="104"><!-- MSCellFormattingType="content" --> <a
 href="visite%20guidee/maisonnette/sdb.htm"> <img
 src="evier%20douche.jpg" border="2" height="149"
 width="100"></a></td> </tr> </tbody></table>
<p>&nbsp;</p></td> <td height="267"
 valign="top" width="15%"> <a
 href="visite%20guidee/maisonnette/chambre.htm"> <img
 src="2002%20-%20Maisonnette%20coin%20chambre%202.jpg" border="2"
 height="113" width="173"></a><p>&nbsp;</p></td>
<td height="267" valign="top" width="12%"> <a
 href="visite%20guidee/maisonnette/devant%20de%20porte.htm"> <img
 src="photo/maisonnette/Image%20011.jpg" border="0"
 height="115" width="100"></a><p>&nbsp;</p></td>
</tr> </tbody></table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center"><a href="bienvenue.htm">Bienvenue</a>/&nbsp;
<a href="situation.htm">Situation</a> / <a
 href="plan.htm">Plan d'accès</a> /
<a href="tarifs_et_contact.htm">Tarifs et Contact</a>
/ <a href="accueil.htm">Retour à l'accueil</a></p>
</body></html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
[ndm]Mise en forme du code

[esmeralda]

coucou ! j'ai fait un autre truc pour mettre en ligne, espérant que tu puisses voir. J'ai un site sur mes cartes : http://membres.lycos.fr/cartenfolie/
tu vas dessus, puis dans accueil, album cartes, et là, sous le tableau : visite guidée. C'est la fameuse page que je voudrais pouvoir faire ! qui n'a aucun rapport avec mon site
je vais pas pouvoir la laisser longtemps ! on va se demander ce qu'elle fait sur mon site ! lol !
est ce que c'est mieux pour toi que le code source du message d'avant ?
Merci et bisous !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

J'ai refait une page en exemple qui pourrait peut-être te convenir ici
Chaque carré représentant une photo. A toi d'adapter ensuite cette page en récupérant le code source comme expliqué dans le message du 31 mars.
Bise

[esmeralda]

super ! je me débrouille bien mieux grace à vous tous ! et toi chinon 37 ! merci pour votre aide tous, ton aide précieuse, tes conseils !
je viendrais vite dès que j'aurais des soucis !
de tout coeur, merci pour tout ! un forum comme ça, c'est vraiment le pied !
gros bisous et encore merci !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3