28173 sujets

CSS et mise en forme, CSS3

[RESOLU] CSS - selecteur attribut - j'aimerai comprendre.

Bonjour à tous,

j'ai récemment fait une découpe html qui devait posséder un min-height.
Pour IE, je me suis tourné vers un système en css et j'ai fini par trouvé une solution qui fonctionne. Le seul problème, c'est que je ne sais pas pourquoi celle-là marche et pas les autres possibilités. (le problème survient sur FF et Opera avec les trois exemples en commentaire).

J'ai retapé l'essentiel pour que vous puissiez tester vous même :


<!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="en" lang="en">
<head>
	<title></title>
	<style type="text/css">
	* {
	margin: 0px;
	padding: 0px;
	}
body #container {
	width: 980px;
	margin: 0px auto;
}
#container #mcontent {
	background: #eee none;
}
#mcontent #left {
	float: left;
	width: 218px;
	border: 1px solid #ccc;
}
#left a {
	display: block;
	width: 188px;
	padding: 10px 5px 10px 25px;
	background: transparent url(../i/tmn.jpg) no-repeat top;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
#left .smn {
	display: block;
	width: 148px;
	padding: 10px 5px 10px 65px;
	background: transparent url(../i/smn.jpg) no-repeat top left;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}
#mcontent #content {
	min-height: 275px;
	height: 275px;
	margin-left: 325px;
	padding: 75px 66px 20px 0px;
	color: #333;
	border: 1px solid #ccc;
}
/*essai concluant : */
#container div[ id ] #content { /* j'ai placé des espaces entre [ ] et id pour éviter les émoticons*/
	height: auto;
}
/*
premier essai :
#mcontent div[id="content"] {
	height: auto;
}
second essai :
#container div[ id ] #content { /* j'ai placé des espaces entre [ ] et id pour éviter les émoticons*/
	height: auto;
}
troisième essai :
#container div[id="content"] {
	height: auto;
}
*/
	</style>
</head>

<body>
	<div id="container">
		<div id="mcontent">
			<div id="left">
			left
			</div>
			<div id="content">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras viverra. Maecenas magna pede, tempus vel, tristique sit amet, congue faucibus, pede. Fusce commodo metus ac dui. Mauris ipsum. Donec nulla ipsum, nonummy sit amet, sodales in, blandit eu, turpis. Nunc tempus. Curabitur in enim. Nullam egestas. Nulla accumsan lacus ut nisl. In commodo viverra risus. Maecenas at libero. Quisque sit amet magna a elit posuere ultrices. Quisque vulputate ultricies massa. Vestibulum at pede. Suspendisse ultricies eleifend tellus. 

Praesent ullamcorper tincidunt velit. Phasellus commodo rutrum elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sollicitudin est eu risus cursus volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat tortor ultricies tellus. Quisque dictum aliquam nisl. Duis nec nunc ut ipsum mattis elementum. Curabitur vulputate purus in elit. Duis turpis ante, nonummy at, ultrices eu, vulputate a, quam. Donec velit. Aliquam erat volutpat. Ut et massa et sem bibendum viverra. Curabitur vehicula tempor neque. Nulla erat lorem, consectetuer sit amet, convallis non, aliquam a, leo. Duis eget nibh. Donec sit amet felis. Ut consequat vulputate neque. 

Maecenas turpis mauris, facilisis eget, egestas ut, tincidunt eu, mi. Nullam ac quam. Aenean id ante id nibh cursus consequat. Nullam elementum elit. Etiam sagittis. Sed suscipit, lorem quis bibendum lacinia, sapien metus fringilla sapien, quis aliquet quam mauris ut quam. Nunc vel leo eu nisi sagittis dignissim. Maecenas varius tincidunt libero. Sed ultricies ante at nunc. Vivamus laoreet vestibulum risus. Cras semper nunc et est. Suspendisse potenti. Cras ligula nulla, elementum sed, rutrum iaculis, porttitor at, tortor. Nam suscipit nunc at sem. 

In vel mauris non eros blandit ornare. Sed mauris. Duis mattis risus eget velit. Nullam mollis libero at ante. Donec felis dolor, dictum vel, tempus ut, egestas a, diam. Nullam a tortor nec tortor tincidunt scelerisque. Aliquam sollicitudin consectetuer dolor. Maecenas eros. Maecenas et metus. Pellentesque elit. Donec id ipsum. Aliquam sit amet odio. Integer vestibulum, odio eget accumsan faucibus, quam lorem vulputate nibh, at consequat elit est vitae est. Phasellus ultricies commodo enim. Mauris mollis tortor ut lorem. 

Fusce imperdiet tristique mi. Phasellus pellentesque. Donec malesuada malesuada mauris. Curabitur tempor felis at tellus. Etiam tempus, mi non vehicula ullamcorper, urna nulla dignissim nulla, eget posuere dui enim in lorem. Phasellus sed sapien. Sed scelerisque purus vitae ante sagittis lacinia. Nullam quis eros eget purus lacinia condimentum. Sed ante eros, accumsan quis, vulputate in, blandit rutrum, est. Aliquam erat volutpat. Cras at lorem eu metus sagittis porta. Aenean at urna. Etiam adipiscing. Morbi vitae felis sed dolor pretium rutrum. Ut semper ultrices ante. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. 
			</div>
		</div>
	</div>
</body>
</html>


Les codes qui ne fonctionnent pas sont en commentaire entre les balises STYLE.

Merci pour votre aide et vos réponses.
Modifié par orgied (07 Feb 2007 - 10:18)
Le code qui « fonctionne » sélectionne (avec les navigateurs qui comprennent cette syntaxe) un élément dont l'identifiant est "content", enfant ou descendant d'un élément div ayant un identifiant quelconque, lui-même enfant ou descendant de l'élément qui a pour identifiant "container".

Bon, c'est du bidouillage à la petite semaine, cette histoire. Du hack non répertorié, en quelque sorte, en utilisant les insuffisances d'IE sur l'implémentation du sélecteur d'attributs (le machin avec les crochets). Et les hacks, çéleumal.

Et pourquoi c'est mal ? Parce que c'est dangereux. Il me semble qu'IE7, par exemple, ne comprendra pas le hack, et donc appliquera le height: 275px pour div#content. Seulement voilà : depuis la version 7, IE interprète height comme les autres navigateurs. Et là, c'est la cata. Merci les hacks CSS.

Quel est le but de la manoeuvre ? Avoir une hauteur minimale de 275px pour div#content dans IE 6 ? Pas bien compliqué.

D'abord, on commence par faire quelque chose de simple et qui passera partout sans poser de problème :
div#content {
	min-height: 275px;
}


Ensuite, on corrige pour IE6 et rien que pour IE6 (et à la rigueur les versions inférieures). Et pour ça, on passe par des commentaires conditionnels.

<!--[if lte IE 6]>
	<style type="text/css">
	div#content {height: 275px;}
	</style>
<![ endif ]-->

(Note : espaces autour du endif pour des raisons déjà identifiées ci-dessus.)

C'est quand même plus propre, non ?

À propos, et pour être clair : les commentaires conditionnels ne sont pas des hacks. Leur comportement et leur prise en compte par les futures versions des navigateurs sont prévisibles, et pas incertaines comme avec les hacks. C'est donc une solution robuste, en plus d'être valide.
Sujet clos
Aller à