Pages :
Bonjour à tous !
Je suis à la recherche d'un moyen de mise en page pour mon site internet visible ici. L'idée serait d'avoir toutes les images fixes servant de menu (peut-être adaptables à la taille de l'écran mais cela me parait trop complexe) autour d'une fenêtre qui serait modifiée suivant l'image choisie.
Si on clique sur une des images, seule la fenêtre centrale et l'image choisie seraient modifiées, le reste n'aurait pas besoin d'être rechargé.
J'ai tenté avec plein de frames mais je ne suis jamais arrivé à ce que je désirais et en plus je perdais la barre de défilement générale, j'ai aussi lu que cela posait des problèmes pour l'indexation. Hors ce site aura besoin d'être indexé plus tard...
Je suis donc revenu à une mise en page avec des tableaux mais là je suis obligé de recharger toute la page à chaque clic sur une image...
Que pouvez-vous me conseiller ?
Merci d'avance
Modifié par jojoledemago (31 Mar 2010 - 19:48)
Salut Christele et merci pour ta réponse.
J'ai essayé le modèle 11 qui correspond le plus à mes attentes mais je ne vois pas l'intérêt par rapoort à un tableau qui me permettait la même mise en forme. Je ne vois pas comment indiquer la partie centrale en tant que cible de mes liens.
jojoledemago a écrit :
Salut Christele et merci pour ta réponse.
J'ai essayé le modèle 11 qui correspond le plus à mes attentes mais je ne vois pas l'intérêt par rapoort à un tableau qui me permettait la même mise en forme. Je ne vois pas comment indiquer la partie centrale en tant que cible de mes liens.

Bonjour,
Oui c'est normal comme réaction, mais la normalisation avance trés vite,
de plus avec beaucoup de mal les navigateurs donnent un rendu identique
entre eux. Pour cela il faut tendre vers une écriture parfaitement normalisée respectant les standards.
Avant il était facile de centrer un tableau avec simplement un <p align=center>
Si tu choisi d'écrire de façon stricte (DOCTYPE déclaré comme tel) tu verras que tu n'auras plus ton centrage.

De la même façon, beaucoup de nos anciennes habitudes deviendrons obselettes
peut a peut, ors nous savons a peut prés ce que sera cette écriture de demain.

Alors pourquoi ne pas changer tes habitudes de suite ?

MAIS LES TABLEAUX SERONT TOUJOURS UTILS rassures toi, mais pas pour dessiner une mise en page .
Modifié par Christele (30 Mar 2010 - 02:36)
Hello jojoledemago et bienvenue,

Christele a écrit :
Avant il était facile de centrer un tableau avec simplement un <p align=center>
Alors que maintenant c'est avec un <table align=center> ? Smiley lol

Christele a écrit :
Si tu choisi d'écrire de façon stricte (DOCTYPE déclaré comme tel) tu verras que tu n'auras plus ton centrage.
En fait si... et juste une précision : pour un usage courant il existe 6 doctypes dont 2 ont le terme "Strict" dans le nom (HTML4.01 strict et XHTML1.0 strict) mais les 6 permettent un rendu strict dans le sens de "conforme aux standards".

A lire en complément : Construire un site sans tableaux.
Mouais, enfin bon c'est pas la demande.
Heyoan, Christele, c'est bien d'être plein de bonnes intentions et de vouloir orienter les gens vers les bonnes pratiques d'intégration web professionnelles, mais ces bonnes pratiques concernent justement les professionnels, à la rigueur les passionnés et amateurs éclairés. Smiley cligne

S'il fallait améliorer ce site, corriger le code HTML pour utiliser du HTML sémantique plutôt que des tableaux de mise en page ne serait certainement pas la priorité. Donc bon...

jojoledemago a écrit :
Je suis donc revenu à une mise en page avec des tableaux mais là je suis obligé de recharger toute la page à chaque clic sur une image...

Que la mise en page soit faite avec des tableaux ou en CSS, ça n'a pas d'influence. La méthode classique de construction d'un site consiste à avoir des pages HTML distinctes, chaque page HTML étant une page complète avec l'interface générale, le menu de navigation et le contenu propre à la page.
Est-ce que cela pose un problème particulier?
Tout d'abord merci à vous 3.
Alors suivant vos conseils, j'ai lu beaucoup déjà sur le (X)HTML et le CSS et cela me parait tout de suite beaucoup plus complexe que de créer des tableaux dans dreamweaver, ce qui était à peu prêt à ma portée.
Si encore je pouvais trouver un code tout fait à modifier, mais malheureusment rien ne ressemble à ce que je veux créer... En effet, on trouve sur le net beaucoup de mises en page en colonnes, moi ce que je veux c'est 7 images qui servent de menu autour de l'affichage central...
Pourriez-vous m'aider à trouver une solution de positionnement ou de mise en page pour avoir au final, un contour fixe contenant mes images de menu et un affichage central de dimensions "intelligentes" doté de barres de navigation si nécessaire. En fait un peu comme le cadre dans lequel je suis en train d'écrire...
Merci d'avance et en tous les cas, vous m'avez motivé pour approfondir ce sujet, même si le temps nécessaie à apprendre tout ça n'est pour l'instant pas compatible avec la nécessité de créer ce site...
A+
Mais tu as retiré ta premiére maquette ..
peux tu la remettre au moins nous pourrons t'aider a faire
le 'decrassage' de la page telle que tu la veux;
Aprés tu te débrouilleras Smiley smile
Scuze !
La scéance de décrassage peut commencer !!!
Ensuite, je compte bien mettre les mains dans le camboui... Je suis déjà en train de réaliser quelques tutos sur votre site et sur d'autres très bien faits aussi tels que ceux de media-pixel.net.
Houla !
Je ne me souvenais plus que tu était en frames Smiley decu
Alors accepteras tu une version "normale" car vraiment les
frames sont injustifiées, par ailleur chaque image n'a pas la même
réaction, veux tu une réaction homogéne (zoom mais sans cadre noir)

Pour chaque "bouton" la page appelée, devrait venir au centre je supposes ?

Un autre détail, évites autant que tu peux les noms avec minuscules et majuscules mélangées, et surtout les espaces mets des _
Je veux en effet me lancer dans une création correcte, actuelle, accessible et compatible donc je suis en train d'essayer d'oublier ma logique tableaux...
Par contre cela demande d'engranger pas mal de connaissances, structures bloc, en-ligne, flux courant etc... Pour te dire mon niveau, je ne savais pas que <p> signifiait paragraphe, j'avais juste remarqué que c'était utilisé pour écrire du texte dedans !...
Chaque image n'a pour l'instant pas la même réaction car j'ai fait plusieurs essais simplement, à terme, elles devraient avoir la même : zoom (ou pas) et passage en couleur lors du survol au lieu du cépia. Mais pour ça je pense pouvoir m'en sortir, sauf peut-être le positionnement...
Le plus compliqué reste surement de faire apparaitre la page appelée par chaque "bouton" au centre et surtout qu'elle puisse avoir une dimension "intelligente" avec une hauteur et largeur mini et des barres de défilement si nécessaire.
C'est bien pris pour le reste, j'éviterai les majusules et les espaces.
MERCI BEAUCOUP
Modifié par jojoledemago (31 Mar 2010 - 13:15)
Oui alors tout vas bien et tu abandonnes les frames au passage Smiley smile

Bon ne dis pas a Heyoan que je t'ais donné cela comme exemple,

Exemple scroll dans DIV
mais sur un de mes site, tu vois que le texte essentiel (central si on veut)
est dans un DIV qui scrole ... pas de frame rien de tout cela .
Je te dis Heyoan ... parce qu'il te dira que ma syntaxe est pas terrible Smiley eek
en plus c'est vrais. mais le but est que tu vois ce qu'il est enfantin de faire ... le div pourrait étre plus petit , au centre en vertical et horizontal, et a la taille voulue ...

Oublie: astu PHP et Mysql Smiley eek
Modifié par Christele (31 Mar 2010 - 14:47)
J'imagine qu'il faut que j'essaie de fixer 2 colonnes autour du contenu (grâce à position:fixed) où je placerai 2 images dans chacune de ces 2 colonnes et j'hésite entre 2 solutions pour les 3 images d'en bas, soit je fixe aussi la <div> qui va les contenir, soit je laisse cette <div> dans le flux mais je limite la hauteur de la <div> "contenu" sinon je risque de ne plus voir ces 3 images sans scroller...
Non pas exactement, prends par exemple le site de mauritanie,
tu verras que le scroll ne vas jamais sur les deux DIV qui sont en bas pour
le copyright etc ....

Par ailleur une simple image en bas au centre, avec un transparent plus haut que les autres te donnera le décalages que tu avais sur les images du bas !

En tout cas bravo tu n'as plus les frames et tes textes sont bons

Bon la feuille de style est dans la page donc clic/droit et afficher source tu aura tout !

Je n'ais fait que dégrossir le sujet, mais les spécialistes vont nous rendre ça plus propre Smiley smile
Modifié par Christele (04 Apr 2010 - 12:56)
Bon, voilà où j'en suis à cette adresse :
http://vacanceschezjolivet.free.fr/index%20essai.htm

les pbs identifiés :
* dans IE, le menugauche se place 200px trop à droite, ce qui correspond au padding gauche du contenu
* même si je compte utiliser les propriétés CSS pour remplacer mes "onmouseover", ceux-ci ne fonctionnent pas (cela m'aurait pourtant arrangé dans un premier temps...)

Je continue grâce à vos conseils.
Désolé je n'avais pas vu que tu avais modifié ton post, je regarde ça tout de suite, ça a l'air très proche de ce que je recherche !!!
Encore merci
Le onmousexxxxx sera enfantin a intégrer dans le CSS
A propos du CSS bien sur ressort le dans un CSS ce sera plus clair pour toi,
moi j'ais mis tout en un ! pour que tu puisses faire un
clic droit ==> afficher source => selection tout => copier/coller
Modifié par Christele (31 Mar 2010 - 17:52)
Bien finalement (et j'en restes là) j'ais résolu le dimentionement et position du DIV central par un javascript pffff... pas terrible, mais pas assez forte pour faire ça en CSS
Moi je trouve ça particulièrement exceptionnel !!!!!!!
MERCI MERCI MERCI !!!
Bon maintenant, à moi d'adapter ton code au mien, je vais essayer de ne pas faire le copier-coller super tentant pour vraiment bien comprendre.
Récupéres bien tout
le HTML le CSS le JS
car dans un ou deux jours je retires du site ... Smiley confused

Merci de mettre résolu ici, et quand tu auras avancé, si tu as une question recrées un sujet.

Bon courage
Pages :