Discussion :

[zerros]

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 :

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;
}

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.

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) :

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;
}

J'espère que vous pourrez m'aider.

[HiRoN]

Salut,

Pour le 1er point, je dirai qu'il est difficile d'aider sans avoir la totalité du code au niveau des éléments concernés (xhtml /css). Je te conseille en tout cas de regarder au niveau du CSS relatif à ton div du milieu (l'infobulle n'est peut-être pas en cause...)
Edit : Utilité du position:relative sur la a.info ?


Pour le 2ème point :

Comment forcer un élément à passer au dessus d'un autre élément ?

As-tu regardé du côté de la propriété z-index ?

[zerros]

le z-index est le point sur lequel je travaille en ce moment pour comprendre comment ca fonctionne.

Pour les infos bulle, je peux regarder sur le div du milieu alors ?

Je ne peux pas poster l'intégralité de mon code css + html. ce serait trop long. Sinon, je peux peut-^etre mettre les fichiers en dispo ?

[Kerod]

Ou juste poster la partie du code (épuré) qui pose problème.

[zerros]

J'ai résolu le problème de la barre et du cadre de news avec z-index (y).

Il ne me reste que le code css de l'infobulle. J'avoue avoir pris le code css de l'infobulle dans un tuto pas très bien expliqué sur le net.

Alors je vais chercher un vrai tuto avant de revenir sur le forum en total désespoir :p

merci pour votre aide.

[Kerod]

Celui-ci est-il assez expliqué pour toi : http://r-hunel.developpez.com/tutoriels/css/info-bulle/ ?

[zerros]

super. merci