28218 sujets

CSS et mise en forme, CSS3

[résolu] Simulation de frames

Pages :
Salut tlm!!!!

Je suis nouvellement arrivé ici et j'aurais besoin d'un ti coup de main siouplais!? Smiley biggrin Smiley smile

Bon... j'ai essayé de faire une simulation de frames, en me basant sur le tutorial du site (très bien fait en passant! Smiley ravi )

... sauf que j'ai due utiliser un tableau en même temps parce que là... sinon... mon include de page de droite fonctionnait pas, il affichait en bas Smiley langue lol.. à la place du include de la page de bas.

En tout cas!
tout ca pour dire que le prob... cé qu'on dirait que les différentes pages insérés avec includes ne sont pas complètement... "collés" l'une à l'autre. Y a une genre de barre blanche qui apparait entre celui du haut et ceux plus bas... Pourtant, mon tableau n'a pas de bordure..

Ca vous dit quelque chose? Smiley ohwell

Mici à l'avanceuh! Smiley biggrin

Roxy

PS: pour que ce soit plus compréhensible...
j'ai les pages suivantes, insérés avec include..

- haut
- gauche (menu)
- frame (contenu)
- droite (bande avec image)
- bas

Donc contrairement à l'exemple sur le site... j'ai un include de plus qui est à droite de mon contenu.

Mici!!

PS: si vous avez besoin de plus de détails.. ou d'un bout de code... juste à demander!
Euhhh... oki?

lol... cé que cé gros hein!

bon oki...


donc...

** contenu_frameset.php **


<?php require "liens.php"; /* Où j'ai mes liens de pages à insérer*/

/* ici j'ai mon head */
?>


<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
	<div class="haut"><?php include $haut; ?></div>
</td>
</tr>
<tr>
<td>
	<?php include $menu; ?>
</td>
<td>
	<div class="frame"><?php include $page; ?></div>
</td>
<td>
	<div class="bande"><?php


/* Pour insérer mon image - bande à droite - tableau si plusieurs
images preloadé selon un rollover à distance */

if (is_array($bande))
{
	echo '<img src='. $bande[0]. ' border=0 name="bandeDroite">';
}else if(substr_count($bande, ".html") != 0)
{
	include $bande;
}
else
{
	echo '<img src="' . $bande . '" border=0 name="bandeDroite">';
}
?></div>

</td>
</tr>
<tr>
<td colspan="3">
	<div class="bas"><?php include $bas; ?></div>
</td>
</tr>
</table>

</body>
</html>



** CSS **

body {
	background-attachment: fixed;
	background-image: none;
	background-repeat: no-repeat;
	color: #000000;
	background-color: #FFFFFF;
	font-family: "Century Gothic", "Lucida Sans", Arial, Verdana;
	font-size: x-small;
	font-style: normal;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	
	scrollbar-face-color:#C4B385;
	scrollbar-highlight-color:#000000;
	scrollbar-3dlight-color:#ffffff;
	scrollbar-darkshadow-color:#ffffff;
	scrollbar-shadow-color:#000000;
	scrollbar-arrow-color:#000000;
	scrollbar-track-color:#E5D8B5;
}


.haut{
	width: auto;
	height: 35;
	background-color: #E5D8B5;
	padding: 0;
}

.menu{
	position: absolute;
	left: 0;
	width: 233;
	height: 518;
	background-color: #E5D8B5;
}

.frame {
	left: 0;
	width: 596;
	height: 518;
	background-color: #FFFFFF;
	overflow: auto;
}

.bande{
	left: 0;
	width: auto;
	height: 518;
	background-color: #E5D8B5;
}

.bas{
	width: auto;
	height: auto;
	padding: 0;
	background-color: #E5D8B5;
}



** Voici le site (pour que vous puissiez voir le genre de frames mais celui qui est sur internet en ce moment est celui qui est fait avec de vrai frames. Je n'ai pas encore mit la nouvelle version sur le serveur car il ne fonctionne pas complètement. **

** À voir en résolution 1024X768 **

http://www.christiandesigninc.com


PS: Dans la version simulation de frames, j'ai fait en sorte que quelque soit la résolution, que ca fonctionne. Mais lorsqu'on a une résolution de 1024X768, il y a une grosse ligne blanche en bas de mon div "bas" (comme si ca ne prenait pas la couleur du background précisé dans "bas"). Et il y a une petite ligne entre mon div "haut" et ceux qui sont en bas ("gauche", "frame", "bande")... comme si les pages n'étaient pas complètement collées.


Mici encore!
En espérant que cé assez clair comme code... Smiley ohwell

Roxy
Roxy a écrit :
Salut tlm!!!!

Bon... j'ai essayé de faire une simulation de frames, en me basant sur le tutorial du site (très bien fait en passant! Smiley ravi )

... sauf que j'ai due utiliser un tableau en même temps parce que là... sinon... mon include de page de droite fonctionnait pas, il affichait en bas Smiley langue lol.. à la place du include de la page de bas.



Bonjour et bienvenue Roxy,

Une suggestion, Smiley cligne tu devrais supprimer le tableau qui apparemment n'a rien à faire là, reconstruire ta page et demander de l'aide par rapport au mauvais affichage de la partie incluse...

Eventuellement, un coup d'oeil sur les Règles ... et ensuite, peut être la FAC Smiley cligne
Merci pour le mot de bienvenu Dominique Smiley ravi

Oki, je vais enlever le tableau Smiley smile
si tu crois que cé la meilleure chose à faire...

Pour ce qui est des règles et de la fac... en fait j'avais déjà regardé... euhh.. tu trouves que j'ai agit de manière que ca ne respecte pas les règles? Smiley confus

Bon.. je modifie tout ca et je reviens Smiley langue


Mici Smiley biggrin


Ps: euhh.. tu crois pas que ca va poser un problème pour la partie "bande", si j'enlève le tableau? Car la partie bande est parfois une image que je fais apparaître à droite et parfois une page html à insérer... Mais ce qui est sûre, c'est que je veux que ca fasse l'effet d'un frame (pas dans le même "frame" que le contenu..)
Modifié le 01 Feb 2005 - 18:06
Modérateur
Bonjour Roxy,

J'aimerais souligner quelque chose d'important qui pourrait nuire à la compréhension que tu fais des includes. Les includes n'ont vraiment rien à voir avec les frames que tu connais. Ce n'est ni des frames, ni des faux-frames, ni même des frames de voiture. Oublis l'idée de vouloir comparer ca aux frames. Le fait d'appeler les includes des pseudos-frames est selon moi une grossière erreur. Les includes sont des includes, voilà tout.

Leur principe est simple. Tu met du code dans un fichier sur ton hébergeur. Lorsque tu fais un include de ce fichier, le serveur se charge de traiter et d'écrire ce qu'il contient dans ta page web et ENSUITE, il renvoi le résultat au visiteur. Au final, tu as donc un document html normal, et aucune trace de l'utilisation des includes.

Je te conseille donc de ne pas travailler sur tes includes tout de suite. Commence par faire afficher ton interface correctement, sans includes. Une fois que ta mise en page sera parfaite, tu pourras t'attaquer aux includes, mais pas avant.

Bonne journée.
Administrateur
dominique a écrit :
... et ensuite, peut être la FAC Smiley cligne

On apprend plein de choses à la FAC, mais ici ce serait plutôt la FAQ Smiley langue Smiley lol
euhh... je sais en fait que ce n'est pas des frames.. cé juste que si on utilise les includes avec overflow, on peut simuler des frames.. non?

En fait, ca peut remplacer les frames.. c'est ce que je voulais dire.

a écrit :
Je te conseille donc de ne pas travailler sur tes includes tout de suite. Commence par faire afficher ton interface correctement, sans includes. Une fois que ta mise en page sera parfaite, tu pourras t'attaquer aux includes, mais pas avant.


bahh... c'est que tout est déjà fait.. avec les includes et tout... tout fonctionne, sauf la partie que je précisais Smiley langue Smiley ohwell

C'est que ca serait deux fois plus compliqué de tout copier ce que j'ai dans chacune de mes pages html et php et de les mettres dans une même page...

Bon, je vais commencer par enlever le tableau et je vais voir ce que ca va faire Smiley biggrin

Merci encore.

PS: lol Raphael
Modifié le 01 Feb 2005 - 18:11
Modérateur
Roxy a écrit :
cé juste que si on utilise les includes avec overflow, on peut simuler des frames.. non?


Non justement, tu ne peux pas styler un include. Tout se passe coté serveur. Quand tu appeles une page qui utilise des includes, tu reçois que du code html et css. Regarde la source que tu reçois, aucune trace d'includes. Ils ne sont pas dans le code source, ils ont simplement servi à générer du code. C'est juste ce code que tu peux styler. L'include n'est pas un tag au même titre qu'un iframe ou un div...
Oupsssss ! c'est la saint dom aujourd'hui Smiley confused

Bon ! suis fatigué, j'ai de la fièvre, je crache mes poumons... Mais je sais, ce n'est pas une excuse, j'aurais dû mieux me relire Smiley cligne Smiley lol Pardonnez-moi !

En fait, il ne faut pas tout refaire... Enfin pas tout de suite Smiley lol ... L'idée de Merkel est que tu présentes une page avec les éléments à inclure, déjà dans la page... Juste pour pouvoir vérifier l'intégralité de la page et du css et trouver plus facilement ce qui ne va pas... Une fois corrigé, tu réintroduits tes inlusions et normalement tout est ok Smiley cligne
Modifié le 01 Feb 2005 - 18:20
ok...

mais ca va faire de problème par rapport à ma bande qui est parfois une image et parfois une page html?

... j'imagine que non si je met pas mon image dans le même div que mon "contenu" (avec lequel je veux utilise un scrollbar).. c'est ça?

Bon... parfait, je vais modifier tout ca et vérifier Smiley cligne
Bon... j'ai suivis l'explication dans le tutorial... et.. ca marche pas.. Smiley bawling


alors voici..

INDEX


<html>
<head>
<title>titre></title>
<link href='medias/contenu.css' rel='stylesheet' type='text/css'>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="haut">
	<?php include ('contenu_frameHaut.html');?>
</div>

<div class="menu">
	<?php include ('contenu_menu.html'); ?>
</div>

<div class="contenu">
	<?php include ('coiffure_00.html'); ?>
</div>

<div class="bande">
	<?php echo '<img src="../images/contenu_droite_coiffure00.jpg" border=0 name="bandeDroite">';?>
</div>
<div class="bas">
	<?php include ('contenu_frameBas.html'); ?>
</div>

</body>
</html>



Pour chacun des div, j'ai précisé la position et grandeur que ce devrait normalement prendre:

CSS
body {
	color: #000000;
	background-color: #FFFFFF;
	font-family: "Century Gothic", "Lucida Sans", Arial, Verdana;
	font-size: x-small;
	font-style: normal;

	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.haut{
	width: auto;
	height: 35 px;
	background-color: #E5D8B5;
	padding: 10 px;
}

.menu{
	position: absolute;
	left: 0;   /* Complètement à gauche*/
	width: 233 px;
	height: 518 px;
	background-color: #E5D8B5;
}

.contenu{
	margin-left: 233 px;   /* À gauche du menu */
	width: 596 px;
	height: 518 px;
	background-color: #FFFFFF;
	overflow: auto;   /* Scrollbar si besoin*/
}

.bande{
	margin-left: 829 px;   /* À gauche du contenu */
	width: auto;
	height: 518 px;
	background-color: #E5D8B5;
}

.bas{
	width: auto;
	height: 47 px;   
	padding: 10 px;
	background-color: #E5D8B5;
}




Encore une fois, comme auparavant, le contenu affiche en dessous du menu, complètement à gauche et la bande affiche en dessous du contenu, complètement à gauche. Smiley ohwell

En passant... le padding=10px (j'ai pris ca sur le tutorial)... ca ne fait aucune différence quand je met 10px ou 0px... je comprend pas...

J'ai pourtant bien calculé le margin-left selon la grandeur et position initiale de l'autre div...

Merci d'avance!

PS: dans le tutorial... il y a le div .frame (que j'ai remplacé par .contenu) ... mais il y a aussi .conteneur qui ne semble pas utilisé ailleurs que dans le css.... ?
Modifié le 01 Feb 2005 - 19:13
Bonjour Roxy

Le premier truc qui manque à ta page, c'est le doctype... Très important pour l'interprétation du code par le navigateur, voir ici : http://www.pompage.net/pompe/doctype/

Second truc, je ne suis pas certain que tu ais bien saisi l'intérêt de "include" de php...

Dommage qu'on ne puisse pas voir la page qui cloche, j'aimerai être sur que tu ne fais pas "inclusion" de page complète contenant déjà du code qui doit être unique, du genre :


<html>
<head>
<body>

Contenu de la page

</body>
</head>
</html>


Ce qui nous donnerait au final une page unique contenant plusieurs fois ces codes.

En fait, tu dois d'abord créer une page contenant tous les éléments, sans include et sans frame.

Ensuite, une fois ta page terminée et validée par tes soins, tu pourras déterminés les éléments qui peuvent être "inclus". En général, des données qui sont identiques sur toutes les pages du site, par exemple :

- le sommaire général du site,
- un menu secondaire,
- l'entête,
- le pied de page.

Ainsi, chacun de ces éléments sera unique et toute modification de l'élément permettra une mise à jour instantannée de tout le site.

L'utilisation d'include :

Une fois tes éléments à inclure déterminés, tu extraits de la page le bout de code qui les génère, et pour chaque bout de code, tu créés un fichier dont le nom sera appelé par ca commande "include".

Est ce plus clair ainsi ?
Modifié le 02 Feb 2005 - 16:01
lol... euhh.. à par le truc du doctype (que je vais regarder sans plus tarder)... j'avais tout fait comme tu as dit Smiley lol

Toutes mes pages à inclure fonctionnent... et j'ai déjà enlever toutes les balises html, head, body... y a que le code qui doit normalement être entre <body></body>... sans les balises bien sûre Smiley ravi

Mais bon, pour le doctype je regarde tout de suite Smiley murf

Merci
Modifié le 02 Feb 2005 - 16:12
Smiley rolleyes euhh.... question toute bête à propos des doctypes:

cé quoi la différence entre "html 4.01 transitional" et "html 4.01 strict" ??? lol.. Smiley sweatdrop


mais bon.. sinon, comme j'ai dit plus haut.. j'ai bien compris le concept des includes et je ne fais pas d'inclusion de page complète contenant déjà du code qui doit être unique Smiley lol Mais merci de t'en être inquiété Smiley ravi

En fait, personnellement, je crois que cé le CSS Smiley ohwell ... je crois que j'ai peut-être mal... fait un truc dans mon CSS ?

Merci!
je suis en train de regarder tout ca...

je suis pas la seule programmeuse sur ce site Smiley langue héhé.. en fait... cé moi la programmeuse et l'autre cé le côté look... images etc... sauf que elle a programmé certains bouts comme le flash et tout alors je vérifie ca avec elle...

je comprend maintenant les différences... et je crois que cé strict pour nous.. mais bon.. veux m'assurer qu'elle a rien utilisé qui est pas accepté dans les strict.. Smiley biggrin
Bon! ouff... désolée si ca prit du temps avant que je répondre.. c'est que j'ai eu des empêchements personnel qui ont fait que je n'ai pas pu avancer dans ma page..

Donc, j'ai ajouté le bon doctype "transitional" sur ma page..

Je vais p-e changer ca plus tard pour que ce soit strict.. mais bon.. après que le reste soit changé et donc le client s'en rendra pas trop compte Smiley cligne

Donc, ma page est comme suit maintenant:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>titre></title>
<link href='medias/contenu.css' rel='stylesheet' type='text/css'>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="haut">
	<?php include ('contenu_frameHaut.html');?>
</div>

<div class="menu">
	<?php include ('contenu_menu.html'); ?>
</div>

<div class="contenu">
	<?php include ('coiffure_00.html'); ?>
</div>

<div class="bande">
	<?php echo '<img src="../images/contenu_droite_coiffure00.jpg" border=0 name="bandeDroite">';?>
</div>
<div class="bas">
	<?php include ('contenu_frameBas.html'); ?>
</div>

</body>
</html>


J'ai modifié ma page pour que ce soit le strict minimum et que ce soit plus facile de trouver le problème.

J'ai mit ce doctype uniquement sur cette page là... puisque les pages à inclure ne doivent pas contenir les balises de base (html, head, body).

Le problème n'est pas résolus, je continue à voir mes sections (pages incluses) une en dessous de l'autre..

probablement le problème viens de mon css non? (j'avais déjà copié mon CSS de base.. et je ne l'ai pas modifié encore. J'ai revérifié si j'avais omis quelque chose... et j'avoue que j'ai du mal à comprendre ce qui n'irait pas...)

Merci encore! Smiley lol
Hmmm... je sais que j'ai pris du temps avant de re-répondre.. mais y aurait pas quelqu'un qui pourrait m'aider? siouplais? Smiley decu
Modifié par Roxy (24 Mar 2005 - 15:06)
Pages :
Sujet clos
Aller à