18041 sujets

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

Problème sur tuto Design XHTML/CSS complet avec 2 colonnes de même hau

Bonjour,
Je suis un peu newbee en développement de site web.
Bref, j'ai fait le tuto et tout baigne, il est très bien détaillé et clair.
Mais je n'obtiens hélas pas le même résultat final (sous IE).
Dans mon cas, ce code :

#center {
	overflow: visible;
	height: 1%;
	}

me raccourcit le bloc Center et place un ascenceur supplémentaire le long. Si j'augmente la hauteur (par ex 100%), là je retrouve bien tout mon bloc et son contenu, mais j'ai toujours l'ascenceur qui se déploie sur la droite comme si j'utilisais des frames.
Ma page n'est pas en ligne et le site est assez complexe, mais s'il le faut, je vous enverrai le tout.
Merci à tous de vos réponses.

KP
Modifié par KasP (19 Oct 2007 - 18:44)
Salut KasP,

Pourrais-tu éditer ton message pour formatter ton code correctement ? (avec les balises [ code] et [ /code] sans les espaces).

Tu parles bien de la version 6 d'IE ? Et tu travailles bien en mode de respect des standards ?

En ce qui concerne ton problème, tu dois avoir un problème de sélecteurs CSS. En effet, si la propriété "overflow" est bien sur "visible", la propriété "height" ne peut pas raccourcir le bloc Smiley eek
Thomas D. a écrit :

Tu parles bien de la version 6 d'IE ? Et tu travailles bien en mode de respect des standards ?

Oui pour IE et W3C (enfin j'essaie)
Thomas D. a écrit :

En ce qui concerne ton problème, tu dois avoir un problème de sélecteurs CSS. En effet, si la propriété "overflow" est bien sur "visible", la propriété "height" ne peut pas raccourcir le bloc Smiley eek


Bon, je vais etre un peu lourd, mais voilà mon code pour tester, j'ai surement fait un truc qu'il ne faut pas mais ...
HTML

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href='essai_styles.css' />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="essai_ie.css" media="screen" />
<![endif]-->

<title>Faire un test</title>

</head>
<body>
<!--Pleine page-->
<div id="bigbox">
<!--Partie Haute-->
<div id="hautbox">
	<div id="haut_logo">
		<a href=# title=" Le TesTeur - Index "><span>Le Testeur</span></a>
	</div>
</div>
<!-- Partie Centrale-->
<div id="centrebox">
	<!--Menu Gauche-->
	<div id="gauche">		
		<div id="lateral_corps">
			<h1 class="texte_lateral">Bienvenu sur le site du TesTeur </h1>
		</div>		
	</div>
	<!--Contenu-->
	<div id="centre">
		<div id="cadre_info"> 
			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>
			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>

			<div id="info"> 
			<h1> Le TesTeur ? Qu'est ce que c'est ? cé un truc de plus pour nous embobiner et nous faire rigoler</h1>
			<p>testons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv ilughlgv ilf ygf ygouiqf ygkbf</p>
			<p>REtestons sle kuygv uygf yyc uigyiuyc uykg sdqq viuuhcv ciuhefv ighvobv</p>
			</div>


		</div>
	</div>
    <!--Menu Droite-->
	<div id="droite">
		<div id="lateral_corps">
			<h1 class="texte_lateral">Bienvenu sur le site du TesTeur qui teste </h1>
		</div>
	</div>
</div>
<!-- Partie Basse -->
<br>
<div id="footer">
	<p>Ici un pied de page, à venir.</p>
</div>
</div>
</body>
</html>


le CSS pour Firefox

/* CSS Document */

/*----------------------------- BODY ET BOX---------------------------*/
/*body : on donne une police et une taille de police à tout le document
sans marge ni retrait*/
html, body {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color:#ededec;
background-color:#faf7f2;
font-size:12px;
font-weight:700;
height: 100%;
margin: 0;
padding: 0 10px;
background:url(../img/fondbigbox.gif) center repeat-y;
}
div#bigbox {
min-height: 100%;
width:950px;
padding: 0 5px;
margin: 0 auto;
position: relative;
background:url(../img/fond_corps.gif) center repeat-y;
}
div#centrebox {
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: auto;
}
div#footer {
	position: absolute;
	width: 99%;
	bottom: 0;
	background-color:#070450;
	color:#FF9900;
	}
/*---------------------------- LATERAUX -------------------------------*/
div#gauche {
float:left;
width: 170px;
padding-top:20px;
padding-left:5px;
}

div#lateral_corps {
display:block;
width: 162px;
padding: 5 0 5 0;	
border-top-width:5px ; 
border-top-color:#fca703; 
border-top-style:ridge ; 
border-bottom-width:5px ; 
border-bottom-color:#fca703; 
border-bottom-style:ridge ; 
background-image:url(../img/menu_lateral_corps.gif);
}
div#droite {
float:left;
width: 170px;
padding-top:20px;
padding-left:5px;
}
/*---texte bannières latérales---*/
/* titre h1 des bannières latérales*/
#lateral_corps h1.texte_lateral {
margin:5px 10px 5px 10px;
font-size:1em;
line-height:12px;
font-weight:700;
color:#7f7d7a;
}
/*----------------------------- CENTRE --------------------------------*/
div#centre {
padding-top:20px;
width: 580px;
float:left;
}
div#cadre_info {
display:block;
padding:5px 10px 10px 20px;
/* cadre */
background-color:#dad9d7;
border-top-width:5px ; 	
border-top-color:#06205a ;
border-top-style:solid ;
border-bottom-width:5px ; 	
border-bottom-color:#06205a ;
border-bottom-style:solid ;
border-left-width:1px ; 	
border-left-color:#fca703 ;
border-left-style:solid ;
border-right-width:1px ; 	
border-right-color:#fca703 ;
border-right-style:solid ;	 
}
div#info {
display:block;
margin:0px 0px 0px 0px;
}

/*----------------------------- HAUT ----------------------------------*/
div#hautbox {
height: 114px;
width:950px;
background-image:url(../img/fond_haut.gif);
background-repeat:repeat-x;
background-color:#000099;
}
/*---------LOGO---------*/
div#haut_logo {
height: 114px;
width: 288px;	
float:left;
background-image:url(../img/Logo.gif);
background-repeat:no-repeat;
background-position:left;
}
div#haut_logo a{
text-indent:-5000px;
display:block;
height: 114px;
width: 288px;	
float:left;
background-image:url(../img/Logo.gif);
}


et enfin celui pour IE.

/* CSS Document */
html, body {
position: relative;
}
#bigbox {
height: 100%;
}
	
#centrebox {
overflow:visible;
height:1%;
}
div#footer {
width: 100%;
}


Désolé d'etre aussi long pour ce qui doit etre une erreur de debutant, mais vu ta signature et celle du tuto, je dois etre avec la bonne personne. Smiley smile
C'est bien un problème de sélecteurs CSS comme le suggérait Julien.

Le sélecteur dans la feuille de style principale est div#centrebox. Ce sélecteur a une priorité de 0101.
Le sélecteur dans la feuille de style de correctifs CSS pour IE6 et inférieurs est #centrebox. Ce sélecteur a une priorité de 0100, soit une priorité inférieure au sélecteur qui le précède et qui vise le même élément.

En conséquence, les déclarations (propriétés et valeurs associées) faites avec le second sélecteur ne peuvent pas écraser celles faites avec le premier sélecteur.

Les styles appliqués pour IE6 et inférieurs seront les suivants:
padding-bottom: 50px; /* priorité 0101 */
overflow: auto; /* priorité 0101 */
height: 1%; /* priorité 0100 */
/* overflow: visible; -- ignoré car rattaché à un sélecteur de priorité 0100 */


Solution: changer le sélecteur dans la feuille de correctifs CSS pour IE, de #centrebox à div#centrebox.

Un peu de lecture:
http://openweb.eu.org/articles/cascade_css/
Merci Florent,
Une erreur d'étourderie, de débutant, de ... Bref merci de ta patience.
Effectivement, maintenant ça marche et j'ai appris plus de trucs sur cette histoire de priorité dont je ne m'occupais pas avant.
J'avais plus ou moins solutionné le problème en allant fouiller sur Alsacréation avec un bête spacer contenant un clear both que j'appelais juste avant mon pied de page via une div. Et ça marchait aussi, je pense que l'effet réel ne doit pas être le même, mais je ne sais pas en quoi vraiment. En tout cas à l'affichage IE ça marchait.
En tout cas sur cette méthode précise il y a une différence pour moi : grâce à ta réponse je comprend pourquoi ça ne marchait pas.
Merci
Florent V. a écrit :
C'est bien un problème de sélecteurs CSS comme le suggérait Julien.
Gniark, depuis quand ma tasse de café a-t-elle une tête de canard ? Smiley lol
Modifié par Florent V. (20 Oct 2007 - 16:36)
Thomas D. a écrit :
Gniark, depuis quand ma tasse de café a-t-elle une tête de canard ? Smiley lol

Argh, j'ai encore confondu. Smiley biggol
Sujet clos
Aller à