28112 sujets

CSS et mise en forme, CSS3

[Résolu] Propriété min-right ou expressions ? (firefox)

Bonjour,

J'ai positionné sur mon site une image à la fin d'un bandeau de menu horizontal.
L'image est fixée par rapport au bord de droite et le bandeau par gauche et droite.
Le bandeau dispose d'un attribut min-width de 400 ce qui permet de bloquer la redimensionnement pour ne pas être inférieur à 400.
J'aimerai faire de m^me pour le positionnement de mon image en bout de bandeau.
Apparemment, l'attribut min-right n'existe pas (et il faut avouer que ça ne veut pas dire grand chose).

Je me demandais donc s'il existait une méthode pour fixer le positionnement de l'image à left: 500 si le taille du navigateur est inférieure à 600.
Bref, j'aimerai utiliser une expression comme celles sous IE (c'est pas souvent que je cherche à faire un truc comme IE Smiley langue )

CSS:

img.cornertopright {
	position: absolute;
	top: 25px;
	right:50;
	left: expression(document.body.clientWidth < 600 ? "500px":"auto" );
}

l'expression n'étant interprétée que par IE, il ne m'est pas possible de la faire fonctionner sous firefox.

Je cherche donc une méthode simlaire fonctionnant sur FF.

Merci!
Modifié par LeParrain735 (28 Jan 2006 - 17:08)
Bonjour,

pourrais-tu baliser ton code (avec la balise [code ] (sans espace)) comme demandé dans les règles. Ca facilite la lecture des topics. Merci.

Pour ton problème, utilises directement JavaScript dans une fonction externe.

Puisque de toute façon c'est du JavaScript.
tout d'abord dsl pour la balise Smiley confused

OK pour utiliser du javascript mais où et quel code?
Il faut faire une fonction executée en repeat permanent?
quelque chose comme ça?

<img class="cornertopright" style.left="calculLeftSize();" src="img/cornertr.gif"/>


avec un javascript


(document.body.clientWidth < 600) ? return "500px": return"auto"

ça se fait?
Modifié par LeParrain735 (27 Jan 2006 - 18:40)
LeParrain735 a écrit :

OK pour utiliser du javascript mais où et quel code?
Il faut faire une fonction executée en repeat permanent?


La même fonction que dans ton "expression()"


function resize()
{
   var mesElts = getElementsByClassName('cornertopright');
   for (var j = 0; j < mesElts.length; ++j) {
      mesElts[j].style.left = (document.body.clientWidth < 600) ? "500px":"auto";
   }
}

function resizer()
{
   resize();
   window.onresize = resize();
}

window.onload = function()
{
   resizer();
};


En gros, fait vite fait.
En créant la fonction getElementsByClassName qui n'existe pas par défaut. (j'en ai un exemple quelque part, je te retrouverais ça)
Faudrait tester et vérifier certaines choses mais c'est le principe général.
Modifié par Olivier (27 Jan 2006 - 18:42)
Laurent Denis a écrit :
Bonsoir,

Pourquoi ne pas se passer de tout cela en utilisant le flux plutôt qu'un positionnement ? Smiley cligne


Perso, parceque je n'ai même pas réfléchi au problème !! juste à la question posée Smiley langue Smiley confused Smiley biggol
j'ai essayé:
<script type="text/javascript">

function resize()
{
	alert("resize");
      document.getElementById("cornertopright").style.left = (document.body.clientWidth < 600) ? "500px":"auto";
}



function resizer()
{
   resize();
   window.onresize = resize();
}

window.onload = function()
{
   resizer();
}
window.onresize = function()
{
   resizer();
}

</script>


mais ya que sous IE qu'il réexecute resize() quand window.onresize, sur firefox ça l'execute que onload.
Alors que justement l'objectif est de faire fonctionner sur FF car IE comprend les expressions et a donc pas besoin du script Smiley confus
C'est sûrement ça :

document.body.clientWidth


Ca doit être spécifique à IE à tous les coups, regarde sur google.
En effet Olivier,

document.body.clientWidth sur IE equivaut à
window.innerWidth sur FF

Donc, le solution est:
CSS:
img.cornertopright {
	position: absolute;
	top: 25px;
	right:50;
	z-index: 5;
	left: expression(document.body.clientWidth < 600 ? "500px":"auto" );
}

.menutop {
	top: 25;
	left: 166;
	right: 60;
	height: 80px;
	position: absolute;
	text-align: center;
	background: #fde2b3;
	line-height: 2em;
	border-top: 2px solid #261a12;
	z-index: 3;
	min-width: 400;
	width: expression(document.body.clientWidth < 600 ? "360px" : document.body.clientWidth-230 );
}


Javascript:

function resize()
{
	document.getElementById("cornertopright").style.left = (window.innerWidth < 600) ? "535px":"auto";
	document.getElementById("cornertopright").style.right = (window.innerWidth < 600) ? "auto":"50px";
}

window.onload = function()
{
   resize();
}
window.onresize = function()
{
   resize();
}


Du coup sur FF:
La taille de menutop est définie par left et right et est minimisée par min-width.
l'expression de width n'est pas interprétée.
L'image cornertopright est placée par rapport à right et l'expression left n'est pas interprétée.
Onload ou onresize, la fonction resize est executée et fixe les valeurs left et right en en fixant un à auto (sinon l'image est redimensionnée)

Sur IE:
La taille de menu top est définie par left et l'expression de width (CSS).
min-width n'est pas interprété.
L'image corner est fixée par l'expression left dans le CSS.
Right n'est pas pris en compte car left est défini après et il n'y a pas de redimensionnement car pour IE width est différent de clientWidth-left-right.
La fonction javascript resize n'a pas lieu d'etre sur IE, le CSS gérant tout le positionnement. Resize() utilise window.innerWidth et IE ne l'interprète donc pas.

Voilà, et ça marche.
J'avoue que c'est pas très propre comme solution mais bon, j'ai ce que je voulais.

Merci Olivier et les autres. Smiley biggrin
LeParrain735 a écrit :
euh, il faut quand même ajouter 

if (navigator.appName!="Microsoft Internet Explorer")


au début du javascript


Non.
Ces méthodes de détection ne sont pas fiables.
Utilises

if (window.innerWidth)
Sujet clos
Aller à