18041 sujets

Questions générales et questions de débutants

Décallage des blocs sous ie6 lorsque j'insère une image de fond

Bonjour à tous, ça faisait bien longtemps que je n'avais pas posté car je trouve généralement des solutions grâce au formulaire de recherche. Cependant, aujourd'hui. Je bloque. Smiley ohwell

j'ai créé un bloc conteneur avec dedans 3 blocs entete, centre, pied. Tout ce qu'il y a de plus commun quoi mais avec chacun une image de fond.

margin, padding et borders sont à 0.

résultat nickel sous ff, safari,ie7,opéra mais met un espace sous ie6.

Jz crois avoir fait le tour de mes connaissance mais je reste bloqué. Si une ame charitable voulait bien me dépatouiller, ce serait cool.

Merci Smiley cligne 

/* Structure générale du site */
html { height:100%; font-size:62.5%; }
body { height:100%; font-family: Arial, "Trebuchet MS"; font-size: 1.2em; text-align: center; background-image:url(http://www.belle-epoque-sxm.com/images/fond.gif); background-position:top; background-repeat:repeat; margin: 0px; padding: 0px; color:#FFFFFF; }
div,form,ul,li,p { margin:0; padding:0; border:0; }
#conteneur { width:913px; height:auto; text-align:left; margin: 0 auto; position:relative; }
#entete { width:913px; height:209px; }
#centre { width:913px; height:auto; background-image:url(http://www.belle-epoque-sxm.com/images/fond-centre.gif); background-repeat:repeat-y; background-position:center; }
#pied { width:913px; height:50px; text-align:center; color:#FFFF00; background-image:url(http://www.belle-epoque-sxm.com/images/fond-pied.gif); background-repeat:repeat-y; background-position:center; }





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>La belle epoque - Saint Martin</title>
<meta name="description" content="Le restaurant belle epoque a saint martin - sxm. Brasserie pizzeria sur la marina royale à marigot - saint martin" />
<meta name="keywords" content="restaurant,belle epoque,saint martin,sxm" />
<link href="http://www.belle-epoque-sxm.com/styles/general.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<!-- debut construction de la page -->
<div id="conteneur">
<!-- debut construction de l entete -->
<div id="entete">
<img src="http://www.belle-epoque-sxm.com/images/fond-entete.jpg" alt="restaurant la belle epoque à Saint Martin" />
</div>
<div id="centre"><!-- Cadre centre -->
<br /><br />&nbsp;<br /><br />
</div>
<!-- FIN cadre centre -->
<!-- fin cadre bas -->
<div id="pied">
<br /><br />&copy;2009 La Belle Epoque<br /><br />
</div>
</div><!-- fin conteneur -->
</body>
</html>


page en question -> http://www.belle-epoque-sxm.com/

merci @ tous
Modifié par chooky (25 Aug 2009 - 17:09)
Je n'ai pas les bon outils sous la main pour débugger ta css sous IE6, mais tu peux :

- Mettre une couleur différente par fond de chaque DIV.

Comme ça, tu sauras d'où viens cet espace noir entre tes div. Ensuite, reste plus qu'à voir quel élement peut bloquer.

Je te conseille de lire ces différents article sur le haslayout pour comprendre IE

AlsaS
Blog & Blues
merci super_baloo de t'être penché sur le prob Smiley cligne

quand à mettre des couleurs de fond sur chaque bloc, c'est bien la première chose que j'ai faite.
mais et il n'apparait aucun espace. C'est uniquement lorsque le fond est une image Smiley ohwell

je pensais un bug de ie6 car l'affichage réagit exactement comme si il existais un margin ou un padding sur l'image de fond. hors sauf erreur de ma part, ça n'existe pas un padding et un margin sur une image de fond? Smiley confus

je vais de ce pas lire l'article sur les layouts Smiley cligne merci @ toi
Modifié par chooky (25 Aug 2009 - 17:51)
Tu peux toujours tenter de mettre un background-position: top left;, on ne sait jamais Smiley ohwell
merci pour ta réponse, je viens d'essayer ça ne change rien. Smiley confus

par contre, à super_baloo, c'est pas mal compliqué les articles sur le haslayout. je ne suis pas sûr de tout comprendre, et ne suis pas sûr que ça s'adresse vraiment dans ce cas de figure.
On dirait plutôt que ça concerne les les blocs non dimentionnés qui comprennent des objets flottants. Smiley ohwell
Modifié par chooky (25 Aug 2009 - 18:01)
Oops, on dirait que tu travaille sur ton site, je voulais regarder, mais y'a des erreur de php Smiley smile

Pour infos pour débugger les css pour IE, j'utilise IE tester avec la debug bar
Modifié par Super_baloo8 (25 Aug 2009 - 20:57)
voui, je devais surement être en train d'envoyer .... mais c'est bon là, si tu veux tu peux aller jetter un oeil dis ... ya pas de problème Smiley ravi

bon je continu, j'ai pas trouvé de soluce, ça marche vraiment partout nickel sauf sur ie6 Smiley ohwell toujours Smiley rolleyes

@+ Smiley cligne
Smiley confused zut !!! j'étais m'étais laissé allé à naviguer sur le forum sans aller controler mon travail fait trop rapidement.

Smiley wingol
Et finalement non, il existe encore un bug, met padding margin border 0 sur ton image en haut (div #entete)

Profites en pour marquer en dimension plein ton image (indique des dimensions).

Et pour les essais supprime ce javascript qui empêche (sans désactiver le JS) de débugger tranquillou Smiley smile
non non ... il est toujours bel et bien là sous ie6 .... mais après 4h00 de recherche ... je lui ai dit que j'avais de toute façon pas besoin de lui et que si il continuait j'allait lui mettre des <table> et des <td> et des <tr> de partout.

normalement, au bout de 24h00 il remarche tout seul. alors je continue à remplir puisque tout est nickel sur les autres navig Smiley ohwell
Ouaip, on arrête pas de se croiser. Phénomène d'Aout ....
j'ai fait tout comme tu as dis ... c pareil Smiley smile
J'ai trouvé, supprime ta div #entete.


<!-- debut construction de l entete -->

<img id="entete" src="http://www.belle-epoque-sxm.com/images/fond-entete.jpg" alt="restaurant la belle epoque à Saint Martin" width="913" height="209" />

<div id="centre"><!-- Cadre centre -->


Ensuite, dans la CSS supprime #entete et remplace par :

img#entete {
	display: block;
	border: none;
	margin: 0;
	padding: 0;
}
Salut super_baloo, s'cuse je me réveille juste Smiley biggol

j'y suis allé de ce pas essayer et ça fonctionne nickel ,t'es super_balèze super_baloo Smiley cligne

j'ai noté l'astuce dans petit qu'a le pain pour les prochaines fois où j'aurais à utiliser une image qui tient tout un bloc. Smiley smile

Ben c'est cool ce que tu fais ... arriver à trouver le temps pour aider ceux qui sont en galère Smiley ravi

@+ sur alsa et merci encore pour ton aide Smiley hippy
Sujet clos
Aller à