le chomeur est ce que toi aussi tu ne vois qu'un seul diapo?
pour que les pop up chargent plus vite je vais réduire le poids des grandes photos ;)
Version imprimable
le chomeur est ce que toi aussi tu ne vois qu'un seul diapo?
pour que les pop up chargent plus vite je vais réduire le poids des grandes photos ;)
non je vois toute les galeries ...
ok, je vois toutes les galeries (sans doute un problème de cache de mon navigateur) ;)Citation:
Envoyé par pygoCENTRUS
Seule la galerie http://www.moai.dafun.com/animal%20autres.htm n'est pas encore finie ;)
Je constate que tu as très bien su intégré le code et modifier les feuilles de styles à ta guise :bravo: :ccool:
:arrow: il reste donc les 3 pages de présentation des diaporama à corriger ;)
Seul souci mineur : certaines photos sont longues à charger. Tu faisais sans doute allusion à ce problème, le_chomeur, dans un de tes messages précédents ; j'ai cru que tu parlais des images affichées en pop-up. Il est vrai que j'aurai dû faire une barre de chargement (on a ça dans les scripts, je crois).
Mais bon hormis ce détail, la navigation dans le site me semble aisée.
le_chomeur :
Je regarderai ton code, merci ;)
yop ^^
il s'agit effectivement des images qui s'affiche en grand :)
J'ai trouvé un exemple de barre de progression animée.
Il y a encore quelques bugs dans les scripts :roll:. Rien de bien méchant a priori (Qu'en pensez-vous tous les deux :question:).
Ayant tout fait en local, je n'ai pas toujours pensé aux temps de chargement des photos (en local tout va plus vite):oops:
c'est juste une barre d'attente et non de chargement ;)
mais pourquoi pas, pendant la méthode qui vérifit le complete ;)
Oui, je ne peux faire qu'une barre d'attente. En JS je ne peux pas connaître le taux de chargement d'une image. Mais bon pour l'instant j'ai 3 pages d'accueil à revoir :D.
On verra plus tard pour cette barre d'attente ;)
merci ;) mais j'avoue avoir un peu galeré :oops:Citation:
Envoyé par Auteur
pour la barre d'attente l'idée est bonne mais rien d'urgent,je vais déjà alléger les photos qui sont un peu lourdes
en tout cas merci a tout les 2 de vous pencher sur mon site :king:
juste histoire de faire monter le compteur de posts ^^
pour la galerie qui scrolle en bas ...
J'aurais mis un scroll automatique en fonction de la position de la souris plutôt que de devoir déplacer l'ascenseur , éventuellement avec un effet d'accélération ralentissement
Mais sinon l'ensemble est graphiquement très cohérent et la navigation ergonomique :king:
Bon avec ton code j'arrive à obtenir le même résultat que sur ces pages (3 images sur 2 lignes) :Citation:
Envoyé par le_chomeur
- http://www.moai.dafun.com/galerieindex.htm
- http://www.moai.dafun.com/animaux.htm
Par contre ici (2 images sur deux lignes)
- http://www.moai.dafun.com/oiseaux.htm
Je ne vois pas comment faire les choses simplement :oops: (il faut que le cadre qui contient les photos soit de la même largeur que le cadre sur les deux autres pages).
:lol::lol::lol:Citation:
Envoyé par SpaceFrog
+1 il est vrai que se serait un petit plus non négligeable pour la navigation (et un gros plus pour les feignants :lol:)Citation:
pour la galerie qui scrolle en bas ...
J'aurais mis un scroll automatique en fonction de la position de la souris plutôt que de devoir déplacer l'ascenseur , éventuellement avec un effet d'accélération ralentissement
merci de ton passage :D
pygoCENTRUS :
voici donc en pièce jointe un premier jet des 3 pages d'index :
- http://www.moai.dafun.com/galerieindex.htm
- http://www.moai.dafun.com/animaux.htm
- http://www.moai.dafun.com/oiseaux.htm
tu as donc 3 fichiers html :
- galerie.htm (Pas galerieindex.htm, sans le vouloir, je n'ai pas gardé le nom d'origine :oops:, mais tu peux renommer le fichier sans problème ;))
- animaux.htm
- oiseaux.htm
4 dossiers :
- galerie qui contient les images de galerie.htm ;
- animaux qui contient les images de animaux.htm ;
- oiseaux qui contient les images de oiseaux.htm ;
- communs qui contient les fichiers suivants :
- banniere.jpg (ta bannière) ;
- fond.jpg (le fond) ;
- rss.jpg, le logo RSS, que j'ai remplacé par rss2.gif (qui est dans le dossier aussi) ;
- style.css qui est la feuille de style des 3 fichiers html.
Dans la mesure du possible, j'ai essayé de respecter les couleurs et la mise en page que tu avais faites.
Vérifie quand même les liens, j'ai pu faire une erreur ;)
:arrow: Le seul problème de mise en page est pour oiseaux.htm : en effet, j'ai gardé pour les 4 photos la dispositions 3 photos par lignes (disposition adoptée dans galerie.htm et animaux.htm), ce qui fait que tu as 3 photos sur la première ligne et la 4ème se retrouve sur la seconde ligne. :?
Je vais essayer de corriger ça pour que tu aies 2 photos par lignes ou si tu veux je le laisse tel quel.
J'ai testé le code sous FF et IE7. A vérifier avec IE6 et Opera.
J'attends ton avis :)
encore une fois merci pour le travail effectué:king:,affichage ok avec IE7
un petit soucis avec la couleur des séparateurs sous opéra mais c'est pas grave du tout vu que l'affichage est nikel :yaisse2:
pour oiseaux.htm ce serait vraiment top d'avoir 2 images par lignes,mais si c'est trop chiant a faire laisse tomber ;)
edit:pour oiseaux.htm sous FF les liens des vignettes restent noirs lorsqu'ils sont survolés
J'ai testé avec IE7 pas avec IE6 :aie:Citation:
Envoyé par pygoCENTRUS
Pour la mise en page le_chomeur m'a retiré une épine du pied en me proposant son code :oops:
------------------------------------------------
Justement en regardant le code, je me suis demandé s'il ne valait pas mieux écrire :Citation:
Envoyé par pygoCENTRUS
plutôt queCode:
2<hr style="background-color: #FFFFFF">
qui n'est pas valide HTML4.01 Strict :?Code:
2<hr color="#ffffff" noshade="noshade">
------------------------------------------------
Remplace styles.css dans le dossier "communs" par le fichier en pièce jointe. Dis moi ce que tu en penses.Citation:
Envoyé par pygoCENTRUS
Pour résumer :
dans les pages galerie.htm et animaux.htm c'est la classe blocPhotos qui est appliquée (3 photos par ligne). Dans la page oiseaux.htm c'est la classe blocPhotosOiseaux qui est appliquée (2 photos par ligne).
------------------------------------------------
Oui, c'est normal, j'ai repris les couleurs qu'il y avait sur ton site : les liens restent noirs lors du survol. Si tu veux changer la couleur lors du survol, ouvre le fichier styles.css et regarde la classe "blocPhotosOiseaux span a:hover" (spécifique à cette page) :Citation:
Envoyé par pygoCENTRUS
modifie la propriété color.Code:
2
3
4
5
6
7
------------------------------------------------
N'allège pas trop tes photos, la qualité de ces prises de vues pourrait être altérée (pixelisation de l'image) et ça serait bien dommage. ;)Citation:
Envoyé par pygoCENTRUS
Tes photos sont superbes :king:
bon moi je vais venir mettre mon grain de sable ...
nous somme dans la section javascript la non ???
bon hé bien pourquoi ne pas créer un objet galerie ???
celui ci reprendrait les bases =>
- nom de la galerie , collection d'image , gestion de l'affichage :)
- puis une classe gérant une collection de galerie
avantage ?
=> a partir d'un seul script on pourra
- construire X galerie
- ajout X image
- NAVIGUER SANS CHANGER DE PAGE
inconvénient ?
- référencement de la galerie d'image
j'avais un truc en préparation qui trainais depuis longtemps , alors si ça vous intéresse ;)
Il est clair qu'en utilisant des objets, on va limiter la redondance du code. J'ai hésité à prendre cette voie, parce que je ne maîtrise pas trop les objets en JS :oops:. Je pense que tu vas utiliser de l'Ajax ?
Il est vrai qu'en l'état l'ajout d'une galerie et d'images pourrait ne pas être évident :?
Il faut voir avec pygoCENTRUS :)
non pas besoins d'ajax , un simple script , gérant les objets , et un second permettant de les initialiser / afficher :)
un exemple de ce que j'avais commencé :
http://easynews.free.fr/diaporama2/ tout est géré en javascript ...
( testé sous FF )
AUTEUR> c'est parfait avec la nouvelle css :king:,merci pour le compliment sur mes photos :D
LE CHOMEUR>l'ouverture de l'image en grande taille de ton test est vraiment parfaite,est il possible d'intégrer ce genre de script en gardant ma mise en page actuelle?
je suis ouvert a toute proposition permettant d'améliorer mon site (je vais pas refuser vu que je suis loin de m'y connaitre autant que vous :oops:)
encore merci les gars (ca devient une tradition :lol:)
edit:LE CHOMEUR> sur ton test l'idéal serait d'avoir des fleches "suivante et précédente" quand l'image est ouverte cela éviterait d'avoir a la fermer pour en voir une autre.je sais pas si tu vois ce que je veux dire
edit2>dans oiseaux.htm pour changer la couleur du fond ou les galeries sont affichées je ne trouve pas la ligne a modifier (j'ai l'habitude de mon ancienne css) la je n'arrive pas a trouver le "background-color" correspondant :oops:
j'aimerais avoir la meme couleur que dans galerie.htm et animaux.htm
C'est normal que tu ne le trouves pas, ce n'est pas dans la feuille de style. En effet, la pseudo-clase :hover ne fonctionne que pour les balises <a> sous IE. J'ai donc fait un script.Citation:
Envoyé par pygoCENTRUS
Ouvre oiseaux.htm et cherche cette ligne :
Code:
2
onmouseover = événement déclenché lorsque tu entres dans le cadre. Tu donnes au fond un backgroundColor = '#987649'
onmouseout = événement déclenché lorsque tu sors du cadre. Tu donnes aucune valeur au fond : backgroundColor = ''. (le fond reprend une valeur par défaut qui est le transparent).
this désigne l'objet qui appelle l'événement, ici le div.
remplace cette ligne par (ou simplement le code couleur que j'ai mis en évidence, en rouge) :
Seule la couleur sur l'événement over change (#B7BA56). N'oublie pas le # devant le code couleur et de mettre la valeur entre simples quotes ( ' ) ;)Code:
2
Le_chomeur >> impressionnant ton exemple de diaporama 8O :king:
^^ merci a vous deux pour les commentaires :mrgreen:
je m'étais amusé un moment , mais pourquoi pas si quelqu'un trouve le temps pour partir dans cette voie , si spaffy passe par ici pour commenter ^^
il reste pas mal d'amélioration , c'était juste a titre informatif ;)
pygoCENTRUS >> tu as pu modifier la couleur du fond du cadre des photos de la page oiseaux.htm ?
bravo auteur pour la 100eme réponse :yaisse2::yaisse2::yaisse2: :lol:
ouaip c'est bon j'ai réussi a changer la couleur du cadre ;)
edit>sur ma nouvelle page http://www.moai.dafun.com/presentation.htm pas moyen d'ajouter un cadre a l'intérieur du corps comme sur les autres pages et impossible de réduire l'espace avec le pied de page même en changeant "padding" ou "margin bottom".
idéalement je voudrais insérer une image a gauche du texte mais quand je le fais toute la page est en vrac :aie:
pour l'espace entre ton corp et pied de page, j'ai modifié :
( de 50 a 10 px et ça passe impeccable , vérifies ton cache )Code:margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
pour ton autre souçis tu as ça :
balise TD non fermé , et les fermetures de balise </tr></td> qui n'existe pas non plus , de plus tu peux totalement te passer de tableau , un simple padding top et padding bottom te permettrons de centrer ton texte :)Code:
2
3
4
5
pygoCENTRUS : pour ton tableau tu t'es mélangé les pinceaux :D. Comme l'écrit le_chomeur tu as oublié des balises fermantes. De plus <valign=center> est une balise qui n'existe pas. De même la balise </br> n'existe pas.
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Autre chose. Dans ces pages :
http://www.moai.dafun.com/vegetaux.htm
http://www.moai.dafun.com/liquides.htm
http://www.moai.dafun.com/paysages.htm
http://www.moai.dafun.com/macros.htm
http://www.moai.dafun.com/mammiferes.htm
http://www.moai.dafun.com/poissons.htm
http://www.moai.dafun.com/reptiles.htm
le lien Accueil n'est pas valide, cela renvoie vers une page accueil.htm qui n'existe pas au lieu de index.htm ((je crois que pour les autres pages du site, il n'y a pas d'erreur).
auteur => tu crois qu'on va avoir une pièce pour l'aide ? lol
j'ai lu son intro , et j'ai été surpris de la qualité de ses photos !
bravo pygoCENTRUS pour ces photos !
auteur> merci pour la correction ;),pour les liens non valides je m'en occupe ;)
le chômeur>je vous offrirais une photo :mrgreen:, merci pour le compliment :oops:
edit>maintenant le texte est a gauche :aie:
Tu ouvres 3 div et tu n'en fermes que 2 !!!!Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<div class="element_corps"> <div id="corps"> <div class="element_corps"> <table style="width:500px; height:350px; text-align:center"> <tr> <td style="vertical-align:top; text-align:left; height:200px"> <p>Une brève présentation pour vous raconter l'histoire de ce site.</p> <p>Il y a 22ans de cela je vois pour la première fois notre monde, un regard qui très vite est attiré vers dame nature.</p> <p>Très jeune passionné d'ornithologie, je rêve déjà devant les clichés d'un de mes oncles travaillant sur argentique à l'époque, puis mes pensées pour la photographie s'envolèrent rapidement à cause de mon jeune âge sans doute.</p> <p>Quelques années plus tard, de nouvelles passions font leur apparition (botanique,aquariophilie...) et très vite l'envie de faire de belles photos se fait ressentir, c'est à ce moment que je le virus de la photographie arriva réellement.</p> <p>Mon premier appareil fut le compact de mon grand frère sur lequel j'adaptais des lentilles pour tenter de faire de la macro, quelques mois passèrent et j'achetais mon tout premier reflex: un canon eos 350D.</p> <p>A partir de ce moment la photographie allait devenir bien plus qu'un simple plaisir, il me fallut apprendre les techniques de base (ouverture, obturation, etc...) pour vraiment apprécier cet art et avoir envie de faire partager mes clichés</p> <p>Voilà en bref comment je suis arrivé à la création de ce site, je vous souhaite une agréable visite en espérant que vous prendrez autant de plaisir à regarder mes photos que j'en ai eu à les faire.</p> <br>Alexandre Letertre </td> </tr> </table> </div></div>
Je pense que le 1erest de trop (celui qui se trouve avant <div id="corps">)Code:<div class="element_corps">
Ton div id="corps" fait 659px; (d'après ta feuille de style, donc ton tableau fait également 659px). Aucun alignement est précisé dans id="corps" donc ton tableau est à gauche.
Que veux-tu faire ?
mauvaise manip' sans doute :oops:
je viens de transférer le site sur a son adresse définitive > http://pyg0pixxx.com
que voulais-tu faire avec la page presentation ?
je voulais juste un cadre noir autour du texte et qu'il soit centré
j'ai mis une bordure de 2 pixels autour du tableau (attribut border dans la balise table).
Code:<table style="height: 350px; text-align: center; border: 2px solid #000000; ">
[edit]
Sur la page http://www.pyg0pixxx.com/palmipedes.htm, il manque les deux dernières photos du caneton : il y a bien les miniatures et les images en taille réelle (celles qui s'affichent dans la pop-up) mais pas les images du "diaporama". ;)
[/edit]
merci pour la correction,c'est sympa de me prévenir des bugs car je n'ai pas tout vérifie (quelques échecs lors du transfert) merci beaucoup ;)
est il possible d'avoir un espace de 10px entre le texte et le cadre ? stp :oops:
oui, recherche cette ligne :Citation:
Envoyé par pygoCENTRUS
et remplace padding:5px par padding:10px (padding = marge intérieure).Code:
2<td style="vertical-align: top; text-align: left; height: 200px; padding: 5px;">
Par contre un truc me chagrine : ta feuille de style (index.css) :? Je crains que ton tableau déborde du div id="coprs" (sous FF). Je suis presque tenté de te proposer un autre code pour ta page de présentation :aie: :oops:
je viens de modifier le padding et rien ne change :?
j'accepte toute proposition :mrgreen:,en tout cas j'admire ton courage :king:
bon je vais voir ce que je peux faire :roll:
lol idem ^^ Auteur porte bien son pseudo il aura été l'auteur de ta galerie ;)Citation:
Envoyé par pygoCENTRUS
à défaut d'être l'auteur de nombreux articles :aie:Citation:
Envoyé par le_chomeur
:dehors:
pygoCENTRUS : il te faudra patienter quelques jours... ;)
Voilà... j'espère que cela te conviendra.
Dans le dossier presentation, il y a
- la feuille de style (presentation.css)
- le fond (fond.jpg)
- la bannière (baniiere.jpg)
- rss.jpg
- rss2.gif que j'ai ajouté et qui est le logo RSS que j'utilise (il est un peu plus grand que rss.jpg. S'il ne te convient pas utilise rss.jpg)
J'ai repris une partie du code HTML des galeries ainsi qu'une partie la feuille de style (body, #en_tete, #corps, #menu, #pied_de_page).
J'ai ajouté un div (class="signature") qui permet de mettre ton nom en bas à droite et en italique.
Attention : je n'ai pas mis dans la pièce jointe le fichier 27.mp3 (le fond sonore). Cela faisait un fichier zip trop volumineux, donc impossible à poster. N'oublie pas de le rajouter ;)
------------------------------------------
Pour un meilleur référencement, tu devrais ajouter dans tes pages web la balise meta description :
Code:
2<meta name="Description" content="Alexandre Letertre photographie">
ainsi que la balise meta keywords :
tu peux ajouter d'autres mots-clefs, mais évite la répétition ;)Code:
2<meta name="keywords" content="photos, photographies, alexandre letertre, nature, animaux, ornithologie, botanique, aquariophilie">
Ajoute ces balises meta dans la partie head des pages HTML.
une erreur s'est glissée dans le code source de la page presentation.htm
ce n'est pas le bon dossier :aie:Code:
2
3
4
5
6
remplace "presentation_fichiers" par "presentation"
Code:
2
3
4
5
6
encore merci c'est nikel :yaisse2::king: