28220 sujets

CSS et mise en forme, CSS3

Problème IE -Opéra

Bonjour,

Mon problème se situe sur cette page:
http://www.bricosign.com/BSv3
Au niveau du cadre contenant tous les test test test test.

Sous Opéra on a ça:
http://www.familoo.com/familoo/RepFiles/8440148398/1.jpg

Sous IE, Firefox et Netscape on a ça:
http://www.familoo.com/familoo/RepFiles/8440148398/2.jpg

J'ai aussi fait un test sur http://danvine.com/icapture/ où tout est parfait...

Voici la partie css concernée par le problème:

.angle_haut_gauche
{   float : left;
   width : 10px;
   height : 10px;
   position : absolute;
   margin-left : -1px;
   margin-top : -1px;
   background-image: url("../images/bloc_haut_gauche.gif");
   background-repeat: no-repeat;
   background-position: top left; }

.angle_haut_droite
{   text-align : right;
   margin-right : -1px;
   margin-top : -1px;
   padding-top : 3px;
   padding-right : 6px;
   font-size: 9px;
   background-image: url("../images/bloc_haut_droite.gif");
   background-repeat: no-repeat;
   background-position: top right; }

.bloc
{
   position:relative;
   color : #615d99;
   font-family: Verdana;
   font-size: 11px;
   margin : 10px;
   border : 1px solid #c6c6c6;
   background-color : #ffffff;
   margin-bottom : 10px;
   margin-right : 9px; }

.bloc_milieu
{
   padding-left : 12px;
}

.angle_bas_gauche
{   float : left;
   width : 10px;
   height : 10px;
   position : absolute;
   margin-left : -1px;
   margin-bottom : -1px;
   background-image: url("../images/bloc_bas_gauche.gif");
   background-repeat: no-repeat;
   background-position: bottom left; }

.angle_bas_droite
{   text-align : right;
   margin-right : -1px;
   margin-bottom : -1px;
   background-image: url("../images/bloc_bas_droite.gif");
   background-repeat: no-repeat;
   background-position: bottom right; }

.spacer
{
   height : 10px;
}


Puis j'ai remarqué que dans la partie:

.angle_bas_gauche
{   float : left;
   width : 10px;
   height : 10px;
   position : absolute;
   margin-left : -1px;
   margin-bottom : -1px;
   background-image: url("../images/bloc_bas_gauche.gif");
   background-repeat: no-repeat;
   background-position: bottom left; }


Si on supprime:

   position : absolute;


Alors ça marche sur Opéra mais ça ne marche plus sur IE, où l'angle disparaît... Smiley eek

Voilà j'espère que quelqu'un pourra m'aider,

Cordialement,

Rémi
Modifié par *|~ XiKuXan ~|* (22 Dec 2005 - 10:44)
Je préfère abandonner la mise en page avec des blocs div. Smiley ohwell

J'ai passé une semaine à me casser la tête là dessus...et je me rend compte que ce n'est pas du tout simple et pratique contrairement à ce qui est dit. Smiley fache

De plus je me rend compte que sur plusieurs forum où j'ai exposé mes problèmes, personne ne trouve jamais de réponse...ce qui prouve bien que les blocs sont tout sauf simples et pratiques.

Alors même si les tableaux ne sont pas conçus pour faire la mise en page d'un site, c'est la seule solution qui permette de faire quelque chose de compatible avec une majorité de navigateurs sans rentrer dans un véritable casse tête chinois.

Je comprend que la majorité des sites utilisent des tableaux, même chez les professionnels, quand on voit l'absurdité de l'utilisation des blocs où le moindre positionnement devient une prise de tête pour combler les bug des navigateurs.
Bonjour *|~ XiKuXan ~|*

Ce sont des choses qui arrivent, en effet. Fréquement quand, sans le savoir, on pousse CSS dans ses retranchements (très vite atteints, pour tout dire). Faire des coins arrondis repose actuellement sur des astuces de positionnement et non sur l'utilisation fonctionnelle de CSS. Qui dit astuce et positionnement dit aussi difficulté acrrue et bugs de navigateurs quasi-obligés. Les implémentations sont loin d'être mûres et certaines utilisations de CSS demandent une expérience qu'on n'acquiert pas en une semaine.

Cela dit, si tu as la possibilité de continuer avec les tableaux que tu sais utiliser, ce n'est pas si dramatique pour un site amateur, dans la mesure où tu veilles au moins à ne pas les imbriquer, à ce que le contenu garde son sens quand ils sont linéarisés, et à les limiter au minimum .

Rien de dramatique dans tout cela Smiley cligne
Modifié par Laurent Denis (23 Dec 2005 - 14:17)
Sujet clos
Aller à