Bonjour,
Je suis débutant dans le css, et je me tire les cheveux pour arriver à faire une application web compatible Firefox ET IE7.
Mon schémas est assez simple. il resemble à ça :
http://v2.transchaines.com/system/th...images/3cl.gif
Donc un header, un footer, et entre ne colonne à gauche, et une autre à droite.
Dans chaque partie j'ai créé des div :
Header :
- logo
- cadre contenu des news
- une barre horizontale
Left :
- menu
Right :
- Affichage de flux RSS
Footer :
- copyright
Tous mes alignements fonctionnent à merveille, mais j'ai 2 choses qui clochent.
La première est sur des infobulles css.
Dans le menu de gauche, j'ai un image qui doit afficher une infobulle. J'ai réussi à le faire avec le code css ci dessous :
Le hic c'est qu'une partie des infosfulles sont cachés par la div du milieu UNIQUEMENT SUR IE !! Sous Firefox tout fonctionne niquel.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 a.info { position:relative; z-index:24; color:#000; text-decoration:none; } a.info:hover { z-index:25; background-color:#FFF; } a.info span { display: none; } a.info:hover span { font-size:10px; color:#0099ff; display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #000; background-color:#FFF; text-align: justify; padding:5px; }
Deuxième question, dans le header, j'ai une barre horizontale qui part du logo, qui passe par le cadre contenant les news et continu jusqu'à la droite. Sous firefox, l'effet voulu fonctionne parfaitement : le cadre est au dessus de la barre. Ca fait comme si que la barre faisait le tour du cadre sans passer au travers et continu de l'autre côté à droite.
Sous IE, je vois la barre qui passe au travers du cadre. Donc l'effet désiré ne fonctionne pas.
Comment forcer un élément à passer au dessus d'un autre élément ?
Voici le css du cadre et de la barre (ne vous formalisez pas, j'utilise un CMS qui me génère le code) :
J'espère que vous pourrez m'aider.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 .barre { height:1px; margin:-33px 5px 0px 250px; background-color:#000000; border-top:0px solid #000000; border-right:0px solid #000000; border-bottom:2px solid #000000; border-left:0px solid #000000; } .news { width:420px; height:60px; margin:-40px 0px 0px 500px; background-color:#e2e2e2; border:2px solid #000000; padding: 5px; }
Partager