18041 sujets

Questions générales et questions de débutants

[Résolu]Pb d'affichage d'une page étirable

Bonjour,

J'ai voulu faire une page étirable en fonction du texte plus ou moins long que je vais y mettre.Je l'ai donc découpé en trois partie... Une partie haute (centre1), la partie du milieu qui contiendra le texte (centre2), et la partie basse (centre3).
Lorsque qu'il n'y a aucun texte, tout ce passe bien et la page s'affiche normalement (en réduit vu qu'il n'y a pas de texte).
Quand j'insère une phrase ou des espaces, la page se scinde en 3 parties laissant apparaître une bande noire entre chacune des parties ???!!!
J'aimerais que la page s'affiche en entier sans ces bandes noires !!!
Voici comment se fait l'affichage


http://xs435.xs.to/xs435/09052/screenshot002128.jpg


Quelqu'un pourrait-il m'aider ? Merci d'avance....
Je joins le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La galerie de Pascal</title>
<style type="text/css">
<!--
-->
</style>
<link href="Styles/style_index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">  

  <div id="en_tete"></div>

  <div id="menu">
  	<ul id="navigation">
	  <li><a href="index.html">Acceuil</a></li>
	  <li><a href="photo.html">Photos</a></li>
	  <li><a href="video.html">Vidéos</a></li>
	  <li><a href="agenda.html">Agenda</a></li>
  	  <li><a href="A propos.html">A propos</a></li>
	  <li><a href="plus.html">&rang;  &rang;  &rang;  &rang;</a></li>
    </ul>
  </div>
  

  <div id="centre1"></div>
  <div id="centre2">
    <p>&nbsp;</p>
    <p>Bonjour comment ca va</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="centre3"></div>

  <div id="pied_de_page"></div>
    
</div>
    

</body>

</html>



et le CSS :



@charset "utf-8";
/* CSS Document */


body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-image: url(../images/fond_body.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}

#page
{
	margin-left:auto;
	margin-right:auto;
	width:760px;
	padding-top:20px;
	background-image: url(../images/page-ligne.gif);
	background-repeat: repeat-y;
}
	
#en_tete {
	width:720px;
	height:150px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/entete.gif);
	}

#menu {
	
	width:720px;
	height:60px;
	
	margin-right: auto;
	margin-left: auto;
}


#centre1 {
	width:720px;
	height:50px;
	margin-right: auto;
	margin-left: auto;
	margin-top:20px;
	background-image: url(../images/centre1.gif);
	background-color: #FFF;	
}

#centre2 {
	width:720px;
	
	margin-right: auto;
	margin-left: auto;
	margin-top:0px;
	background-image: url(../images/centre2.gif);
	background-color: #FFF;
	background-repeat: repeat-y;
}

#centre3 {
	width:720px;
	height:50px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/centre3.gif);
	background-color: #FFF;
	margin-bottom:20px;
}

#pied_de_page {
	width:720px;
	height:50px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/pied-page.gif);
}

#navigation li {
	float:left;
	width: 120px;/*défini la largeur des cases du menu*/
	color:#0F3;
	text-align:center;



}
#navigation {
	list-style: none ;
	margin: 0 ;
	padding: 0 ;


}
#navigation li a{
	display: block;
	height:60px;
	line-height:60px;/*pour aligner le texte verticalement dans la barre menu*/
	text-decoration: none;
	font-size: 1.2em;
	color: #333;
	font-weight: bolder;
	background-image: url(../images/bouton2.gif);
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	font-size: 1.2em;
	color: #BCB586;
	font-weight: bolder;
	background-image: url(../images/bouton2hover.gif);
	}

Modifié par baup67 (27 Jan 2009 - 22:41)
Salut,

Perso, je pencherais pour les p qui doivent encore avoir leurs marges par défaut, ce qui pousserait les éléments du dessus et du dessous.
As-tu essayé de faire un "white-space reset" pour vérifier ?
Salut baup67,

je pense qu'un petit overflow:auto; dans ton objet #center2 devrait résoudre ton problème, mais j'ai pas testé (mais j'ai déjà eu un truc du genre)

donc 


#centre2 {
       overflow:auto; /* ou hidden si tu préfère [smile] */
	width:720px;
	margin-right: auto;
	margin-left: auto;
	margin-top:0px;
	background-image: url(../images/centre2.gif);
	background-color: #FFF;
	background-repeat: repeat-y;
}


@+
Re,


Merci Mikerob, tu as trouvé la solution.... ça marche.... je ne suis pas encore très habitué à ce langage HTML.... je ne fais que débuter.

Mais voilà, j'ai encore un autre petit pb....Comme on le voit sur l'image mon texte est pris dans le cadre de l'image et j'aimerais l'aligner plus à droite de manière à ce qu'il soit bien visible.... En utilisant un padding-left, tout le bloc<div> se décale vers la gauche.... sans-doute parce que j'ai centré les blocs du centre avec margin et padding auto. Le padding-left doit alors s'appuyer sur le cadre parent à savoir le bloc DIV "page".
Comment peut-on y remédier, ou que faire pour qu'une marge à gauche soit respectée (environ 40 à 50 px)?
Peut-on aussi changer l'interlignage afin qu'il soit plus petit ?

Merci d'avance pour vos réponses
Modifié par baup67 (27 Jan 2009 - 13:10)
Re,

Alors à froid je dirais que tu peux mettre un div dans ton div center et que c'est sur celui là que tu va jouer avec les margin/padding.
Pour l'interlign si tu code proprement (donc avec des <p>) tu peux les déclarer en css et aussi indiquer le margin/padding. et si tu met des <br/> (bouh pas bien Smiley smile ) ben pareil.. joue avec les margin/padding de la balise <br/>
re,

Effectivement, je n'y avais pas pensé... ça a marché....
Alors mille merci pour ton aide...
@ bientôt pour une prochaine question
Sujet clos
Aller à