Discussion :

[Matthieu14]

Bonjour à tous,

D'avance merci aux bonnes âmes qui sauront ou qui essaieront de me guider vers le bout du tunnel
Il faut dire que je ne maitrise pas encore toutes les subtilités du css alors qu'on m'en demande parfois beaucoup

Voici donc l'exposé de mon problème à l'heure ou je vous parle.

Je reprend le site d'un collègue qui date déjà un peu beaucoup. Le dit site consiste en une page principale contenant une entête, un menu de navigation à gauche et d'un cadre principal. J'ai repris l'ensemble de la page originale pour la transformer en une page xhtml strict couplée à une belle feuille css. J'ai ainsi pu séparer le contenu de la mise en forme. J'en ai profité pour supprimer ces affreuses balises iframe par de jolis div.

Le contenu principal se retrouve donc dans une balise div et se trouve appelé plus précisément par une balise object en lieu et place d'une ancienne balise iframe. Il faut dire que le contenu du site est généré par un outil externe sur lequel je n'ai pas la main. Je récupère donc ce dernier sous la forme d'un ensemble de fichiers html tout simplement. L'idée (bien que ce soit plus une contrainte) est donc d'afficher le contenu du site dans un object.

Mon problème concerne justement cette balise object et son intégration dans le reste de la page. Je pense que mon problème sera probablement anodin pour vous donc avis aux amateurs. Je suis preneur de tout conseil avisé concernant les soucis suivants :

1) Le div contenant le cadre principal a une largeur fixe (pour ne pas dénaturer la mise en page) mais une hauteur non imposée. Les pages html à afficher dans ce cadre sont moins larges donc pas de souci en largeur mais avec une longueur variable. Mon premier problème est que j'ai l'impression que mon cadre a tout de même une hauteur fixe... En effet si la page à afficher via la balise object est vraiment longue, un ascenseur vertical apparait alors que ce n'est pas le but. L'objectif est que l'objet s'affiche sans contrainte en hauteur. A aucun moment je n'impose une hauteur dans ma feuille de style. Je ne comprend donc pas.

Le xhtml principal où apparait la balise object :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
[...]
<div id="menu">
	<div class="element_menu">
		<h3>Processus</h3>
		<ul>
			<li><a href="diagram3f.htm">Process 1</a></li>
                        <li><a href="diagram4f.htm">Process 2</a></li>
                        [...]			 
                </ul>
	</div>
</div>
<div id="corps">
	<object data="diagram3f.htm" type="text/html" class="element_corps">  
</div>
[...]

Mon code css pour la balise object et le cadre principale (conteneur) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
body
{
   width: 1024px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
}
[...]
#corps
{
   margin-left: 220px;
   margin-bottom: 20px;
   padding: 5px;
   color: #B3B3B3;
   background-color: #FFFFFF;
   border: 4px solid #9acd32;
}
 
.element_corps
{
    height: 100%;
    width: 100%;
}
[...]

2) Dans mon menu de navigation j'aimerais placer des liens pour pouvoir appeler la page avec le bon contenu dans la balise object. Le but est de remplacer les anciens paramètres target des balises de lien qui étaient couplés avec la balise iframe.

La navigation entre les pages dans le cadre principal se fait sans problème mais pas via les liens mis en place. Si j'utilise ces derniers sans target, la contenu s'affiche bien mais sans la mise en page (forcément on contourne dans ce cas la page principale et la balise objetc).

Je ne vois pas comment faire sans target...

Dur dur la transition vers css.
Merci d'avance aux bonnes âmes donc.

[Matthieu14]

Bon, mon post ne semble pas attirer une foule de réponses.

Peut-être est-ce infaisable en css mais dans ce cas pourquoi les recommandations du W3C et de nombreux afficionados css à l'encontre des balises frame et iframe...
Peut-être n'ai je pas été clair dans mon exposé. Donc je recommence :

J'ai une page xhtml principale index.htm qui embarque d'autres pages (générées par ailleurs) via une balise object :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="corps">
<object data="diagram14.htm" type="text/html" class="element_corps">  
</div>

Ma page principale est couplée au css suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#corps {
	width: 831px;
	height: 100%;
	overflow: hidden;
	margin-left: 185px;
	background-color: #ffffff;
	border: 4px solid #888888;
}
.element_corps {
	width: 100%;
	height: 100%;
	overflow: auto;
}

Le css des pages embarquées se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
html {
	margin: 0;
	padding: 0;
	border: 0 none;
}
body {
	margin: 0;
	padding: 0;
	border: 0 none;
	width: 800px;
}

Le problème : les pages embarquées sont coupés en hauteur et un ascenceur verticale apparait alors qu'à aucun moment je ne fixe de hauteur imposée...

Je suis perdu et mes connaissance css sont limitées dans ce contexte.
Merci d'avance aux courageux qui tenteront de m'aider

[thelvin]

Pour commencer, je précise que je ne n'ai pas l'habitude de styliser du <object> et que je ne sais pas si tu peux t'en dépêtrer ou pas.

Peut-être est-ce infaisable en css mais dans ce cas pourquoi les recommandations du W3C et de nombreux afficionados css à l'encontre des balises frame et iframe...

Le problème avec les frames et les iframes, c'est leur nature. Ce n'est pas le fait qu'elles ne s'appellent pas <object>.
Elles posent des soucis d'accessibilité, et comme elles n'ont pas d'URL à proprement parler, des soucis de référence. (Pas de bookmark, pas de lien, pas de référencement de moteur de recherche.) J'imagine qu'il y a aussi d'autres soucis. Utiliser <object> comme un <iframe> ne change rien à cela.

Tu voudrais peut-être me répondre que tu n'as pas le contrôle sur le logiciel qui fonctionne comme ça : oui d'accord, mais en attendant c'est là qu'il est, le problème. Pas avec le W3C et ses afficionados.

Si tu n'as pas le choix, tu n'as pas le choix. Si les <iframe> répondent bien à ton besoin, mets donc un <iframe> (et reste en transitionnel,) et si ça n'est pas l'idéal, tant pis, tu auras fait ce que tu as pu.

Notes : Si par hasard tu es joueur et que le JavaScript est déjà un prérequis pour ce site, tu peux t'amuser à créer l'élément <iframe> au chargement de la page en JavaScript -> validation OK. Encore plus joueur, il est sans doute possible de demander les pages à insérer en JavaScript, et d'écrire leur contenu dans la page en cours, au lieu d'insérer cette page dans un <iframe>. Ultra-joueur : tout ça devrait pouvoir se faire à la génération de la page côté serveur, sans JavaScript. Bon, c'est loin d'être certain.