Positionement et notre cher IE...

16 nov. 2006, 20:20

Bonjour à tous, voila comme un bon dessin vaut mieux que de grands discours je vous file les dessins
Screenshot sous FireFox 1.5.0.8

Screenshot sous IE (dernière version normale disponible sous xp)

Maintenant je pense que vous aurez comrpis le problème
Voila enfin le css du site

Code : Tout sélectionner

body
{
background-color: #000000;
margin: 0;
padding: 0;
}
.contenu
{
margin: 0;
padding: 0;
height: 100%;
width: 800px;
border-spacing: 0;
border: 0;
}
.joker
{
width: *px;
}
.header
{
margin: 0;
padding: 0;
height: 220px;
width: 800px;
background-image: url(images/haedermodif.jpg);
}
.menu01
{
width: 25px;
height: 450px;
background-image: url(images/menugauche.jpg);
background-repeat: repeat-n;
padding: 0;
margin: 0;
}
.menu02
{
width: 150px;
height: 450px;
background-image: url(images/menucentre.jpg);
background-repeat: repeat-n;
padding: 0;
margin: 0;
vertical-align: top;
}
.menu03
{
width: 25px;
height: 450px;
background-image: url(images/menudroit.jpg);
background-repeat: repeat-n;
padding: 0;
margin: 0;
}
.zone
{
width: 600px;
height: 450px;
background-image: url(images/zonetexte.jpg);
background-repeat: repeat-n;
padding: 0;
margin: 0;
vertical-align: top;
}
.footer01
{
width: 800px;
height: 130px;
background-image: url(images/background.jpg);
background-repeat: no;
padding: 0;
margin: 0;
}
.footer02
{
width: 800px;
height: 130px;
padding: 0;
margin: 0;
border-spacing: 0;
border: 0;
}
.jakfoot
{
width: 176px;
padding: 0;
margin: 0;
}
.footer03
{
width: 468px;
height: 30px;
padding: 0;
margin: 0;
}
.ban
{
width: 468px;
height: 60px;
padding: 0;
margin: 0;
vertical-align: top;
text-align: left;
}
.footer04
{
width: 468px;
height: 40px;
padding: 0;
margin: 0;
vertical-align: top;
}
.text {
	text-align: left;
	vertical-align: top;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
}

.text a {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: none;
}

.text a:hover {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: underline;
}
.copyright {
	padding-bottom: 10px;
	text-align: center;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
}

.copyright a {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: none;
}

.copyright a:hover {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: underline;
}

a.info {
text-decoration: none;
border: 0;
margin: 0;
padding: 0;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
margin: 0;
border: 0;
padding: 0;
}
a.info:hover span {
display: inline;
position: absolute;
background: orange;
text-align: left;
vertical-align: top;
color: white;
width: 198px;
height: 98px;
text-decoration: none;
margin: 0;
border: 0;
padding: 1px;
}
img.map
{
height: 100px;
width: 100px;
border: 0;
padding: 0;
margin: 0;
}

Et le code html de l'image en question

Code : Tout sélectionner

<table style="width: 400px; height: 340px; border: 0; border-spacing: 0; vertical-align: center;" class="text" cellspacing="0" cellpadding="0" ><tr style="height: 20px;"><td> </td><td></td><td> </td><td></td><td> </td><td><a href="controlc.php?page=mapgen1&idf=56&action=go&xd=1&yd=-1">Haut-droite</a></td><td></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/dmno.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/dmno.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td width="50px"></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p>Seigneur: cicom </p><p>Nom: patrouille </p><p>Clan: libertin </p><p>Guilde : la f&eacute;d&eacute;ration des 400 lieues </p><p>Prime: 0</p></span></a></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="50px"><a href="controlc.php?page=mapgen1&idf=56&action=go&xd=1&yd=0">Droite</a></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/m.jpg" height="100px" width="100px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td width="100px"><img src="map/images/l.jpg" width="100px" height= 100px" border="0px" /></td><td> </td></tr><tr style="height: 20px;"><td></td><td></td><td> </td><td><a href="controlc.php?page=mapgen1&idf=56&action=go&xd=0&yd=1">Bas</a></td><td> </td><td><a href="controlc.php?page=mapgen1&idf=56&action=go&xd=1&yd=1">Bas-droite</a></td><td></td></tr></table><br /><p class="text"><form method="post" action="controlc.php?page=mapgen1&action=dobat&xd=9&yd=13"><label for="nmbat">Nom du bateau: </label><input type="text" name="nom" id="nmbat" /><input type="submit" value="Construire un bateau!" /></form><p class="text"><a href="controlc.php">Retour</a><br /></p></td></tr></table>

Le but de la maneuvre étant d'afficher clan et infos quand on passe la souris sur l'image de la ville (ou de l'armée...) et de pouvroi faire de rtour à la ligne dedans (je dis ca parce qu'avec title en attribut img j'y suis pas arrivé)
Voila voila merci beaucoup de votre aide!

18 nov. 2006, 05:52

peux tu précisés les balises du blocage ?
Merci

18 nov. 2006, 11:50

http://www.siteduzero.com/tuto-3-5272-1 ... bulle.html

18 nov. 2006, 13:56

Bonjour,
Merci de vos réponses, alors déjà j'ai changé le code donc je vous ai posté la dernière version de ce dernier. Ensuite j'ai fait des tests avec le tuto du site du zero en complétant mon css avec leur code (juste les attributs que je n'avais pas) et pas de changements sur le problème à l'horizon...
Pour finir j'ai remplacé les pauvres lignes de html que je vous avais mises par l'intégralité du tableau qui gère toutes ces images (histoire que vous y voyez clair)
Enfin les tableaux (comme vous le verrez) dépendent des classes, en fait d'aucune classe, et les infobulles des classes .info (toutes)
Voila merci de votre aide continuez!

18 nov. 2006, 14:01

Voir un tuto sur le positionnement en CSS

19 nov. 2006, 00:33

Bonne nuit à tous!
Voila j'ai fait pleins d'essais (de postionement, de truc, de machin, de refaire en uniquement div...) mais ca n'a rien donné. Merci pour ton tuto Cyrano il m'a éclraircit les idées. Je pense avoir élucidé le problème, il me faut un attribut css qui spécifie que la taille ne change pas mais que la position peut varier...
Je vais continuer de chercher mais je commence à fatiguer là.
Merci à tous!

22 nov. 2006, 18:01

J'AI TROUVE LA SOLUTION!
Je vous explique, j'en avais marre de ce bug et donc pour me changer les idées j'ai continué à développer en php, puis arrivé un moment, affichant trop d'infos j'ai dû aggrandir mon design (il se déformait) et là ca a fait tilt! J'appliquais la classe text et la class info au tableau, Firefox s'en dépatouillait mais IE ne s'en sortais plus... Alors après quelques manipes je suis arrivé à avoir le même résultat sous IE et FF!
Je vous joind le code final (faites pas attention aux classes menuxx elles ont changé mais n'y sont pour rien)

Code : Tout sélectionner

body
{
background-color: #000000;
margin: 0;
padding: 0;
}
.contenu
{
margin: 0;
padding: 0;
height: 100%;
width: 800px;
border-spacing: 0;
border: 0;
}
.joker
{
width: *px;
}
.header
{
margin: 0;
padding: 0;
height: 220px;
width: 800px;
background-image: url(images/haedermodif.jpg);
background-repeat: no-repeat;
}
.menu01
{
width: 25px;
height: 800px;
background-image: url(images/menugauche.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.menu02
{
width: 150px;
height: 800px;
background-image: url(images/menucentre.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.menu03
{
width: 25px;
height: 800px;
background-image: url(images/menudroit.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.zone
{
width: 600px;
height: 800px;
background-image: url(images/zonetexte.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.footer01
{
width: 800px;
height: 130px;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.footer02
{
width: 800px;
height: 130px;
padding: 0;
margin: 0;
border-spacing: 0;
border: 0;
}
.jakfoot
{
width: 176px;
padding: 0;
margin: 0;
}
.footer03
{
width: 468px;
height: 30px;
padding: 0;
margin: 0;
}
.ban
{
width: 468px;
height: 60px;
padding: 0;
margin: 0;
vertical-align: top;
text-align: left;
}
.footer04
{
width: 468px;
height: 40px;
padding: 0;
margin: 0;
vertical-align: top;
}
.text {
	text-align: left;
	vertical-align: top;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
}

.text a {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: none;
}

.text a:hover {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: underline;
}
.copyright {
	padding-bottom: 10px;
	text-align: center;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
}

.copyright a {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: none;
}

.copyright a:hover {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d1b5a5;
	text-decoration: underline;
}
.info2
{
text-align: left;
vertical-align: top;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
a.info 
{
text-decoration: none;
border: 0;
margin: 0;
padding: 0;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
margin: 0;
border: 0;
padding: 0;
}
a.info:hover span {
display: inline;
position: absolute;
background: orange;
text-align: left;
vertical-align: top;
color: #d1b5a5;
width: 198px;
height: 98px;
text-decoration: none;
margin: 0;
border: 0;
padding: 0;
}
img.map
{
height: 100px;
width: 100px;
border: 0;
padding: 0;
margin: 0;
}

et le tableau en html

Code : Tout sélectionner

<table style="width: 600px; height: 540px; border: 0; border-spacing: 0; vertical-align: center;" cellspacing="0" cellpadding="0" ><tr style="height: 20px;"><td> </td><td class="text"></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=-1">Haut-droite</a></td><td></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: ville de cicom Clan: libertin Guilde : la f&eacute;d&eacute;ration des 400 lieues Prime: 500" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: NSA Nom: ville de NSA Clan: neutre  Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: Neckrar </p><p class="info2">Nom: Neckrasorus </p><p class="info2">Clan: neutre </p><p class="info2"> </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: Ogui Nom: ville de Ogui Clan: neutre  Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=0">Gauche</a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: cicom </p><p class="info2">Nom: Défenseurs du sud! </p><p class="info2">Clan: libertin </p><p class="info2">Guilde : la f&eacute;d&eacute;ration des 400 lieues </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=0">Droite</a></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: la cité des dieux Clan: libertin Guilde : la f&eacute;d&eacute;ration des 400 lieues Prime: 20" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: silk Nom: ville de test3 Clan: libertin Guilde : la f&eacute;d&eacute;ration des 400 lieues Prime: 0" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 20px;"><td></td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=1">Bas-gauche</a></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=1">Bas-droite</a></td><td></td></tr></table><br /><p class="text"><a href="controlc.php">Retour</a><br /></p></td></tr></table>

Voila merci pour toute votre aide! Je mets résolu!

Positionement et notre cher IE...

Qui est en ligne