28173 sujets

CSS et mise en forme, CSS3

Salut,

Voilà, c'est la 2 eme fois que je rencontre ce stress, et je ne parviens pas à le solutionner...

Je construis ma page, tout est ok, sauf que la couleur de fond de mon global n'apparaît pas, on dirait qu'il n'est pas pris en compte...

**// Mes éléments dans ce global sont correctements positionnés, il n'y a que la couleur de fond qui n'apparaît pas......
**// Dans DMX, en mode création, je ne vois pas ce global non plus, sauf quand je lui attribue une hauteur fixe...

J'ai testé plusieurs éléments, en les supprimant, mais cela ne change rien...

Soit, en visu c'est mieuxici

En théorie, le global placé en dessous du Head et englobant mes éléments devrait être blanc...

Css
/* CSS Document */

body {
	background-color: #454545;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#head{
	background-image: url(head.gif);
	background-repeat: no-repeat;
	background-position: center;
	height: 280px;
	}
#global{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
      overflow:auto;
	
}
#gauche{
	width: 194px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	color: #7E8A24;
	padding-right: 0px;
	padding-left: 0px;
	text-decoration: none;
	float: left;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 70px;
}
#milieu{
	width: 156px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	color: #7E8A24;
	padding-right: 0px;
	padding-left: 0px;
	text-decoration: none;
	float: left;
	padding-top: 15px;
}
#droit{
	width: 430px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	color: #7E8A24;
	padding-right: 0px;
	padding-left: 0px;
	text-decoration: none;
	float: right;
	background-color: #999999;
	margin-top: 70px;
	height: 400px;
}

h1 {
	background-image: url(bgtitre.gif);
	background-repeat: no-repeat;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 15px;
	padding-top: 4px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	height: 30px;
}
h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	color: #919A2A;
	margin-right: 20px;
	margin-left: 20px;
	padding: 0px;
	margin-top: 0px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}


et XHTML

<body>
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><div id="head"></div></a>
  <div id="global">
   <div id="gauche">
		<h1>Sanction </h1>
		<h2>Voilà l'illustration typique pour du texte de substitution sensé donné un rendu, juste un rendu</h2>
		<h1>pourquoi pas</h1>
		<h2>Voilà l'illustration typique pour du texte de substitution sensé donné un rendu, juste un rendu</h2>
		<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><h1>Link 1</h1></a>
		<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><h1>Link 2</h1></a><h1></h1><h1></h1><h1></h1>
</div>
<div id="milieu"><img src="menu.gif" /></div>
<div id="droit">ssssssssssssssssssssssssss</div>
</div>
</body>


Mais ou est cette faute..?
Smiley biggol Smiley biggol Smiley biggol Smiley biggol
Modifié par FranZz (11 Jan 2008 - 12:28)
Tous les enfants de ta division globale sont extraits du flux, elle se retrouve donc vide de tout contenu. Créer un contexte de formatage (overflow:auto) sur ce div permettra de prendre en compte les enfants flottants.
Salut,

le overflow:auto; sur le global ,j'avais testé une fois sans résultat...

Là, je viens de le remplacer sur cette page en local, mais pas de changement en fait... Smiley biggol

Je vais d'ailleurs editer le post du dessus avec cette modif...

Pas le top...
Modifié par FranZz (11 Jan 2008 - 11:04)
Tu dois vraiment faire un truc de travers, car un overflow: auto ou un overflow: hidden sur div#global marchent très bien. (Modification faite en direct avec Firebug.)
Voilà, le hidden fonctionne, c'est nickel...

Je m'en vais lire plein de Doc sur ce Hidden,... Une recherche sur ce forum, ou un article...

Merci hein FV & BDC

Big Up_____________ Smiley biggol Smiley biggol Smiley biggol
FranZz a écrit :
Je m'en vais lire plein de Doc sur ce Hidden,... Une recherche sur ce forum, ou un article...

Faire une recherche sur «contexte de formatage».
Autant pour moi... BDC.

En fait, à l'affichage de DMX, mon div Global n'apparait tjs pas;

Mais quand je teste dans le navig, là c'est ok, autant pour hidden que pour le auto ! Smiley murf Smiley murf
FranZz a écrit :
à l'affichage de DMX…

Habitude à perdre. Toujours favoriser le rendu d'un navigateur compilant, tel qu'Opera pour ne citer que lui.