28173 sujets

CSS et mise en forme, CSS3

Bonjour,
IE me rajoute un pixel entre le div haut et le div centre de toutes mes pages. http://www.ruedesboulets.com
Pour info, j'ai une bordure sur le haut du div centre de 4 px.
Pour tous les autres navigateurs, l'affichage est correct.
le début de la feuille de style est

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#haut {
height: 100px;
}
#centresommaire {
background-color:#fff;
padding-top: 13px;
padding-bottom: 13px;
border-top: 4px solid #666666;
border-bottom: 4px solid #666666;
}


le début du code html

<div id="conteneur">
<!-- Haut de la page -->
<div id="haut">
<img border="0" src="/IMG/logo.jpg" width="750" height="100" />
</div>

<div id="centresommaire" >....


J'ai d'ailleurs le même problème avec un div flottant dans la même page !
.bloc_sommaire {
float: left;
width: 158px;
padding-left:14px;
padding-right:14px;
}


Quelle erreur ai-je commise ?
Merci d'avance.
Modifié par Rue des boulets (11 Oct 2006 - 14:20)
Bonsoir Rue des boulets,

En te souhaitant la bienvenue sur ce forum, j'ose malgré tout espérer que tu y feras mentir ce pseudonyme peu avantageur. Smiley cligne

Pour commencer à faire les choses bien, je me permets de te signaler que les règles du forum, et en particulier celle-ci, demande que l'on utilise un certain balisage pour poster du code dans un message, afin de contribuer à la lisibilité générale des interventions sur le forum.

Pourrais-tu s'il te plait éditer ton premier message pour prendre en compte cette règle ? Merci d'avance. Smiley smile
Au fait (même si rien à voir), bravo pour la vidéo de la Réunion. Belles images, et le choix de musique était très sympa (même si je préfère Silence et Solcarlus à Métisse, pour ma part). Smiley smile



Pour revenir à ton problème : si tu ajoutes une bordure de 1 pixel (en rouge par exemple) à ta div#haut, tu verras que l'espace excédentaire correspond à un espace interne à ce bloc.

Il semblerait que ce soit lié à la gestion (buguée dans ce contexte) des espaces non significatifs du code (espaces, tabulations, retours à la ligne) entre la fin de l'image et la balise fermant l'élément div. Il suffit alors de supprimer ces espaces :
<img src="..." alt="Rue des boulets" /></div>



Voilà pour ce petit problème.
Au fait, est-ce qu'il n'aurait pas été plus juste de placer cette image (avec son texte alternatif correctement renseigné) dans un élément h1 plutôt que dans un conteneur générique ?
Administrateur
Rue des boulets a écrit :
PS : désolé pour la première mise en forme. Il Faut bien que je sois fidèle à mon pseudo.

Hello Rue des boulets,

En fait, au-lieu de créer un nouveau message identique, il te suffisait - comme te l'a indiqué mpop - d'éditer (relire les règles ou la FAQ) ton premier message Smiley sweatdrop
Rhôô, j'étais pourtant sûr qu'il allait faire mentir son pseudonyme. Smiley cligne

(humour, hein, humour !)
Bonjour,
La lecture en diagonale, je la pratique comme beaucoup d'entre nous.
Smiley cligne
Mais un boulet peut-il progresser ? Je vais essayer.
Dans tous les cas merci. J'ai résolu le problème.
Il suffisait d'écrire sur une seule ligne
<div id="haut"><img border="0" src="/IMG/logo.jpg" alt="Rue des boulets" width="750" height="100" /></div>

Et le problème du pixel supplémentaire est réglé.
Je reviendrais donc... Le boulet qui doit à présent éditer son premier message pour le marquer du tag [résolu].
Rue des boulets a écrit :
Le boulet qui doit à présent éditer son premier message pour le marquer du tag [résolu].

ET qui doit aussi éditer le contenu de ce premier message pour mettre en forme le code d'une manière correcte, comme demandé à deux reprises.

Heu... j'ai l'air d'en avoir marre de me répéter, là ?
Bon, je sens que je vais faire la correction moi-même, sinon ça risque de ne jamais être fait.
Modifié par mpop (11 Oct 2006 - 12:02)