28220 sujets

CSS et mise en forme, CSS3

La balise html.... la cause d'une diablerie

bonjour tout le monde,

Depuis quelques jours j'ai une petite tracasserie sur un site en préparation.

Mon css commence comme ceci
html, body{
	width: 100%;
	height: 100%;
	background: #000070;
	font-family: Verdana, Arial, Helcetica, sans-serif;
	font-size: 1em;
	}


et mon html n'est n'y plus n'y moins que du strict.

Mais voila. Sur FF, lorsque mon texte était trop long, mon "div.conteneur" ne s'allongeait pas et donc mon texte se retrouvait a cheval sur le conteneur et sur le fond du <body>.

Apres discussion avec Raphaël, il m'a conseillé de mettre un 
<hr class="spacer" />
avec en css 
 .spacer {clear: both;}
en fin de mon conteneur.

Rien n'y faisait.

Ce soir, tout en laissant le <hr........... />, j'ai legerement modifié mon CSS en enlevant "html" ce qui donne
 body{
	width: 100%;
	height: 100%;
	background: #000070;
	font-family: Verdana, Arial, Helcetica, sans-serif;
	font-size: 1em;
	}


Et....... miracle de Merlin Smiley cligne , tout fonctionne correctement, mon texte pousse mon conteneur. Cela a été testé sous FF, IE, Opéra et Mozilla et ça marche Smiley lol

Donc, Quelqu'un a t il une explication a cette diablerie ???

ps: pour info, sous IE ça a tjrs fonctionné meme avec le "html" dans le CSS et sans le "<hr.......... /> comme quoi IE n'est pas tjrs si mal que ça Smiley ravi

Désolé de ne pouvoir vous donner l'adresse du site pour l'instant, mais c'est pour une administration et vu qu'il y a deja des données dessus, cela doit resté un temps soit peu confidentiel.

A votre bon coeur
Modifié par Philippe (10 Oct 2005 - 22:25)
Administrateur
Bonjour,

pour précéder une probable question: quel est l'en-tête de ce document (Doctype en particulier)?
le doctype du document est
<!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">
Salut,

ça manque un peu de code pour pouvoir y réfléchir, le squelette html et le stylage du div conteneur par exemple.
Modifié par clb56 (11 Oct 2005 - 13:00)
la structure est la suivante:

<!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> </title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>
<div id="conteneur" >

	<div id="header">

	</div>


	<div id="fil" title="fil d'Ariane">
          
	</div> 

<div id="gauche">
	<div class="menu">
	 </div>
	<div class="menu">
	 </div>
	
	<div class="menu">
     </div>
       
</div>

<div id="contenu">	
        
      </div> 
	  
<hr class="spacer" />
</div>

</body>
</html>


et le css :



body{
	width: 100%;
	height: 100%;
	background: #000070;
	font-family: Verdana, Arial, Helcetica, sans-serif;
	font-size: 1em;
	}

/*Affichage de la page*/
#conteneur{
	
	width: 800px;
	margin: 0 auto ;
	background: #fff;
	height: 100%;
	}
	
.spacer {
clear: both;
}
	
/*Affichage de l'entete*/
#header{
	
	width: 100%;
	height: 126px;
	margin: 0;
	padding: 0;
	}


.logo{
	position: absolute;
	margin-left: 600px;
	clear: both;
	}
	
/*fil d'ariane*/
#fil{
	height: 20px;
	background-color: #ffff99;
	color: #000;
	border: 1px solid #479acc;
	padding-left: 10px;
	font-size:0.9em;
	}

#fil a {
	text-decoration:underline;
	
	color:#696a66;
}

#fil a:hover {
	text-decoration:none;
	color:#cc3300;
	border-bottom:2px #cc3300 solid;
}
/*menu de gauche */
#gauche {
float:left;
margin: 0;

}
.menu {

left:0;
width: 188px;
color: #000080;
background-color: 	#C8C6FA;
text-decoration: none;
font-size: 0.8em;


}

.menu ul{
margin-bottom:2px;
border: 1px solid #000080;
list-style-type: none;


}

.menu li{
padding-top: 2px;
padding-bottom:2px;

}

.menu a {
text-align: left;
	text-decoration: none;
	background-color: 	#C8C6FA;
	color: #000080;
	}
.menu a:hover {
	background-color: #ffffff;
	color: #000080;
	text-decoration: none;
	}

.chapo {
	font-family: Trebuchet MS, Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	
	font-size: 1em;
}



#contenu {
float: left;
width: 600px;
margin-top: 5px;
padding-bottom: 10px;

}

h2 {
font-size: 1.1em;
font-weight: bold;
margin-left: 15px;
color: 	#8E1010;
}

.texte-rubrique {
border: 4px solid #000080;
padding: 5px;
font-size: 0.9em;
margin-left: 15px;
margin-bottom: 15px;
}

.titre-article  { 
font-size: 1.1em;
font-weight: bold;
margin-left: 15px;
color: 	#8E1010;
}

.texte-article {
font-size: 0.8em;
border-top: 1px solid #8E1010;
border-bottom:  1px solid #8E1010;
margin-left: 15px;
margin-bottom: 15px;
padding-top: 10px;
padding-bottom: 10px;
}

.auteur-article {
text-align: right;
font-size: 0.7em;
color: #000080;
}


désolé pour la longueur du post

Merci pour vos idées Smiley smile
Sujet clos
Aller à