28173 sujets

CSS et mise en forme, CSS3

Image fixe !

Hello all !

Un petit dilemme pour moi une facilité de 2 clics pour vous....

Comment afficher une image fixe sur une page qui reste queqlque soit la configuration d'écran et même si on utilise les "ascenseurs"

Exemple : http://themes.wordpress.net/testrun/

Vous voyez la partie orange oblique dans le coin supérieur gauche ?

Merci de votre aide Smiley biggrin
Bonsoir,

T0my a écrit :
Vous voyez la partie orange oblique dans le coin supérieur gauche ?

Non, pas du tout. Smiley ohwell
Bonjour

Je ne le vois pas non plus mais c'était surtout pour te signaler que ton footer était décalé d'un pixel vers la droite.

a+
Salut,

a écrit :
Comment afficher une image fixe sur une page qui reste queqlque soit la configuration d'écran et même si on utilise les "ascenseurs"
En CSS c'est du positionnement fixe ({position:fixed}). C'est assez peu utilisé car IE6 ne le comprend pas, il faut bidouiller.
Bon ok...Sur ce coup je foire un petit peu....

L'url que je vous est donné n'est pas fixe, elle change chaque jour...(j'ai honte) lol

Soit, ne retrouvant pas d'exemple, je vous l'es fait ! Smiley lol

Enfin sous forme d'image Smiley smile je compte sur vous pour m'aider a réaliser en css..

Voici => upload/12384-idee.jpg

Je vous préviens c'est de l'art Smiley lol
Bon, ben là ça va être simple :

- positionnement fixe pour l'image-bandeau (en PNG-24 si on veut jouer avec la transparence) ;
- pour IE6, on adapte via un commentaire conditionnel : soit on positionne en absolu (avec une image en GIF ou PNG-8), soit on supprime carrément si c'est de la déco pas indispensable.

Pour le positionnement fixe, voir la spécification CSS. Smiley smile
Pour les commentaires conditionnels, voir la FAQ du forum.
Ok, merci Florent V ! Smiley ravi

Je fait tout ça, je bidouille un truc et je vous le soumet pour vos critique Smiley smile

Mais normalement tout va etre ok ! Je suis pas plus bête qu'un autre hein !

Merci beaucoup a bientôt... Smiley lol
Voila après quelques recherches je crois avoir trouvé !

Voici mon code css : 
 
   position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    height: 120px;
    width: 120px;
    z-index: 99;
    background-image:url('image.png')


Ca doit ressembler a un truc comme ca ? Smiley lol

Par contre pour IE je sais pas si c'est bon :s
T0my a écrit :
Ca doit ressembler a un truc comme ca ? Smiley lol

Pourquoi pas. Mais tu ne voulais pas quelque chose en positionnement fixe (position: fixed) ?

T0my a écrit :
Par contre pour IE je sais pas si c'est bon :s

Penser aux commentaires conditionnels pour les probables correctifs pour IE6. À priori, IE7 ne devrait pas poser de problème.
Hellow !

Oui dans IE 7 Aucun problemes, cependant quel est la différence entre fixed et absolue ?

Ici mon image est bien positionnée Smiley smile Ce serai mieux si elle pourrait descendre en meme temps qu'on descende dans la page c'est possible ? (ascenseur)

Et une deuxieme question, est-il possible de mettre un <div> en lien ?

donc par exemple ici mon image est "stockée" dans un div css est il possible de cliquer sur ce div ? Merci Smiley lol
T0my a écrit :
cependant quel est la différence entre fixed et absolue ?

Ben alors, on ne connait pas ses classiques ? Sur OpenWeb : Initiation au positionnement CSS : 3. position absolue et fixe.

T0my a écrit :
donc par exemple ici mon image est "stockée" dans un div css est il possible de cliquer sur ce div ? Merci Smiley lol

S'il s'agit d'une image porteuse d'une information, voire d'une fonctionnalité (lien), il ne faut à priori pas la mettre en image de fond (déco).
<div id="machin-fixe">
<a href="..."><img alt="texte alternatif pertinent" src="..."></a>
</div>

Voilà, un lien sur une image. Smiley cligne
Ok Smiley smile Merci, donc je peu pas mettre mon image bandeau en fond dans mon css si je veux qu'il soit clicable !

Tout est bon c'est super Smiley biggrin

J'ai tout de même encore un petit challenge... Mais je crois que je vais reposter parceque je m'éloigne quand même du sujet de départ !?

Encore un grand merci, Surtout Florent V:d

A bientot j'espere ! Smiley lol
Sujet clos
Aller à