18066 sujets

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

[Résolu] Problème de positionnement

Bonjour à toutes et à tous !

Je fais appel à vous pour comprendre un soucis auquel je suis confronté. Actuellement, je termine mon site ( http://drfv2.free.fr/ ). Or, sur toutes les pages qui le composent (une en exemple : http://drfv2.free.fr/15.html ) il y a une chose que je ne comprends pas. Voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Der Riesige Flughafen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 10;
padding: 10;
background-color: #999999;
}
#menu {
height: 50px;
background-color: #999999;
}
#centre {
background-color:#999999;
}
#pied {
height: 50px;
background-color:#999999;
margin: 0;
padding: 0;
}
img.main {
border : 10px solid #FFFFFF;
}
img.titre {
border : 0;
}
</style>
</head>
<body>
<div id="menu"><img class="titre" src="http://drfv2.free.fr/images/img15.jpg" width="640" height="50" alt="15" />
</div>
<div id="centre">
<img class="main" src="http://drfv2.free.fr/images/drf15.jpg" width="1163" height="642" alt="15" />
</div>
<div id="pied"><a href="http://drfv2.free.fr/14.html"><img class="titre" src="http://drfv2.free.fr/images/previous.jpg" width="150" height="50" alt="previous" /></a>
</div>

</body>
</html>


Entre les <div> "centre" et "pied" il y a un espace qui ne figure nulle part (cela apparaît à la fois sous FF et IE). Sous IE6, l'espace (de 3 pixels tout rond) apparaît également entre la <div> menu et la <div> centre. Est-il possible de faire disparaître cet espace pour coller mes <div>les unes aux contre les autres ?

Merci d'avance pour votre aide !

Fred
Modifié par Frd (01 Dec 2006 - 14:44)
Salut,

Tes div sont bien collées les unes aux autres (et tu aurais pu le voir en suivant les conseils de la faq).

Pour arriver au résultat que tu recherches (discutable, mais ce n'est pas la question), je pense qu'il devrait suffire d'appliquer "line-height: 1.0" aux endroits voulus.
Salut... Smiley cligne

Est-ce que tu pourrais donner des couleurs différentes à tes div ? Smiley murf
Car en l'état actuelle des choses, on a du mal à voir le problème rencontré ...
Tu nous fais du ton sur ton Smiley rolleyes

<Edit> bon ... ben ... grillée Smiley lol </Edit>
Modifié par Cygnus (28 Nov 2006 - 13:29)
Merci beaucoup pour vos réponses.

Comme souvent, on voit le bouton "Forum" mais pas celui de la "FAQ". Donc j'ai bien compris (ou du moins cru comprendre) que les navigateurs interprètent certaines marges différemment (prière d'excuser le language béotien, n'est pas spécialiste qui veut Smiley biggrin ). J'ai aussi trouvé un post sur ce même forum, qui parle d'un fameux espace de 3 pixels qui apparait dans certains cas de figure.

Je te l'accorde, Cygnus, le ton sur ton n'est pas du meilleur effet pour se rendre compte du problème Smiley cligne . Voici donc, pour se rende compte du soucis :

http://drfv2.free.fr/img/test0.jpg

http://drfv2.free.fr/img/test1.jpg

Eldebaran, en quoi le résultat auquel je souhaite arriver est-il discutable ?
Modifié par Frd (28 Nov 2006 - 14:02)
On s'approche ! Sous Firefox, l'espace se réduit à 1 pixel, tandis que sous Internet Explorer, il reste identique. (Je n'ai appliqué line-height que sur la page donnée dans mon premier post, pour essayer). Si vraiment aucune solution n'existe, j'appliquerai un padding à chaque <div> pour avoir un espace à chaque fois. Ceci ne me dit pourtant pas en quoi le fait de vouloir coller 3 <div> l'une contre l'autre est un choix discutable Smiley cligne
Frd a écrit :
Ceci ne me dit pourtant pas en quoi le fait de vouloir coller 3 <div> l'une contre l'autre est un choix discutable Smiley cligne
Tu as édité ton message pour ajouter cette question, je ne l'ai donc pas vue avant de poster le mien.

Je trouve ça discutable parce que le fait de ne pas laisser d'espace me parait un peu étouffant, mais ce n'est que mon opinion. Smiley smile
En effet, c'est la sensation qu'on peut avoir. Après, j'avoue que j'accorde beaucoup plus d'importance au contenu qu'au contenant (pas taper). Peut-être que je devrais envisager de faire une seule "barre de menu" à côté du numéro de la photo, histoire de faciliter la navigation. J'ai la tête dedans, et sans doute pas assez de recul pour rester logique de temps en temps. Mais cela serait plutôt l'objet d'un autre post dans une autre catégorie Smiley biggrin .

La chose qui m'échappe, c'est qu'entre les deux premières <div>, il n'y pas d'espace, elles sont belle et bien collées l'une à l'autre. Alors que les deux dernières <div> ne le sont pas, avec cet espace qui vient mettre son pixel de sel.
Suite des événements. Après moult recherches, j'ai repris le code à zéro. Je me suis aperçu que la mise en page changeait au moment de l'ajout d'un Doctype. Logique apparemment (j'ai appris ça il y a 5 minutes), et j'ai donc simplement changé de Doctype (HTML 4.01 Transitional), et voici le résultat :

http://drfv2.free.fr/test01.html

Sous Firefox, mes divs sont collées ensemble (youpi). Sous Internet Explorer, il y a un espace entre les divs, mais au moins c'est cohérent Smiley biggrin

Merci encore à celles et ceux qui m'ont aidé !
Sujet clos
Aller à