28172 sujets

CSS et mise en forme, CSS3

[Résolu] Min-height et div

Bonjour, alors avant que je poste ce message je voulais bien vous dire que j'ai beau chercher une solution a mon problème mais en vain, j'ai rien trouvé même sur ce forum ... donc voilà pour ne pas tarder j'ai un div que je veux qu'il soit extensible voilà un exemple:

quand le div contient une ligne il dois être a la taille de cette ligne et quand il contiendra 5 ligne il dois s'élargir pour atteindre la taille des 5 ligne mais s'il dépasse les 5 ligne, il dois rester sur la même taille des 5 lignes avec un scrollbar Smiley sweatdrop

j'ai pu le faire comme ça: 


.bloc{
	height:expression(this.scrollHeight > 200 ? "320px" : "auto"); 
	height:expression(this.scrollHeight < 320 ? "auto" : "320px");
	max-height:320px;
	overflow:auto;
       }


mais ce n'est pas Valid CSS Smiley decu

j'espère que vous pourriez m'aider Smiley ravi
Modifié par Neth (10 Jul 2008 - 11:01)
Merci Heyoan pour l'accueil : ))

alors oui j'ai bien lu la FAQ, mais malheureusement je n'ai pas pu faire ce que je veux exactement, deja le css je l'ai dans un fichier separé et quand je fais les commentaire conditioner il ne sens pas lu sur un fichier css ... et pour la methode citer dans la FAQ 

height:expression(this.scrollHeight > 800? "800px" : "auto" );


elle n'est pas valid CSS 2.1

donc là je ne sais pas quoi faire Smiley ohwell
Neth a écrit :
donc là je ne sais pas quoi faire Smiley ohwell
Il faut utiliser les commentaires conditionnels pour ne cibler que IE < 7 puisque les autres navigateurs plus récents (dont IE7) comprennent max-height. Cela pourrait donner
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style type="text/css" media="screen,projection"><!--
.bloc {
  max-height: 320px;
  overflow: auto;
}
--></style>

<!--[if lt IE 7]>
<style type="text/css">
.bloc {
	height:expression(
	this.scrollHeight > 320? "320px" : "auto" );
}
</style>
<![ endif]--> /* sans espace avant le endif */
</head>
<body>
...

Modifié par Heyoan (09 Jul 2008 - 17:25)
okay Mercii pour votre réponse je testerai ça et je reviendrai pour répondre

quoi que je voulais ne pas mettre les balise <style></style> sur ma page HTML Smiley smile
Neth a écrit :
quoi que je voulais ne pas mettre les balise <style></style> sur ma page HTML Smiley smile

Rien ne t'empêche de mettre un commentaire conditionnel et d'utiliser LINK plutôt que STYLE dedans.

Mais tu devrais déjà réaliser ta mise en page sans commentaire conditionnel ou adaptation pour IE6, en utilisant simplement max-height, et vérifier que tu arrives au bon résultat ainsi, avant de rajouter du code spécifique pour IE6.
Sujet clos
Aller à