[CSS] Comment afficher une page dans un cadre voulu

Bonjour,

J'ai réaliser une page d'accueil en CSS avec plusieurs cadres.

Dans un des cadres j'ai un menu déroulant et j'aimerais que lorsque que l'on clique sur un des liens de ce menu, l'ensemble de la page ne change pas et que juste un cadre change.

En gros que seul un cadre serve de fenêtre de navigation.

Est ce que cela est possible ?

En faisant des cadres avec du HTML j'arrive à le faire en utilisant <a TARGET="#" HREF="#">, mais avec des cadres en CSS sa ne marche plus et je n'arrive pas à trouver de solution sur le net.

Dans le cas du HTML je me retrouve avec un soucie d'affichage de mon menu et dans le cas du CSS un soucie d'affichage dans un cadre donné.....

Vous remerciant d'avance de vos réponses.

Cdt

Bonjour Luckies,

Je me souviens en des temps anciens avoir pratiqué ce genre de présentation. Pour la technique j'utilisais à l'époque des Frames (concept que j'ai banni depuis) pour lesquelles l'utilisation de l'attribut Target permet de sélectionner la frame cible du contenu visé par l'url.

Toutefois je ne comprends pas ce que tu appelles

luckies a écrit :
des cadres en CSS

Peux-tu développer ce point stp ?

Greg_Lumiere a écrit :
Je me souviens en des temps anciens avoir pratiqué ce genre de présentation. Pour la technique j'utilisais à l'époque des Frames (concept que j'ai banni depuis) pour lesquelles l'utilisation de l'attribut Target permet de sélectionner la frame cible du contenu visé par l'url.

À propos: il semble que les Frames, que je continue toujours à utiliser dans certains cas, aient fait l'objet d'un anathème depuis longtemps de la part des fanatiques du CSS, au même titre que l'utilisation de tables pour le positionnement d'éléments dans une page. Je n'ai jamais cependant trouvé de document qui explique clairement comment se passer tout à fait de ces éléments.
Auriez vous connaissance d'un tel document?

Pour autant que je comprenne le problème de Luckies, l'utilisation d'un iframe (qui n'a pas l'air de faire l'objet d'un tel anathème) devrait correspondre à ses besoins, avec du Javascript pour mettre la bonne valeur dans le SRC de l'iframe lors d'un clic sur le menu.

Sinon, j'ai fait l'expérience dans un site que je gère de générer complètement chaque page en php. Les serveurs actuels et les connexions Internet actuelles sont suffisamment puissants pour que cela ne se traduise pas par un temps de chargement trop important.
Quand j'ai commencé à faire du HTML, on essayait de réduire au minimum les temps de transmission et de calcul de serveur. Une bonne technique était d'utiliser le CPU du PC en faisant tout générer en Javascript par le client...

Merci de vos réponses,

Je suis novice et autodidacte, ce qui n'aide pas les choses, peut-être que j'utilise de mauvais termes, veuillez m'en excuser d'avance.

voici ce que j'essaye de faire : http://essaimontguillon.pagesperso-orange.fr/

je pense qu'un exemple doit être plus parlant

J'ai essayer de faire la même chose avec du HTML sans avoir recours au CSS mais mon menu ne chevauche pas sur la frame de navigation, donc il est inutilisable.

J'espère que cela sera plus clair pour vous.

Ci dessous le code CSS

Fichier styles.css

haut {
	margin:0 auto;
	position:fixed;
	border:solid 0px;
	height:200px;
	width:900px;
	top:10px;
	left:10px;
	right:10px;
	background-color:#ffffff;
}
	

gauche {
	margin:0 auto;
	position:fixed;
	border:solid 0px;
	width:200px;
	top:210px;
	left:0px;
	right:700px;
	bottom:10px;
	background-color:#0489B1;
}

droite {
	margin:0 auto;
	position:fixed;
	border:solid 0px;
	top:231px;
	width:700px;
	left:200px;
	right:0px;
	bottom:10px;
	background-color:#132959
}

menu {
	margin:0 auto;
	position:fixed;
	border:solid 0px;
	top:210px;
	width:660px;
	height:21px;
	left:200px;
	right:0px;
	background-color:#132959
}

luckies a écrit :
J'ai essayer de faire la même chose avec du HTML sans avoir recours au CSS mais mon menu ne chevauche pas sur la frame de navigation, donc il est inutilisable.

Je ne comprends pas cette phrase.

Comme cela ressemble à un des sites que je gère, je vous propose de jeter un coup d’œil sur http://www.alma-musica.net
La première page est là uniquement pour faire joli, à la demande du designer.
Si vous cliquez par exemple sur Présentation/L’ensemble, vous trouverez une page qui ressemble à la vôtre.
Dans cette page, le haut est une div, le menu est un ensemble de div, la cadre dans lequel s'affiche le contenu est une iframe.
Comme je voulais que ça s'adapte automatiquement à la taille de l'écran, j'ai constaté que les calculs automatiques du CSS ne suffisaient pas. Il y a à l'affichage de la page un calcul pour avoir le menu et l'iframe positionnés correctement.

PapyJP a écrit :
Je n'ai jamais cependant trouvé de document qui explique clairement comment se passer tout à fait de ces éléments.
Auriez vous connaissance d'un tel document?

Non, pas du tout. Comme nous tous j'ai du me creuser la tête afin de pouvoir avoir un menu identique quelle-que soit la page appelée. Perso (adresse dans mon profil) j'utilise des pages php qui sont introduites (commande include()) dans mes pages html. Je peux si vous le souhaitez vous donner plus de détail sur la méthode que j'emplois (en pv ou autre sujet).

PapyJP a écrit :
Pour autant que je comprenne le problème de Luckies, l'utilisation d'un iframe (qui n'a pas l'air de faire l'objet d'un tel anathème) devrait correspondre à ses besoins, avec du Javascript pour mettre la bonne valeur dans le SRC de l'iframe lors d'un clic sur le menu.

Je vois pas trop le rapport avec le JavaScript - les liens sont codés en dur dans la frame menu et le Target désigne la frame dans laquelle la cible va s'afficher.

PapyJP a écrit :
Une bonne technique était d'utiliser le CPU du PC en faisant tout générer en Javascript par le client...

Perso j'adhère pas car si JS désactivé : pas de site ! Pour exemple je fais côtoyer contenu statique et dynamique (php) sans recours au JS et mon affichage ne part pas à la dérive.

luckies a écrit :
Je suis novice et autodidacte

Bienvenu au club !

Luckies, je t'invite à visiter mon site. Tu constateras que le menu est statique, identique sur toutes les pages et qu'il ne fait appel ni aux frames ni au javascript.


Par contre je vois que tu as positionné ton menu en Fixed ce qui me fait demander pourquoi passer par des frames alors ?

En considérant que tu souhaites t'orienter vers une méthode uniquement html/css je pense que tu devrais t'attacher aux tutoriels qui concernent :
* la notion de flux
* le positionnement en CSS
* la gestion des espacements

Autrement, donc en considérant que tu reste sur ta lancée, te serait-il possible de nous fournir un lien vers ton site ou une demo Codepen/Jsfiddle ? Juste ton css c'est limite car pour solutionner l'affaire, on a besoin de connaître les conditions d'application de ton Css et on ne peut s'en rendre compte qu'en voyant la structure utilisée.

Greg_Lumiere a écrit :

Autrement, donc en considérant que tu reste sur ta lancée, te serait-il possible de nous fournir un lien vers ton site ou une demo Codepen/Jsfiddle ? Juste ton css c'est limite car pour solutionner l'affaire, on a besoin de connaître les conditions d'application de ton Css et on ne peut s'en rendre compte qu'en voyant la structure utilisée.

Et comment puis je faire ceci ?

Greg_Lumiere a écrit :

Par contre je vois que tu as positionné ton menu en Fixed ce qui me fait demander pourquoi passer par des frames alors ?

Alors la tu me pose une bonne question.... après des essais et comme mon menu est seul dans la frame il n'y a pas de difference entre Fixed et Absolute, par contre sa change si je met Relatif.

Si j'ai bien compris Fixed fixe une partie qui restera visible même en cas de scrol, Absolute ne fixe pas la partie donc en cas de scrol il disparai et Relatif ben la j'ai pas bien compris tu peux le mettre ou tu veux mais comme il y a aussi "height, width, top, ect..." je vois pas bien l'utilité.

Effectivement j'aimerais continuer sur HTML/CSS car j'ai essayer un peu PHP et je m'y suis noyé

PapyJP a écrit :

luckies a écrit :
J'ai essayer de faire la même chose avec du HTML sans avoir recours au CSS mais mon menu ne chevauche pas sur la frame de navigation, donc il est inutilisable.

Je ne comprends pas cette phrase.

Et bien comme le menu ce trouve dans une frame qui fait 20px de hauteur, lorsqu'il ce déroule il n'est plus visible. Le menu ce déroule sous la Frame qui sert à la navigation.

Je vais te répondre dans l'ordre.

- tu peux faire ceci sur CodePen puis en cliquant sur New. Ensuite tu copie-colle ton body, css et scripts etc...

- Il y a sur ce site un tutoriel sur le positionnement. Il est bien fait et reprend chacun des positionnements - intitulé Le positionnement en Css. Si des passages te semblent obscurs je pourrais sûrement t'éclairer.

- le php ne te sauvera pas...

- et voilà !
Modifié par Greg_Lumiere (25 Nov 2014 - 20:55)

Pour le HTML
http://codepen.io/anon/pen/EajbvY.html

Pour le CSS
http://codepen.io/anon/pen/EajbvY.css

Pour le JS
http://codepen.io/anon/pen/EajbvY.js

Je vais lire le tuto que tu indiques, voir si cela peux éclairer ma lanterne.

Merci

Bonjour,

J'ai pris le temps de lire les différent sujets sur le placement en CSS mais j’avoue que sa reste très nébuleux pour moi, ,et surtout je ne vois pas le rapport entre ceci et le fait de vouloir qu'un lien effectue un affichage dans une frame précise...

Car le placement de mes frames à l'air bon, j'ai tester sur plusieur navigateur et le resultat est satisfaisant de ce coté

Je crois que je suis bien perdu...

PapyJP a écrit :
Comme cela ressemble à un des sites que je gère, je vous propose de jeter un coup d’œil sur http://www.alma-musica.net
La première page est là uniquement pour faire joli, à la demande du designer.
Si vous cliquez par exemple sur Présentation/L’ensemble, vous trouverez une page qui ressemble à la vôtre.
Dans cette page, le haut est une div, le menu est un ensemble de div, la cadre dans lequel s'affiche le contenu est une iframe.
Comme je voulais que ça s'adapte automatiquement à la taille de l'écran, j'ai constaté que les calculs automatiques du CSS ne suffisaient pas. Il y a à l'affichage de la page un calcul pour avoir le menu et l'iframe positionnés correctement.

Dans l'esprit c'est exactement ce que je veux faire, mais il m'est impossible d'afficher le code sur un clique droit !!

luckies a écrit :
Dans l'esprit c'est exactement ce que je veux faire, mais il m'est impossible d'afficher le code sur un clique droit !!

Je ne sais pas ce que tu utilises comme navigateur. Pour moi, j'ai choisi Firefox et son extension FireBug qui sont super pour le debugging. Ça n'empêche pas de tester ensuite sur les autres navigateurs.
Ce que je fais en général: mettre au point sur Firefox/FireBug, puis tester sur Safari sur PC, iPad et iPhone, puis Chrome, et enfin IE.
En général je pique une crise avec IE, mais on trouve facilement des infos sur ce forum (ou d'autres) pour adapter du code à IE. C'est plus simple que dans l'autre sens.

Avec Firefox, c'est Ctrl-U, qui te donne le code HTML d'une page. Mais il FireBug permet de voir bien plus de choses, tester du Javascript avec des points d'arrêt, modifier dynamiquement le CSS sans avoir à recharger la page, etc. L'essayer c'est l'adopter!

Sur ce site, la zone d'affichage des pages est dans un Iframe. On peut afficher uniquement le contenu de l'iframe en mettant la souris dans ce cadre, clic droit, choisir "Ce cadre/Code source du cadre".
Modifié par PapyJP (01 Dec 2014 - 16:48)

Reboujour,

En recreusant suivant la réponse de PapyJP, j'ai réussit à faire ce que je voulais en utilisant la balise Iframe.

Voila une bonne chose de faite et cela va me débloquer un bon coup.

Merci d'avoir pris du temps pour me répondre

Cordialement et surement à bientôt.