[Résolu] Design fluide Em % px? Lequel choisir?

(reprise du message précédent)

cerede2000 a écrit :

<!--[if lte IE 6]>
...

Pourquoi ne mets-tu pas

<!--[if lt IE 7]>

Comme cela est indiqué ?

Chez moi cela fonctionne partout.

De plus, la manipulation pour l'installation des versions standalone est assez rigoureuse, voici comment faire exactement : http://forum.alsacreations.com/topic.php?fid=2&tid=19587

Raphael a écrit :
mais c'est agaçant de donner des liens que personne ne lit

Mais si on les lit et relit, d'ailleurs pourquoi ne pas rajouter :

<!--[if gte IE 7]> <!-->
Ceci est lu par tous les navigateurs sauf les versions IE inférieure strictement à 7
<!--> <![endif ]-->

je sais que cette astuce est présente dans un des liens en bas de page mais peut-être que ces liens ne sont pas lus par tous les visiteurs de la page ...

Sauf que si on met ca les navigateur genre Firefox ne l'inteprete pas donc ca n'as aucun n'interet!

cerede2000 a écrit :
J'ai essayer aussi avec ca: <!--[if lt IE 7]> et c'est pareille.
en plus ca ne vient pas que de chez moi les personnes a qui j'ai fait tester ca leur fait pareille!

salut,

Il y a une erreur de syntaxe dans la déclaration du endif. C'est de ma faute en fait, je n'avais pas vu que le forum avait viré les crochets. Donc, et sans acun espace

<! [ endif ] -->

J'ai testé et ça roule pour IE7
Modifié par clb56 (07 Jan 2007 - 11:32)

Merci! Tu me sauve la vie j'ai bien cru que j'allai me pendre!

EDIT: D'ailleur en passant il serais pas mal de corriger la FAQ
Modifié par cerede2000 (07 Jan 2007 - 11:53)

cerede2000 a écrit :

EDIT: D'ailleur en passant il serais pas mal de corriger la FAQ

J'ai prévenu Raphaël et corrigé mon post d'où vient l'erreur :
http://forum.alsacreations.com/topic-4-21357-2-Design-fluide-Em--px-Lequel-choisir.html#p161191
Modifié par clb56 (07 Jan 2007 - 12:02)

CNeo a écrit :

<!--[if gte IE 7]> <!-->
Ceci est lu par tous les navigateurs sauf les versions IE inférieure strictement à 7
<!--> <![endif ]-->

cerede2000 a écrit :
Sauf que si on met ca les navigateur genre Firefox ne l'inteprete pas donc ca n'as aucun n'interet!

C'est à moi que tu réponds ? Si c'est le cas saches que justement si, çà marche avec Firefox, Opera ... C'est une astuce très pratique et très utilisée ...
Modifié par CNeo (07 Jan 2007 - 12:05)

Ah bon Ben je croyais que les commentaire conditionnel n'était lu que par IE??!!

cerede2000 a écrit :
Ah bon Ben je croyais que les commentaire conditionnel n'était lu que par IE??!!

Pour être au clair sur les commentaires conditionnels il faut absolument lire cet article de laurent Denis :
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

cerede2000 a écrit :
Ah bon Ben je croyais que les commentaire conditionnel n'était lu que par IE??!!

Oui mais dans mon exemple Firefox et les autres voient des commentaires qui s'ouvrent <!--[if ... puis juste après des commentaires qui se ferment <--> par conséquent ils voient tout sauf les [if ...] et [ endif].

Edit : grillé je faisait autre chose ...
Modifié par CNeo (07 Jan 2007 - 12:59)

FAQ et tuto corrigés, merci

Oui j'ai lu le lien donné très intéressant même si très tiré par les cheveux
Merci beaucoup! Bon je résout ce topic.

En passant j'apporte une petit precision par rapport a ma question d'ici:
http://forum.alsacreations.com/topic-4-21357-2-Resolu-Design-fluide-Em--px-Lequel-choisir.html#p161240

En faite on ne peut modifier cette taille a parament parceque la div n'etant pas encore affiché la taille si elle n'est pas fixé, n'est pas encore connu et donc ca ne fonctionne pas!

Edit: Et du coup par contre on peut utilise la technique vu sur ce topic pour min-heigth:
http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer
Modifié par cerede2000 (07 Jan 2007 - 13:53)

J'avais dit qu'il y avait quelques soucis avec ces 4 propriétés. C'est maitenant chose synthétisée. En espérant que cela soit utile

http://antoine.media-box.net/index.php?2007/01/07/59-ie7-et-les-maximums-minimum

Bonjour

OK alors lecture très instructive. Merci à vous pour ce cours.

Cependant j'ai encore un problème.

Je propose à mes visiteurs l'utilisation d'un tag BBCode [ img ] dans mes forums et cherche à limiter la taille max des images proposées histoire de pas foutre en l'air la présentation du site

Dans ma css J'utilise donc la déclaration suivante

img.bbimage {border: none; max-width: 15em;}

qui fonctionne très bien sous Fifox, rien à redire

Pour IE6 par contre je me suis tenté sur le code suivant issu du tuto, dans mon entête (fichier spip inc-head.html pour ceux qui connaissent. Il est appelé par toutes les pages du site)

<!--[if lt IE 7]>
	<style type="text/css">
	img.bbimage {
		width: 320px;
		width:expression(document.body.clientWidth > 322? "320px": "auto" );
	}
	</style>
<! [ endif ] -->

et autant la redimension est bien appliquées aux images dépassant 320 px de large que les images plus petites sont maintenant systématiquement agrandies à 320px de large ce qui est assez déstabilisant surtout pour les petites images qui du coup apparaissent super pixélisées.

Je me suis tâté à savoir si j'allais pas faire sauter la première déclaration conditionnelle "width: 320px" mais voila, que se passera t'il alors sur IE6 si l'utilisateur a désactivé Javascript ?

Du coup, là je ne sais plus trop comment procéder.

Si quelqu'un a une idée ? Merci pour vos lumières.


PS : ya vraiment un soucis avec les crochets, même entre les balises de code visiblement. j'ai rajouté des espaces sur le endif final pour que ça passe.

Bonjour Zzz et bienvenue sur Alsacréations ,

Il serait plus pratique que tu postes un nouveau sujet, plutôt que dans ce sujet déjà "résolu". Le problème que tu rencontres est probablement très spécifique à ton code et peut-être pas à celui abordé dans ce sujet.

a écrit :
Bonjour Zzz et bienvenue sur Alsacréations smile ,

Merci

a écrit :
Le problème que tu rencontres est probablement très spécifique à ton code et peut-être pas à celui abordé dans ce sujet.

En effet. Je n'avais pas spécialement fait attention à l'intitulé même du sujet mais plus à la méthode exposée au long de ces 4 pages. J'ai trouvé le lien vers ce topic dans la FAQ concernée.

Bon ben je vais flooder alors puisque qu'un modo me l'autorise


EDIT : Hey mais tu es LE Igor dont j'ai le coin web dans mes favoris !!! Terrible ta section sur SPIP, collègue !
Modifié par Zzz. (01 Feb 2007 - 04:41)

bonjours à tous
heureux de participer à cette discution trés interressante!
ça fait un petit moment que j'utilise cette fonction "expression" pour ie et comme vous j'ai remarqué ces étranges comportements et quelquefois dans les conditions expliquées si dessus carrement la faculté de faire planter ie (elle crée une boucle sans fin).
Depuis peu de temps j'ai pris l'habitude de mettre en plus de ma feuille de style speciale ie6 un js special ie6 comme ça:

<!--[if lte IE 6]>
  <link rel="stylesheet" href="styles/ie6.css" type="text/css" />
   <script defer type="text/javascript" src="scripts/ie6.js"></script>
<![endif]-->

avec par exemple le png pour ie et le hover si j'ai des menus déroulants.

Donc je me demandé si finalement ce ne serait pas mieux de mettre le min-width dans ce js comme ça (par exemple):

function minMaxWidth(){
var content = document.getElementById("content");
content.style.width = '100%';
if (content.offsetWidth < 800) {content.style.width = '800px';}
if (content.offsetWidth > 1100) {content.style.width = '1100px';}
}
document.body.onresize = minMaxWidth;
minMaxWidth();

On peut mettre les valeurs exactes sans faire planter ie6, et l'appliquer précisement sur n'importe quel élement.

Qu'en pensez vous?

A tester. Je copie/colle ton ciode et te ferai un feedback dès que j'aurais pu tester (je suis au taff et le serveur est à la maison)

Bonne fin de nuit.

Bien le bonsoirs tout d'abord c'est surtout pour faire up du sujet, cai il n'y a pas beaucoup de tuto sur le net pour les sites fluides en EM ou %.

dans ce cadre j'ai également un petit souci je veut mettre des lettres en font-size=1em.

Ce texte seré dans un menu en arrondi.

<div class="titreg"></div><h3><span>+</span> Lui</h3><div class="titred"></div>
	<div class="boxmenu">
		<ul>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
		</ul>
	</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>

css

div#menugauche {

	width: 105px;
	float: left;
	margin: 0 0 5px 0;
}

div#menugauche div.titreg {

	width: 7px;
	height: 18px;
	background: url(./box-top-left.gif) no-repeat;
	font-size: 1px;
	float: left;
}

div#menugauche h3 {

	font-size: 10px;
	text-align: right;
	background: url(./box-top-center.png) repeat-x;
	height: 15px; /*18*/
	padding: 3px 0 0 0;
	width: 89px;
	float: left;
	color: #92a620;
}

div#menugauche h3 span { color: #54545; }

div#menugauche div.titred {

	width: 7px;
	height: 18px;
	background: url(./box-top-right.gif) no-repeat;
	font-size: 1px;
	float: left;
}

div#menugauche div.boxmenu {

	border: 1px solid #dbdbdb;
	padding: 0 0 0 13px;
	margin: 0 0 0 0;
	clear: left;
}

div#menugauche div.titregb {

	width: 7px;
	height: 7px;
	background: url(./box-bottom-left.gif) no-repeat;
	font-size: 1px;
	float: left;
}

div#menugauche div.centre {

	background: url(./box-bottom-center.gif) repeat-x;
	height: 7px; /*18*/
	padding: 3px 0 0 0;
	width: 89px;
	float: left;
}

div#menugauche div.titredb {

	width: 7px;
	height: 7px;
	background: url(./box-bottom-right.gif) no-repeat;
	font-size: 1px;
	float: left;
}

comment adapté ce genre de menu pour qu'il puisse grandir correctement quand l'utilisateur augmente la taille du texte?

Merci bien.