Souci sur le Tuto "Inclure un fichier dans un autre, grâce à CSS.

Question

Bobybx

30 May 2005 à 01:33

Bonjour (enfin bonsoir ou bonne nuit vue l'heure),
j'ai un petit souci avec votre tutoriel Inclure un fichier dans un autre, grâce à CSS et PHP pour l'appliquer à ma façon, je m'explique:

Je veux mettre une partie haute FIXE, gauche FIXE et une frame scrollable sur ma page.
Pour cela, j'ai sorti la partie .bas du code du tuto et modifier le css pour que les "height" de ".gauche" et ".frame" soient en "auto" de manière à ce qu'ils descendent jusqu'en bas du navigateur et qu'ils se redimensionnent automatiquement si on modifie la taille du navigateur (ex: passer de 1024*768 à 800*600)

Mais il s'avère que cette solution ne marche pas, ma page bug et on n'a pas accès à tout le texte de la page , surtout avec IE (cf ma page)
Hors si je mets des valeurs en pixels aux paramètre "height" de ".gauche" et ".frame", le menu et la frame ne descendent pas assez ou descendent trop selon la valeur.

Comment faire pour que ça marche ? Smiley bawling

Merci de votre aide.

Ps: je débute CSS d'où ma question peut-être simple à vos yeux... Smiley confused

<html>
<head>
<style type="text/css">
<!--
body {margin: 0; padding:0;position: absolute;width: 100%;height: 100%;
font-family: verdana, arial, sans-serif;overflow: hidden;}

.haut {width: auto;height: 184px;background-color: #ffff00;
color: #fff;font-size: 36px;padding: 10px;}

.gauche {position: absolute;left: 0;width: 195px;height: auto;
background-color: #ffff00;}

.frame {margin-left: 195px;width: auto;height: auto;overflow: auto;font-size: 14px;
background-color: #ffffff;}
-->

</style>
</head>

<body>
<div class="haut">
  <? $filename = "./bandeau_h.inc";
  if (file_exists($filename)) include($filename);
?>
  <? $filename = "adminews/news-conf.php3";
  if (file_exists($filename)) require($filename);
?>
</div>
<div class="gauche"> 
  <? $filename = "./bandeau_g.inc";
  if (file_exists($filename)) include($filename);
?>
</div>
<div class="frame"> 
  <h1>une présentation sans Frames !</h1>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  ... </div>
</body>
</html>

Avant qu'on me tape sur les doigts me disant ptêt que j'ai pas fouillé le forum, j'ai cherché et notamment remarqué que sur la page Modèles de mise en page en CSS il n'y avait pas le cas que je cherche: header fixe, menu de largeur fixe, et une partie avec du contenu occupant le reste de la largeur et une hauteur variable selon la quantité de contenu (scrollable ou non).
J'ai beson d'aide Smiley confused

Modifié par Bobybx (30 May 2005 - 02:10)

Christian Le Bouler

30 May 2005 à 08:28

Il y a un topo la dessus dans le blog d'alsa.

Le point sur la fonction include

Bobybx

30 May 2005 à 10:22

J'ai lu ce que tu m'as proposé et qui concerne les redondances des balises à cause des include, j'avais en effet un body 2fois Smiley confused

Source modifié mais toujours le même souci Smiley confused

La partie centrale de ma page n'a toujours pas sa barre scroll alors que le texte n'est pas affiché en entier (on ne voit pas les "...")

Une erreur dans le style CSS sûrement, mais où ? Smiley bawling

Bobybx

30 May 2005 à 12:07

J'ai fait un mix du modèle 13 et du 14 de vos Modèles de mise en page en CSS afin que vous cerniez peut-être mieux mon souci et pour voir si ça marchait, j'obtiens:

cette page test dont le contenu ne s'affiche pas...
J'ai le header et le menu fixe comme je le souaite mais plus rien en contenu alors que la source elle n'est pas vide (clic droit+"afficher la source" sur la page test)

Il est où le bug ? Smiley confused

roms

30 May 2005 à 15:28

Je t'ai répondu par IRC Smiley biggrin

Mais pour que tout le monde en profite voici le code de ta dernière page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Deux zones avec scroll en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#contenu {
height: 80%;
margin: 0px;
margin-left: 200px;
padding: 0px;
overflow: auto;
background-color:#9999CC;
}
#header {
background-color: #99CCCC;
width: 100%;
height: 20%;
}
#menu {
position: absolute;
/*float:left;*/
left:0;
background-color: #99CCCC;
width: 200px;
height: 80%;
}
</style>
</head>

<body>

<div id="header">ici le Header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div id="menu">ici le Menu<br /> <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>


</div>

<div id="contenu">
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
</div>

</body>
</html>

En fait il y a vait un soucis dans le style de #contenu :


#contenu {
height: 80%;
margin-left: 200px;
margin: 0px;
padding: 0px;
overflow: auto;
background-color:#9999CC;
}

si tu regardes bien, il y a 2 fois margin :
dans le 1er cas (margin-left: 200px;) tu mets une valeur de 200 dans la marge de gauche : OK
dans le 2nd cas (margin: 0px;) tu mets une marge de 0 partout : PAS BON
du coup le 2nd cas remplace le 1er ...

donc tu dois avoir qq chose du style :


#contenu {
height: 80%;
margin: 0px;
margin-left: 200px;
padding: 0px;
overflow: auto;
background-color:#9999CC;
}

Modifié par roms (30 May 2005 - 15:56)

Bobybx

30 May 2005 à 16:01

Merci, c'est niquel !!!!

Il faudrai mettre ce modèle avec les autres modèles mrs les admins, ce serait cool pour les suivants (avec une ptite dédicace à roms Smiley biggrin

)

Merci !!!!!!!!!!!!!!!!!!!!!!!!!!

Sujet clos

CSS et mise en forme, CSS3

Souci sur le Tuto "Inclure un fichier dans un autre, grâce à CSS.