Une div qui ne s'affiche pas [résolu]

Question

tepe.

2 Oct 2007 à 19:10

Bonjour à tous

Je débute en CSS et, bien sûr, je rencontre un problème que je ne suis pas arrivé a résoudre seul, alors je fait appelle a vous.

Voici le code de ma page

<!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>Document sans nom</title>
<link href="/eusebe.css" rel="stylesheet" type="text/css" media="all" />
</head>
<style type="text/css" title="mes_styles" media="all">
body 
		{
		background-color: #EEE;
		color: #666666;
		margin-top: 0px;
		font-family: Verdana, Geneva, Arial, sans-serif;
		font-size:small;
		}

#page
		{
		text-align: left;
		background-image:url(/images/gris.png);
		background-repeat:repeat-y;
		visibility: visible;
		margin-top: 0px;
		margin-right: auto;
		margin-left: auto;
		position: relative;
		width: 800px;
		height:auto;
		}
#gauche 
		{
		background-image:url(/images/gris.png);
		background-repeat:repeat-y;
		position:relative;
		float:left;
		width:105px;
		background-color:#CCC;
		visibility: visible;
		}
#milieu 
		{
		position:relative;
		float:left;
		background-color: #FFF;
		text-align: left;
		width:694px;
		}
.colgauche 
		{
		width:300px;
		float:left;
		height:inline;
		margin-left:30px;
		}
.coldroite 
		{
		width:300px;
		float:left; 
		height:inline; 
		margin-left:20px; 
		}
.1colonne
		{
		width:620px;
		float:left; 
		padding:10px; 
		height:250px;
		}
a:link
		{
		color:#FFFFFF; 
		text-decoration:none; 
		background-color:transparent
		}
a:visited
		{
		color:#990033;
		text-decoration:none;
		background-color:transparent
		}
a:hover
		{
		color:#999999;
		text-decoration:underline; 
		background-color:transparent
		}
a:active
		{
		color:#990033;
		text-decoration:none; 
		background-color:transparent
		}
.texte
		{
		font-size: small;
		}

h1		{
		margin-left:35px;
		margin-right:25px;
		color:#993333;
		font-size:2.2em;
		font-weight:bold;
		}
.gtitrerouge {
		font-size: 1.8em;
		color: #933;
		font-weight: 900;
		}

h2 
		{
		margin-left:35px;
		margin-right:25px;
		color:#666666;
		font-size:1.8em;
	}

h3 
		{
		margin-left:35px;
		margin-right:25px;
		color:#666666;
		font-size:1.6em;
		}
h4 
		{
		margin-left:35px;
		margin-right:25px;
		font-size:1.4em;
		color:#933;
		}
h5 
		{
		margin-left:35px;
		margin-right:25px;
		font-size:1.2em;
		color:#666666;
		}
h6 
		{
		margin-left:35px;
		margin-right:25px;
		font-size:1em;
		color:#666666;
		}

p 
		{
		font-size:0.9em;
		margin-left:35px;
		margin-right:25px;
		color:#666666;
		}



.titre {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color:#666;
		font-size: 1.2em;
		color: #FFFFFF;
		padding-top: 1px;
		padding-right: 2px;
		text-align: center;
		padding-bottom: 1px;
		margin-right: 41px;
		margin-left: 30px;
		}
.compagnie {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color:#ccc;
		font-size: 1em;
		color: #930;
		line-height: 1.2em;
		margin: 0px;
		vertical-align: middle;
		padding-top: 1px;
		padding-bottom: 1px;
		padding-left: 5px;
		text-transform: uppercase;
		width: 290px;
		font-weight: bold;
		letter-spacing: 2px;
		padding-right: 2%;
		}
.ptexte 
		{
		}
.soustitre {
		font-size: 1.4em;
		color: #333333;
		line-height: 1.1em;
		}
.img {
		margin: 0px;
		padding-bottom: 1px;
		padding-left: 0px;
		width: 160px;
		padding-right: 2%;
		}
.gtitrerougeaccueil {
		text-align:center;
		font-size: 1.7em;
		color: #933;
		font-weight: 900;
		}
</style>
<body>

<div id="page">

<div id="gauche"><img src="/images/arbre.png" />
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
        
<div id="milieu">  
  <p class="gtitrerouge">Rien ne remplacera jamais la musique vivante  </p>
  <p class="soustitre">Avec des artistes locaux, des têtes d’affiches, des spectacles internationnaux… Au fil des années nous avons acquis un savoir faire que nous vous proposons de partager.  </p>
  <a name="_ancre"></a> <p class="titre">LES BELLES HISTOIRES  </p>
  <div class="colgauche" id="colgauche">
  	<p class="compagnie">CIE MOTS ET MERVEILLES  </p>
  	<p class="img"><img src="images/orchestrehaut.jpg" alt="CIE MOTS ET MERVEILLES" width="302" height="188" /></p>
  	Une ballade onirique d’un jardinier au coeur de la forêt des lumières. Un conte magique qui fait appel à une participation active des enfants.
  	<p class="texte">&nbsp;</p>
  </div>

  <div class="coldroite" id="coldroite">
  	<p class="compagnie">CIE MOTS ET MERVEILLES  </p>
  	<p class="img"><img src="images/orchestrehaut.jpg" alt="01" width="302" height="188" /></p>
  	Une ballade oniriqued’un jardinier au coeur de la forêt des lumières. Un conte magique qui fait appel à une participation active des enfants.
  	<p class="texte">&nbsp;</p>
  </div>
  <div class="colgauche" id="colgauche">
  	<p class="compagnie">CIE MOTS ET MERVEILLES  </p>
  	<p class="img"><img src="images/orchestrehaut.jpg" alt="01" width="302" height="188" /></p>
  	Une ballade oniriqued’un jardinier au coeur de la forêt des lumières. Un conte magique qui fait appel à une participation active des enfants.
  	<p class="texte">&nbsp;</p>
  </div>

  <div class="coldroite" id="coldroite">
  	<p class="compagnie">CIE MOTS ET MERVEILLES  </p>
  	<p class="img"><img src="images/orchestrehaut.jpg" alt="01" width="302" height="188" /></p>
  	Une ballade oniriqued’un jardinier au coeur de la forêt des lumières. Un conte magique qui fait appel à une participation active des enfants.
  	<p class="texte">&nbsp;</p>
  </div>
  </div>
</div>
</body>
</html

Le probléme c'est que la div #gauche et son contenu ne s'affiche pas, et je ne comprend pas pourquoi.

Autre chose, je voudrais que cette div ajuste sa taille sur toute la hauteur de la page, le

background-image:url(/images/gris.png);et background-repeat:repeat-y

; ne fonctionne pas.

Je suis au désespoir Smiley decu

et je crois que je vais laisser tomber le CSS et revenir aux tableaux.

Je débute sur votre forum et je vous demande de l'indulgence si ce post n'ai pas tout a fait parfait, promis je vais faire attention a vos suggestions.

J'espère que l'un de vous pourra me venir en aide.

Merci d'avanc
Modifié par tepe. (08 Oct 2007 - 19:02)

Julien Royer

2 Oct 2007 à 19:11

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Une div qui ne s'affiche pas [résolu]