besoin d'aide sur une page en html

tolunq · le 5 avril 2005

bonjour,

si vous pouviez jeter un coup d'oiel à ce lien : http://ninacaron.free.fr/monpremnoel/noel.htm

je désire faire la même chose sur mon site en construction.

a gauche des photos en miniature qui défilent

à droite une zone importante ou la photo de la miniature de gauche est affichée mais cette zone ne défilerait pas

et une barre de séparation entre les 2 zones.

comment faire.

je sais déjà a peu près faire la zone de gauche avec les photos :

cela donne : http://lbdvlmdb.free.fr/

voici les codes entrés :

html>

<head>

<title>Nouvelle page 1</title>

<style>

<!--

.Style1 {

color: #FF0000;

font-weight: bold;

}

.Style2 {font-size: 18px}

-->

</style>

</head>

<body>

mars 2005 au ski </div>

</div>

<span class="Style2">mars 2004 en montagne </span></div>

</div>

</body>

</html>

j'ai testé ça marche, mais je ne sais pas faire le reste.

si quelqu'un peut m'aider ...

merci encore

Nis · le 5 avril 2005

Tu veux utiliser des "frames" en fait.

Va faire un tour la-bas, ca devrait t'aider : http://allhtml.com/html/html13.php

Nis · le 5 avril 2005

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style>
<!--
.Style1 {
color: #FF0000;
font-weight: bold;
}
.Style2 {font-size: 18px}
-->
</style>
</head>

<body>

<div id="Layer1" style="position:absolute; left:10px; top:103px; width:57px; height:72px; z-index:1">
<a target="mainFrame" href="photo1.htm">
<img src="vignette/45-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer2" style="position:absolute; left:10px; top:243px; width:70px; height:53px; z-index:2">
<a target="mainFrame" href="photo2.htm">
<img src="vignette/53-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer3" style="position:absolute; left:10px; top:383px; width:75px; height:54px; z-index:3">
<a target="mainFrame" href="photo3.htm">
<img src="vignette/52-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer4" style="position:absolute; left:10px; top:523px; width:40px; height:17px; z-index:4">
<a target="mainFrame" href="photo4.htm">
<img src="vignette/51-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer5" style="position:absolute; left:10px; top:662px; width:36px; height:33px; z-index:5">
<a target="mainFrame" href="photo5.htm">
<img src="vignette/50-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer6" style="position:absolute; left:10px; top:803px; width:40px; height:42px; z-index:6">
<a target="mainFrame" href="photo6.htm">
<img src="vignette/49-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer7" style="position:absolute; left:10px; top:924px; width:47px; height:40px; z-index:7">
<a target="mainFrame" href="photo7.htm">
<img src="vignette/48-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer8" style="position:absolute; left:10px; top:1045px; width:35px; height:16px; z-index:8">
<a target="mainFrame" href="photo8.htm">
<img src="vignette/47-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer9" style="position:absolute; left:10px; top:1166px; width:25px; height:27px; z-index:9">
<a target="mainFrame" href="photo9.htm">
<img src="vignette/46-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer10" style="position:absolute; left:16px; top:20px; width:107px; height:60px; z-index:10; font-family: "Comic Sans MS"; font-size: 18px;">
<div align="center" class="Style1">
mars 2005 au ski </div>
</div>
<div id="Layer11" style="position:absolute; left:10px; top:1302px; width:118px; height:41px; z-index:11; font-family: "Comic Sans MS";" class="Style1">
<div align="center">
<span class="Style2">mars 2004 en montagne </span></div>
</div>
<div id="Layer12" style="position:absolute; left:10px; top:1345px; width:20px; height:4px; z-index:12">
<a target="mainFrame" href="photo10.htm">
<img src="vignette/14-1.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer13" style="position:absolute; left:10px; top:1486px; width:32px; height:21px; z-index:13">
<a target="mainFrame" href="photo11.htm">
<img src="vignette/14-2.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer14" style="position:absolute; left:10px; top:1626px; width:19px; height:13px; z-index:14">
<a target="mainFrame" href="photo12.htm">
<img src="vignette/14-3.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer15" style="position:absolute; left:10px; top:1765px; width:23px; height:21px; z-index:15">
<a target="mainFrame" href="photo13.htm">
<img src="vignette/14-4.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer16" style="position:absolute; left:10px; top:1885px; width:21px; height:16px; z-index:16">
<a target="mainFrame" href="photo14.htm">
<img src="vignette/14-5.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer17" style="position:absolute; left:10px; top:2005px; width:29px; height:14px; z-index:17">
<a target="mainFrame" href="photo15.htm">
<img src="vignette/14-6.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer18" style="position:absolute; left:10px; top:2145px; width:37px; height:23px; z-index:18">
<a target="mainFrame" href="photo16.htm">
<img src="vignette/14-9.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer19" style="position:absolute; left:10px; top:2284px; width:31px; height:18px; z-index:19">
<a target="mainFrame" href="photo17.htm">
<img src="vignette/14-10.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer20" style="position:absolute; left:10px; top:2405px; width:22px; height:8px; z-index:20">
<a target="mainFrame" href="photo18.htm">
<img src="vignette/14-11.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer21" style="position:absolute; left:10px; top:2524px; width:41px; height:24px; z-index:21">
<a target="mainFrame" href="photo19.htm">
<img src="vignette/14-12.jpg" width="120" height="120" border="0"></a></div>
<div id="Layer22" style="position:absolute; left:10px; top:2664px; width:24px; height:13px; z-index:22">
<a target="mainFrame" href="photo20.htm">
<img src="vignette/14-15.jpg" width="120" height="120" border="0"></a></div>

</body>

</html>

J'ai regardé un peu ton code ...

Trop compliqué pour ce que tu veux faire j'ai l'impression :fumer:

1.- Les images, tu ne devrais normalement pas les redimensionner avec les propriétés width et height. En faisant ça, tu obliges le visiteur à télécharger toutes les photos en grand format ! Le poids de la "fausse vignette" est le même que l'image pleine.

Tu dois donc, pour chaque image, en faire une vignette (les redimenssionner toi même). Comme ça, la taille des "vraies vignettes" sera beaucoup plus léger que l'image entière.

2.- Les styles contenus dans les div me semblent beaucoup trop complexe pour le résultat obtenu ... De plus il y a beaucoup trop de div ...

Je te propose donc de faire ça de cette façon :

Retire tes DIV, et n'en laisse qu'un, du genre :

Pour afficher les vignettes, tu peux faire :

<a target="tonTarget" href="monImage.ext"><img src="img/monImage.ext" /></a>
<a target="tonTarget" href="monImage2.ext"><img src="img/monImage2.ext" /></a>

Et tu rajoutes à l'intérieur des balises style :

img {
 margin: 0 0 20px 0; // 20px d'espace entre chaque image
}

En gros :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style>
<!--
.Style1 {
color: #FF0000;
font-weight: bold;
}
.Style2 {font-size: 18px}
-->

img {
 margin: 0 0 20px 0; // 20px d'espace entre chaque image
}

</style>
</head>

<body>

<div class="lesVignettes">
<h1>Photos de mars</h1>
<a target="tonTarget" href="monImage.ext"><img src="img/monImage.ext" /></a>
<a target="tonTarget" href="monImage2.ext"><img src="img/monImage2.ext" /></a>

<h1>Photos d'avril</h1>
<a target="tonTarget" href="monImage.ext"><img src="img/monImage.ext" /></a>
<a target="tonTarget" href="monImage2.ext"><img src="img/monImage2.ext" /></a>
</div>


</body>
</html>

En faisant ça tu devrais alléger assez bien tes pages ...

tolunq · le 5 avril 2005

ça a l'aire de répondre à mes pb

je vais essayer ... je connaissais pas

merci encore c'est super sympa

amicalement

tolunq · le 5 avril 2005

merci pour l'aide c'est sympa.

j'ai regardé le lien indiqué http://allhtml.com/html/html13.php

c'est pas mal. je dois même dire que c'est tout à fait ce que je désire faire.

diviser la page en 3 zones, comme l'exemple 2 mais la zone du bas, je désire la mettre en haut de ma page.

j'ai essayé de recreer une page 'index.htm' a partir des codes fournis pour l'exemple 2 mais je n'y arrive pas ... je n'ai qu'une page blanche...

essayer mon lien (c'est un autre que celui que j'ai donné avant) : http://quije.free.fr

puis faites click droit souris et afficher la source (pour avoir les codes html).

dans la racine de mon comptre free j'ai mis :

- la page index.htm (celle où il faut faire click droit souris pour voir les codes)

- la page zone3.htm (avec une image gif : titre du site). la voilà :

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

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

- et l'image gif (titre du site. c'est juste une simple phrase pour essayer.

et j'ai aussi mis les pages zone1 et zone.htm mais pour le moment ce sont 2 pages blanches.

----------------------------------

donc quand je fais http://quije.free.fr je devrais avoir au moins les séparations des zones plus le titre dans la zone 3 mais je n'ai qu'une page blanche ...

faut être indulgent car je débute.

je suis sous dreamweaver 2004 mx. j'ai essayé frontpage et mnu mais je suis revenu à dreamweaver car je suis mieux à l''aise avec ...

par contre je vais regarder ta deuxieme proposition au sujet de la réduction du format des images. je n'ai encore pas trop eu le temps.

en fait ce sont toutes des photos prises en 3 ou 5 mégapixels donc lourdes.

je désire ques les gens les voient en vignettes sur la partie de gauche (zone 1 dans l'exemple) et quand ils cliquent dessus, elles s'ouvrent en grand dans la partie de droite (zone 2).

ce que je recherche aussi, c'est que les personnes puissent les télécharger(si ils le désirent) mais en 3 ou 5 megapixels pour qu'ils puissent si besoin les faire développer pour eux. en fait c'est un site familial avec photos privés.

- ce qui serait interessant, c'est qu'une fois que les gens ont cliqué sur la vignette de gauche, la photo apparaisse en grand dans la fenêtre de droite (là le format doit être réduit pour que l'affichage se fasse rapidement. Et si après visualisation de la photo en grand, ils sont interessés pour la télécharger, ils cliquent alors sur la grande photo (dans la zone 2) et là le téléchargement commence mais avec le format initial de la photo, pour ne pas perdre la qualité de celle ci en cas de tirage papier ou autre ... donc il faudrait un lien qui amène à un sous dossier où sont rangées les photos au format initial.

j'espère avoir été clair dans toutes mes explications ... c'est pas évident ...

merci en core pour tout.

tolunq · le 5 avril 2005

je suis désolé lePhasme mais j'ai pas compris ta réponse

pour ultimate :

essaye http://quije.free.fr

j'ai réussi pour la zone 1 des photos mais rien à faire pour la zone 2 où il y a le titre (image gif) ... je ne sais pas pourquoi

mais pour la zone 1, je n'arrive pas à le faire avec ta proposition :

HTML

<html>

<head>

<title>Nouvelle page 1</title>

<style>

<!--

.Style1 {

color: #FF0000;

font-weight: bold;

}

.Style2 {font-size: 18px}

-->

img {

margin: 0 0 20px 0; // 20px d'espace entre chaque image

}

</style>

</head>

<body>

<h1>Photos de mars</h1>

<h1>Photos d'avril</h1>

</div>

</body>

</html>

ça ne donne rien dans dreamweaver. ça affiche rien.

et pour l'histoire des width et height, je n'arrive pas à m'en passer dans dreamweaver. c'est lui qui me les mets à chaque fois ...

tolunq · le 5 avril 2005

j'avance, j'avance ...

voilà ce que cela donne : http://quije.free.fr

je n'ai mis qu'une photo pour le moment ... j'en ai encore bien une trentaine encore ...

par contre j'ai toujours pas réussi à faire comme mel le disait ultimate. si tu pouvais m'expliquer plus comment faire avec tes codes et ce que j'ai déjà:

voici ma page index.htm , repompée integralement sur le lien http://allhtml.com/html/html13.php

</frameset>

</frameset><noframes></noframes>

j'aimerai faire passe la zone 3 en haut et non en bas ... je dois être fatigué, je sais plus comment faire ... besoin d'aide svp

- pour le code source des pages zone1.htm et zone 2 et 3, click droit souris sur la page affichée et faire 'afficher source'

par contre je ne sais toujours pas comment afficher une image plus grande dans la zone 2 quand on clique sur sa vignette dans la zone 1 ... besoin d'aide svp

merci encore pour tout ...

ps : encore un truc : comment fais tu ultimate pour afficher dans ton post, les codes html en couleurs. c'est mieux que ce que j'ai affiché dans mon post.

LePhasme · le 5 avril 2005

oups trompé de topic dsl :iloveyou:

post supprimé

Connexion

besoin d'aide sur une page en html

Messages recommandés

tolunq

Lien vers le commentaire

Partager sur d’autres sites

Nis

Lien vers le commentaire

Partager sur d’autres sites

Nis

Lien vers le commentaire

Partager sur d’autres sites

tolunq

Lien vers le commentaire

Partager sur d’autres sites

tolunq

Lien vers le commentaire

Partager sur d’autres sites

tolunq

Lien vers le commentaire

Partager sur d’autres sites

tolunq

Lien vers le commentaire

Partager sur d’autres sites

LePhasme

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité