18041 sujets

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

Gobal n'apparaît pas...

Salut...

je suis en train de développer des tests, touts simples, mais il y a un détail qui m'échappe... Ma page est ok, à l'affichage, sauf que j'aimerais en fait voir la couleur de fond de mon 
<div id = global></div>
... Mis à part ce détail tout fonctionne... J'ai déjà rencontré ce stress, mais cela me pose encore problème... Mon Div global n'est pas reconnu, et pourtant, mes éléments dedans se postionnent comme il faut...

En image....
upload/14508-site3.gif

Voici le XHTML
 <div id = head></div>
  <div id = global>
   <div id = gauche> <span class="titre">Patron de cabar&ecirc;t pour 2008</span> <br /> 
    				 <span class="bout">*</span>
					 <span class="mini"> Le 12 novembre 07</span> 
					 <h2>As a way of saying thanks to all my readers I've created a Christmas desktop of with <a href="bOo.htm">my favorite </a>														 									friend Geeky Dog as central theme.</h2>
 								   <p class="Style1">&nbsp;</p>
 								   <span class="titre">Michel Jonas en folie</span>	 <span class="mini"> Le 12 novembre 07</span> 
									<h2>As a way of saying thanks to all my readers I've created a Christmas desktop of with 
									    <a href="bOo.htm">my favorite </a>friend Geeky Dog as central theme.</h2>
										<p class="Style1">&nbsp;</p>
  								  
     <div id=ptigauche>  <h3>Links</h3>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt; Mon pote Mak's</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  Rackam le rouge</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  Les rares beautés</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt; Made in strator</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  NTM</h2>
     </div>
     <div id=ptidroit>		<h3>Open source </h3>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt; Mon pote Mak's</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  Rackam le rouge</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  Les rares beautés</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt; Made in strator</h2>
						<h2 class="Style2"><a href="bOo.htm">&gt;&gt;</a>&gt;  NTM</h2>
		</div>
       </div>
     <div id=droit><p class="titre">La précision</p>  
    				<h4><ul><li>d'une valeur indique le nombre de chiffres utilisés pour exprimer cette valeur. Dans les sciences dites pures, 
				c'est le nombre ...</li><br /> 	
					
					</li><li>Qualité d'une opération, ou d'une mesure conduisant à un résultat précis, c'est-à-dire voisin de l'exactitude. Elle exprime le degré   	    					d'erreur du résultat d'une mesure. Elle doit être distinguée de « l'exactitude » qui se rapporte à la qualité du résultat. </li>
    				</ul>
    				</h4>
             </div>
            </div>


Et le css
body {
	background-color: #222D2D;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	
}
#global {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	width: 800px;
	background-color: #FFFFFF;
	padding: 0px;
	}

#head {
	background-image: url(aheadd.gif);
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	height: 250px;
	width: 800px;
	}

#gauche {
	vertical-align: top;
	float: left;
	width: 500px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	
}

#droit {
	vertical-align: top;
	float: right;
	width: 200px;
	background-color: #80C4DC;
	padding: 0px;
	background-image: url(0bout.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#dansdroit {
	vertical-align: top;
	float: right;
	width: 232px;
	background-color: #566E6E;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-top: 20px;
	background-image: url(bgx.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#ptigauche {
	vertical-align: top;
	float: left;
	width: 200px;
	background-color: #3E4F4F;
	padding: 0px 10px 10px;
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #ACDAEF;
	background-image: url(00bg.gif);
	background-position: right bottom;
	background-repeat: no-repeat;
	
}
#ptidroit {
	
	vertical-align: top;
	float: right;
	width: 200px;
	background-color: #3E4F4F;
	padding: 0px 10px 10px;
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #ACDAEF;
	background-image: url(00bg.gif);
	background-position: right bottom;
	background-repeat: no-repeat;
	
}
.titre {
	letter-spacing:1px;
	font: lighter normal 24px/27px "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ACDAEF;
	padding-left: 0px;
}
.mini {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: lighter;
	color: #FAECDD;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FAECDD;
}

.bout {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCFF00;
	text-align: left;

}
h2 {
	font-size: 12px;
	color: #ACDAEF;
	letter-spacing: 1px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: lighter;
	line-height: 15px;
}
h4 {
	font-size: 12px;
	color: #FFFFFF;
	letter-spacing: 1px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: lighter;
	line-height: 15px;
}

a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCFF00;
}
a:visited {
	color: #CCFF00;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.Style1 {
	font-size: 16px;
	
	border-top: 1px dotted #A7D20E;
}

h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: lighter;
	color: #A7D20E;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A7D20E;
	line-height: 28px;
	margin: 0px;
	padding: 0px;
	border-right-width: 5px;

}
Bonjour,

Ne serait-ce pas un très classique problème de dépassement des flottants?
(Un petit overflow: hidden sur div#global pour vérifier cette hypothèse...)
Salut,

euh... il y a une raison particulière pour que tu ne mettes pas le nom de tes id entre guillemets comme tu le fait pour tes class Smiley langue ?
#global {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	width: 800px;
	background-color: #FFFFFF;
	padding: 0px;
	overflow: hidden;
	}


Helouppe F.V: Merci de ta proposition, mais cela n'a rien changé à l'histoire,... je cherche encore l'erreur...

Heyoan, non il n'y a pas de raison particulière.. J'ai fait qulques Posts ici, et cela n'a jamais posé de stress... Sans guillemets, je risque quoi ?
FranZz a écrit :
Heyoan, non il n'y a pas de raison particulière.. J'ai fait qulques Posts ici, et cela n'a jamais posé de stress... Sans guillemets, je risque quoi ?

Si ton DOCTYPE est de type XHTML ta page sera invalide :
a écrit :
XHTML...
les guillemets sont obligatoires autour de toutes les valeurs d’attributs.

A+ Smiley cligne
FranZz a écrit :
Merci de ta proposition, mais cela n'a rien changé à l'histoire,... je cherche encore l'erreur...

Vu ton code, pourtant, ça devrait. Ton élément conteneur ne s'étend pas pour englober sont contenu, et ce contenu:
- n'est pas positionné en absolu;
- est flottant.
De plus tu n'as ni overflow, ni clear:both pour lutter contre le dépassement des flottants.

Ou alors c'est un problème de structure du code HTML (même si à vue de nez ça a l'air correct). Donc, deux questions:

1. Bien entendu, ton code HTML est valide (aucune erreur retournée par le validateur du W3C)?
2. On peut voir la page en ligne?
Merci pour les possibilités.

En fait, je vais refaire ma page de A à Z.

( cette page foctionnait bien, c'est que je lui ai ajouté et puis retiré du code, alors, en trifouillant, j'ai du faire une fausse manip )

Si je rencontre encore ce stress, je repassserai par ici..

Merci en tout cas du support. Smiley biggol Smiley biggol
Sujet clos
Aller à