28173 sujets

CSS et mise en forme, CSS3

Espace entre "div"

Bonjour,

Voici le contenu de BODY dans ma page "index.php"



<div id="haut">
	<div id="logo"><a href="http://inwebwetrust.info" target="_self"><img src="img/logo.jpg" alt="logo du Pub le Castel" class="logo" /></a></div>
	<div id="soiree"><? include ('inc/soiree.php'); ?></div>
</div>
<div id="center">
	<div id="menu"><? include ('inc/menu.php'); ?></div>
	<div id="content"><?php include($_GET['file'].'.php'); ?></div>
</div>
<div id="footer"><? include ('inc/footer.php'); ?></div>


Les div "logo" et "menu" font 200px de large.
Les div "soiree" et "content" font 680px de large.
Le div "footer" fait 880px de large.

Hors, quoique je fasse, j'ai un espace d'environ 5px de large entre les balises "logo" et "soiree" et les balises "menu" et "content".

Voici mon fichier css :


html,body {font-family:"century gothic", "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, "Sans-Serif" ; background-color:#ddd ; width:880px ; margin-left:auto ; margin-right:auto ; font-size:11px}
blockquote {position:relative ; margin:0 ; border:0 ; padding:0}

a:link {color: #FF751A ; text-decoration:none ; font-size:12px}
a:visited {color: #FF751A ; text-decoration:none ; font-size:12px}
a:hover {color:#2f689f ; text-decoration:none ; font-size:12px}

a:link.fond_orange {color: #fff ; text-decoration:none ; font-size:10px}
a:visited.fond_orange {color: #fff ; text-decoration:none ; font-size:10px}
a:hover.fond_orange {color:#2f689f ; text-decoration:none ; font-size:10px}

#haut {margin:0 ; border:0 ; padding:0 ; width:100% ; height:120px}

#logo {float:left ; margin:0 ; border:0 ; padding:0 ; width:200px ; height:120px}
img.logo {border:0}

#soiree {margin:0 0 0 200px ; border:0 ; padding:10px 0 ; width:680px ; height:100px ; background-color:#000 ; color:#ffffff}
img.soiree {margin:0 5px 0 0 ; border:0 ; padding:0 ; width:78px ; height:100px}
.photo_soiree {margin:0 ; border:0 ; padding:0}
.titre_soiree {margin:0 0 10px 0 ; border:0 ; padding:0 ; line-height:10px ; font-weight:bold}
.article_soiree {margin:0 ; border:0 ; padding:0 ; line-height:10px}
.soiree {float:left ; margin:0 ; border:0 ; padding:0 ; width:330px ; height:auto}

#center{float:left ; margin:0 ; border:0 ; padding:0 ; width:880px}

#menu {float:left ; margin:0 ; border:0 ; padding:10px ; height:550px ; width:200px ; background-color:#ff751a ; color:#ffffff ;  voice-family:"\"\""; voice-family:inherit}
html>body #menu {width: 180px}
img.menu {margin:5px 0 0 0 ; border:0 ; padding:0 ; width:180px ; height:25px}
img.news {margin:0 5px 0 0 ; border:0 ; padding:0 ; width:44px ; height:28px ; vertical-align:top ; float:left}
.titre_news {margin:0 0 10px 0 ; border:0 ; padding:0 ; line-height:10px ; font-weight:bold}
.article_news {margin:0 ; border:0 ; padding:0 ; line-height:10px ; text-align:justify}
.date_news {margin:0 ; border:0 ; padding:0 ; text-align:right}
.photo_news {margin:0 ; border:0 ; padding:0}

#content {margin:0 ; border:0 ; padding:0 ; color:black ; width:auto ; height:auto ; overflow:auto ; background-color:#115544}
.trombi {width:665px ; text-align:center ; background-color:#000 ; overflow:auto ; padding:0 ; }
.bottom_trombi {width:665px ; height:300px ; text-align:center ; background-repeat:no-repeat ; background-image:url(img/bg.jpg)}
.carte {margin:0 ; border:0 ; padding:10px 0 ; width:100% ; height:550px ; background-image:url("img/fond_carte.jpg") ; background-repeat:no-repeat}
.mail {margin:0 ; border:0 ; padding:10px}

#footer {clear:left ; margin:0 ; border:0 ; padding:0 ; width:880px ; text-align:center}
.font_bleu {color:#0066CC ; line-height:20px}



Qu'elqu'un peut-il m'aider à y voir plus clair svp, je butte sur ce problème depuis hier et j'ai tout essayé.

A savoir que le problème se manifeste sur Internet Explorer et pas sur Firefox. La petite barre verte verticale entre les deux div centraux, c'est la couleur de fond de mon div "content".

D'avance merci pour la solution,

Vince. [code]
Modifié par levince (06 Jul 2006 - 19:19)
Hello,

tu devrais surtout formater ton post selon les regles (Balises codes entre autres), personne lira sinon.
Modifié par Hum (06 Jul 2006 - 18:37)
Effectivement, j'aurais pu...

Je ferai attention la prochaine fois. Désolé.
Modifié par levince (06 Jul 2006 - 19:21)
Commence par là, tu as des erreurs dans ton code, des redondances ds le CSS etc.

ex : -ton <head> commence par une balise de fermeture et se ferme jamais...
-le doctype a un probleme...

Avec de la chance... sinon initialise tes marges et padding avec ça :

*{margin: 0; padding:0;}

Et fais le menage, ne declare des valeurs de marges qu'aux elements qui en ont besoin.

Validateur html
Validateur CSS
Modifié par Hum (06 Jul 2006 - 20:55)
levince a écrit :
Hors, quoique je fasse, j'ai un espace d'environ 5px de large entre les balises "logo" et "soiree" et les balises "menu" et "content".

Allons allons, n'exagérons rien : cet espace ne fait que trois pixels de large, car il s'agit du fameux bug du Three Pixel Jog.

Plein d'infos sur ce bug dans les messages précédents de ce forum (petite recherche ?) ou sur le web. Mais pas de solution connue, il me semble, sauf celle d'éviter les conditions dans lesquelles ce bug se manifeste.


Sinon, pourrais-tu éditer le message dans lequel tu donnes une adresse pour voir la page de test ? L'URL passe mal lors du traitement du message (s'il s'agit d'un lien dont le texte est l'URL elle-même, il ne faut pas utiliser les balises BBcode pour ce lien).
Edit : de plus, il vaut mieux ne pas poster de grande image directement sur le forum. Le forum offre la possibilité, en insérant une image, de générer une vignette. Merci de l'utiliser dès que nécessaire.
Modifié par mpop (06 Jul 2006 - 21:27)
Administrateur
mpop a écrit :
Mais pas de solution connue, il me semble, sauf celle d'éviter les conditions dans lesquelles ce bug se manifeste.

En fait, il existe des solutions, toutes plus ou moins bidouillées, qui sont de donner le Layout au conteneur, en général à l'aide de la propriété CSS "zoom".
Modifié par Raphael (06 Jul 2006 - 22:03)
Raphael a écrit :
En fait, il existe des solutions, toutes plus ou moins bidouillées, qui sont de donner le Layout au conteneur, en général à l'aide de la propriété CSS "zoom".

Merci pour l'info. Smiley smile
Sujet clos
Aller à