28219 sujets

CSS et mise en forme, CSS3

Rogner une image

Bonjour,

Je souhaite rogner une image qui est appelée directement par une iframe.
J'ai bien vu la fonction clip mais elle fait partie de CSS1 et ne fonctionne pas trop bien apparement.

De plus, j'utilise une iframe pour avoir les ascenseurs autour de l'image, ci e rogne l'iframe, ca me rogne les ascenseurs, ce qui n'est pas cool.

Est ce que quelqu'un a une idée ?

Merci d'avance
Bonjour ceoph19, et bienvenue sur le forum,

ceoph19 a écrit :
Bonjour,

Je souhaite rogner une image qui est appelée directement par une iframe.
J'ai bien vu la fonction clip mais elle fait partie de CSS1 et ne fonctionne pas trop bien apparement.


Oups ! Confusions Smiley cligne
Voir :
http://blog-and-blues.org/weblog/2004/08/14/272-syntaxe-de-la-propriete-clip
http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image



ceoph19 a écrit :

De plus, j'utilise une iframe pour avoir les ascenseurs autour de l'image, ci e rogne l'iframe, ca me rogne les ascenseurs, ce qui n'est pas cool.


Ah, ce n'est pas l'élément iframe qu'il faut cliper, mais son contenu. Cela dit, quelque-chose m'échappe entre le rognage de l'image et l'idée d'avoir des ascenseurs ?

Aurais-tu une url de ta page, ou au moins un exemple de ton code, que l'on sache exactement de quoi il retourne ?
Modifié par Laurent Denis (08 Aug 2005 - 11:39)
Voici un exemple de ce que j'ai:
http://www.bnu.fr/caa2/kuhlmann.html
J'aimerai pouvoir rogner les bords gauche et haut de l'image qu'il y a dans l'iframe. Cette iframe permet de ne pas avoir le redimensionnement automatique. Y a t'il un autre moyen plus propre ? (celui qui me répond qu'il faut désactiver le paramètre dans le navigateur je lui fait une tête au carré Smiley cligne )

Merci d'avance
Voici un lien sans toute la fioriture http://www.bnu.fr/caa2/test.php

voici le code html

<html>
<head>
<link rel="stylesheet" href="rogne.css" type="text/css">
</head>
<body>

<div class="rogne1">
<img src="k-0005.png">
</div>

</body>
</html>


et voici le source du css

.rogne1 {
clip:rect(-100px,0px,0px,-50px);
}

img {
clip:rect(-100px,0px,0px,-50px);
}

p {
clip:rect(-100px,0px,0px,-50px);
}


Et bien sur, ca ne fonctionne pas.J'ai testé avec FireFox et IE6.

Merci d'avance
Bis repetitat : voir les liens donnés ci-dessus, pour les raisons qui font que ça ne marche pas, et qu'il faut une autre syntaxe et d'autres propriétés pour que ça marche.

(A se demander pourquoi tu poses la question sur un forum, si tu ne te sers pas des informations qu'on te donne ? )
Bon, procédons par l'exemple :
<!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">
<head>
<title>Clip</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- 
p {
position: relative;
}
img {
position: absolute;
clip: rect(0 400px 400px 0);
clip: rect(0,400px,400px,0);
} 
-->
</style>
</head>
<body>
<p><img src="k-000500.png"/></p>
</body>
</html>


(Image arbitrairement rognée en un carré de 400px : ton code ci-dessus ne permet absolument pas de savoir ce que tu voulais obtenir comme rognage).

Points importants :
- obligatoirement une DTD valide activant le mode de rendu Strict (voir le tuto alsa sur le choix d'une DTD)
- position:absolute indispensable
- double syntaxe du clip pour qu'IE ait la sienne (les deux sont valides CSS2.1)
Modifié par Laurent Denis (10 Aug 2005 - 17:01)
Sujet clos
Aller à