[résolu] A la recherche du bug perdu...

Bonsoir,

Je paufine mon thème pour Dotclear 2, il est dorénavant en conformité xhtml strict, mais j'ai un problème étrange dû à je-ne-sais-quoi niveau mise en page.

Vous pourrez le constater en allant sur mon blog avec Firefox (pour voir le problème, il faut que l'image soit 'fixed', et IE ne gère pas), en réduisant la fenêtre de navigation, puis en scrollant. J'ai tout de même fait une petite capture pour bien comprendre.

Bien que le bas de page (footer) soit transparent, comme on le voit sur la partie gauche de l'image avec les feuilles de bloc-note, la partie droite chevauche l'image de fond (le taille-crayon sur l'exemple), créant une rupture peu agréable à l'oeil. En effet, un trait de couleur crème (#fec) semble partir de la droite du footer jusqu'à l'infini vers la droite, couvrant ce qu'il y a en-dessous, comme le montre ce second exemple.

Ne trouvant pas l'origine de la chose, j'ai pensé poster le sujet ici. Voici les liens pour les fichiers entiers de layout et de style.

J'ai trifouillé les CSS en tous sens, mais là, je sèche. De où cela peut-il provenir ? mystère.
Si vous comprenez l'origine du problème, je serai ravi de savoir. Merci.

Modifié par Nawak (08 Mar 2007 - 04:00)

Quelque part, ça me "rassure" de voir que je ne suis pas le seul à ramer (26 lectures, 0 réponses, c'est bien qu'il y a quelque chose de bizarre).

Jolie manière de faire un « up » sur un sujet.

Pour ton problème : ça n'est pas le pied de page qui cache l'image de fond, mais ton body qui s'arrête au tout début du pied de page.

Pour information, ton pied de page a une hauteur de 0px, car tous les éléments qu'il contient sont positionnés (assez étrangement, d'ailleurs) en absolu.

Ok,

Je comprend maintenant le pourquoi de la chose. Maintenant, comment y remédier ?

Pour le positionnement "étrange" du footer, en fait, c'est parce que les "cartouches" en bas à droite (rss et atom) sont composés de 3 images chacune, avec leur lien propre. Je n'arrivais pas à les mettre en "bout-à-bout", un écartement de quelques pixels subsistait toujours. J'ai donc placé les divers éléments dans une liste, de la manière suivante :

[b]_footer.html[/b]
<ul id="footer">
	<li id="img_1"><a href="{{tpl:BlogURL}}feed/rss2"><img src="{{tpl:BlogThemeURL}}/img/rss_01.png" alt="news " title="News au format rss"/></a></li>
	<li id="img_2"><a href="{{tpl:BlogURL}}feed/rss2/comments"><img src="{{tpl:BlogThemeURL}}/img/rss_02.png" alt="com. " title="Commentaires au format rss"/></a></li>
	<li id="img_3"><a href="http://www.commentcamarche.net/www/rss.php3"><img src="{{tpl:BlogThemeURL}}/img/rss_03.png" alt="rss" title="Qu'est-ce qu'un flux rss ?"/></a></li>
	<li id="img_4"><a href="{{tpl:BlogURL}}feed/atom"><img src="{{tpl:BlogThemeURL}}/img/atom_01.png" alt="news " title="News au format atom"/></a></li>
	<li id="img_5"><a href="{{tpl:BlogURL}}feed/atom/comments"><img src="{{tpl:BlogThemeURL}}/img/atom_02.png" alt="com. " title="Commentaires au format atom"/></a></li>
	<li id="img_6"><a href="http://fr.wikipedia.org/wiki/Atom"><img src="{{tpl:BlogThemeURL}}/img/atom_03.png" alt="atom" title="Qu'est-ce qu'un flux atom ?"/></a></li>
	<li id="img_7"><a href="mailto:intomybox&#64;free&#46;fr?subject=A letter into my box..."><img src="{{tpl:BlogThemeURL}}/img/mailbox.png" alt="mail" title="Mon adresse mail"/></a></li>
	<li id="img_8"><a href="http://doc.dotclear.net/2.0/"><img src="{{tpl:BlogThemeURL}}/img/dotclear.png" alt="Dotclear" title="{{tpl:lang Powered by}} Dotclear 2 beta 5.4"/></a></li>
</ul>

Ainsi, j'inclus le fichier en fin de page principal avec un include (moteur DC2), puis j'effectue le placement avec le CSS pour obtenir ce que je désire :

#footer {
	position: relative;
	background: transparent;
	border-top: 1px solid #985;
	}

#footer li, #footer a {display: block;}
#footer li {
    position: absolute;
    list-style: none;
    background-image: none;
}

#footer img {margin: 10px 0 10px 0;}
#img_1 {right: 337px;}
#img_2 {right: 322px;}
#img_3 {right: 274px;}
#img_4 {right: 254px;}
#img_5 {right: 239px;}
#img_6 {right: 191px;}
#img_7 {right: 93px;}
#img_8 {right: 10px;}

Il est fort possible que j'ai cherché à faire compliqué, étant donné que je suis assez novice dans l'apprentissage css/xhtml. A dire vrai, je ne trouve pas cela élégant moi-même. J'avais aussi pensé à caser ça dans un tableau, à l'ancienne. Mais si tu as un lien ou une méthode plus appropriée pour parvenir à mes fins, je suis preneur.

Merci de t'être interessé à mon cas, ça m'a déjà permis de comprendre.
Bonne soirée.
Modifié par Nawak (05 Mar 2007 - 18:44)

Pour l'écartement de quelques pixels qui subsiste entre les images (en affichage de type en-ligne), une piste :
Impact sur le rendu de la mise en forme du code HTML.

Merci,

Visiblement, le fait que le <div> du "footer" soit placé dans la "page" me pose divers problèmes de positionnement, que je me suis trouvé incapable de régler. Du coup, j'ai procédé autrement, en plaçant le pieds de page juste aprés... la page, directement dans le <body>. Du coup, j'ai :

<body>
(...)
<div id="footer"></div></div> <!-- End #page -->
<div id="cartouches"><a href="http://intomybox.free.fr/dc/index.php/feed/rss2"><img src="/dc/themes/intomybox/img/rss_01.png" alt="news " title="News au format rss"/></a><a href="http://intomybox.free.fr/dc/index.php/feed/rss2/comments"><img src="/dc/themes/intomybox/img/rss_02.png" alt="com. " title="Commentaires au format rss"/></a><a href="http://www.commentcamarche.net/www/rss.php3"><img src="/dc/themes/intomybox/img/rss_03.png" alt="rss" title="Qu'est-ce qu'un flux rss ?"/></a>
<a href="http://intomybox.free.fr/dc/index.php/feed/atom"><img src="/dc/themes/intomybox/img/atom_01.png" alt="news " title="News au format atom"/></a><a href="http://intomybox.free.fr/dc/index.php/feed/atom/comments"><img src="/dc/themes/intomybox/img/atom_02.png" alt="com. " title="Commentaires au format atom"/></a><a href="http://fr.wikipedia.org/wiki/Atom"><img src="/dc/themes/intomybox/img/atom_03.png" alt="atom" title="Qu'est-ce qu'un flux atom ?"/></a>
<a href="mailto:intomybox&#64;free&#46;fr?subject=A letter into my box..."><img src="/dc/themes/intomybox/img/mailbox.png" alt="mail" title="Mon adresse mail"/></a>
<a href="http://doc.dotclear.net/2.0/"><img src="/dc/themes/intomybox/img/dotclear.png" alt="Dotclear" title="Propulsé par Dotclear 2 beta 5.4"/></a></div>
</body>

Et je l'ai placé via "#cartouches" dans le style. Aprés moults essais, je suis arrivé à mes fins, mais alors que tout est ok sous Firefox, comme d'habitude, sur IE, non. Regardez le bas de ma page avec l'un et l'autre, au niveau de la tâche de café, vous verrez...

Comment puis-je remédier au problème ?
Merci.
Modifié par Nawak (06 Mar 2007 - 19:46)