26909 sujets

CSS et mise en forme, CSS3

Pages :
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!
Modifié par cerede2000 (07 Jan 2007 - 11:19)
Raphael a écrit :
mais c'est agaçant de donner des liens que personne ne lit Smiley decu

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 ...
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 Smiley lol j'ai bien cru que j'allai me pendre!

EDIT: D'ailleur en passant il serais pas mal de corriger la FAQ Smiley cligne
Modifié par cerede2000 (07 Jan 2007 - 11:53)
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)
cerede2000 a écrit :
Ah bon Smiley confus 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 ... Smiley biggol
Modifié par CNeo (07 Jan 2007 - 12:59)
Oui j'ai lu le lien donné très intéressant même si très tiré par les cheveux Smiley lol
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)
Bonjour Smiley smile

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.
Modérateur
Bonjour Zzz et bienvenue sur Alsacréations Smiley smile ,

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. Smiley cligne
a écrit :
Bonjour Zzz et bienvenue sur Alsacréations smile ,


Merci Smiley cligne

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. Smiley cligne

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


EDIT : Hey mais tu es LE Igor dont j'ai le coin web dans mes favoris !!! Smiley biggrin Terrible ta section sur SPIP, collègue ! Smiley cligne
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) Smiley cligne

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.
Pages :