28172 sujets

CSS et mise en forme, CSS3

Gros soucis avec CSS3 sous IE, hé oui je sais rien neuf ;)

Bonjour à tous!


Je suis nouveau sur ce forum, je refait le design complet de mon site, dont une page test est dispo ici
http://schneider67000.free.fr/new/codes/presentation.php

(les liens ne marchent pas, c'est normal)


Je vous contact car j'ai du mal à résoudre des problèmes de compatibilité du css3 sous ie des propriété suivantes:

-background:
quand il y a cette ligne, qui contient 2 images, il ne m'affiche aucune image

background: url(../images/profil.jpg)no-repeat,url(../images/bck-presentation2.jpg) no-repeat fixed;

background-position:center top;
il ne me place pas correctement l'image de fond

bord arrondi type: border-top-right-radius
sous ie, j'ai trouvé un hack:
border-radius: 10px\9; /* bord arrondi sous IE*/
behavior: url(../codes/pie/PIE.htc)\9;
mais ça ne me permet pas d'obtenir le même résultat que sous FF. A noter que sous Chrome non plus Smiley decu


Voilà où j'en suis, si vous avez besoin de bout de codes, dites le moi, et merci d'avance !
Plutôt que de faire de la bidouille pour que ça marche je te conseille de séparer tes éléments 1 un 1 pour ne pas avoir trop de "hack" à faire pour IE.

2 background = 2 éléments

et pour les bords arrondis : ben fait une image...
Pour les bords arrondis tu a plusieurs solutions

Perso j'utilise beaucoup Roundies.js

Edit : IE ne prend pas en compte les background multiple, il faut 1 élément par bg !
Modifié par Melusine85 (01 Aug 2012 - 10:42)
Tout d'abord, un grand merci à vous pour vos réponses. Vous ne m'avez pas seulement donner des solutions, mais surtout une vision différente, donc MERCI!!!!


Pour l'image du back, et les arrondies, je vais simplement utiliser une image de fond(retravaillé sous photoshop) comme me le conseils SuperMerguez.

Par contre, comment faire pour la placer au bon endroit? Est ce qu cette technique pose un problème si je positionne mes div avec des "%" et non des "px"?



J'ai aussi relevé un autre soucis sous IE. Le positionnement des images de fond ne se fait pas correctement, j'utilise ce code:

background: url(../images/bck-presentation2.jpg) no-repeat fixed;
background-position:center top;

"center top" car dans le body il y a:
background: url(../images/bck-presentation1.jpg) no-repeat;
background-position:center top;


Merci par avance, et bonne soirée!!!
Bonjour

Si met background & background-position, il ne va prendre en compte que le premier.
Donc soit tu regroupe tout comme le premier exemple, soit tu décompose tout comme le deuxième :

1er exemple : 
background: url(../images/bck-presentation2.jpg) no-repeat fixed center top;
background: url(../images/bck-presentation1.jpg) no-repeat center top;


2eme exemple :
background-image: url(../images/bck-presentation2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center top;



Concernant les arrondis, comme tu préfère mais la solution en CSS3 (et JS pour IE) est plus pérenne.

Tu peut positionner tes bloc comme tu l'entend, les % et em sont plus utilisé pour le responsive.

Bonne journée
merci Melusine,

J'ai trouvé des solutions (css et js) pour les arrondies, le tout aussi compatible ous IE, mais par contre je n'arrive pas à faire des arrondies différents sur mon div.


Comment positionner correctement le back flou à la bonne position au dessus du back de fond?
Sujet clos
Aller à