28172 sujets

CSS et mise en forme, CSS3

[Résolu] Anomalie visuelle, problème de position ?

Bonjour.

Je suis en train d'essayer de créer un pied de page enrichi. J'ai donc étendu l'ancien en largeur et en haut, mais j'obtiens une drôle d'anomalie que je n'arrive pas à m'expliquer. Une image vaudra bien des discours :

http://pix.toile-libre.org/upload/original/1369408580.png

Voici le code CSS relatif au pied :


/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
nav[role=navigation] { background: url(library/images/nav-bottom.png) no-repeat left bottom; padding-bottom:26px;  margin-left:-18px; } 
nav[role=navigation] { background: url(library/images/nav-bottom-fill.png) repeat bottom; padding-bottom:26px; margin-left: 0px; }
	nav[role=navigation] div.menu { background: url(library/images/nav-bottom-right.png) no-repeat right bottom; border-top:4px solid #fde979; box-shadow:inset 0 1px 0 #000; padding-left:15px; padding-right:15px; padding-bottom:30px; margin-right:-18px; margin-bottom:-26px; }
	nav[role=navigation] ul.menu { 
		display:block;
	}
... ... ...


Et le html ad-hoc :


	<footer id="colophon" role="contentinfo">
       <div class="footer-wrap">
<div id="site-generator">1ère ligne<br /> 2ème ligne<br /> 3ème ligne<br /> 4ème ligne</div>
      </div>
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

.... ....

</body>
</html>


Pourriez-vous me donner une piste pour corriger ce problème ? Merci.

Edition 1: j'ajoute d'autres morceaux du code css, au cas où... J'ai bien compris que le problème vient de du repeat de .footer-wrap { background: url(library/images/nav-bottom.png) repeat left bottom; ...} mais si je mets "no-repeat", alors nav[role=navigation] { background: url(library/images/nav-bottom-fill.png) repeat bottom; padding-bottom:26px; margin-left: 0px; } ne remplit plus la totalité du footer et je me retrouve avec un blanc...

/******************************************************************/
@import url(library/css/default.css);
@import url(http://fonts.googleapis.com/css?family=Anton);
/******************************************************************
GENERAL LAYOUT STYLES
******************************************************************/

body {
	
}

#container, .wrap { 
	width: 96%;
	margin: 0px auto;
	padding: 0 2%;
	max-width: 80%; /* remove or edit to adjust width */
}
	
	/* layout options ( all have margins right & left of 1%) */
	.col60 { width: 6.333%; } /* width 60px / grid_1 */
	.col140 { width: 14.667%; } /* width 140px / grid_2 */
	.col220 { width: 23.0%; } /* width 220px / grid_3 */
	.col300 { width: 31.333%; } /* width 300px / grid_4 */
	.col380 { width: 39.667%; } /* width 380px / grid_5 */
	.col480 { width: 48.0%; } /* width 480px / grid_6 */
	.col540 { width: 56.333%; } /* width 540px / grid_7 */
	.col620 { width: 64.667%; } /* width 620px / grid_8 */
	.col700 { width: 73.0%; } /* width 700px / grid_9 */
	.col780 { width: 81.333%; } /* width 780px / grid_10 */
	.col860 { width: 89.667%; } /* width 860px / grid_11 */
	.col940 { width: 98.0%; } /* width 940px / grid_12 */
	
	/* layout & column defaults */
	.col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { display: inline; float: left; margin-left: 1%; margin-right: 1%; position: relative; }
	
	/* default styles & fixes */
	#main { margin-left: 0; } /* fixes alignment (defaulted at col620) */
	#sidebar { margin-right: 0; } /* fixes alignment (defaulted at col300) */

/******************************************************************
FOOTER STYLES
******************************************************************/

footer[role=contentinfo] {
	padding:1.2em 0;
	background: #fff;
	border:1px solid #e1e3e4;
	border-top:none;
	
}

	.footer-wrap {
		 background: url(library/images/nav-bottom.png) repeat left bottom; 
		 padding-bottom:35px;  
		 margin-left:-18px;
	}
			
	.attribution {
		float:none;
		text-align:center;
	}
	
	#site-generator {
		background: url(library/images/nav-bottom-right.png) no-repeat right bottom; 
		border-top:5px solid #f7df2b; 
		box-shadow:inset 0 1px 0 #000; 
		padding-top:12px;
		padding-left:15px; 
		padding-right:15px; 
		padding-bottom:39px; 
		margin-right:-18px; 
		margin-bottom:-35px;
		text-align:center;
		color:#fff; 
		font-size:10px;
		text-transform:uppercase;
		letter-spacing:1px;
	}
	
	#site-generator a {
		color:#fff;
		text-decoration:none;
	}
	
		#site-generator a:hover {
			text-decoration:underline;	
		}

Modifié par cosimo (30 May 2013 - 21:17)
Hello
As-tu teste avec un outil tel que "firebug" sous Firefox? Ça t'aiderais à faire des testes pour trouvé la bonne combinaison facilement. Parce que là juste avec ton code c'est difficile de trouvé une solution.
J'ai regardé avec Firebug, mais je ne vois rien de bizarre ?
Modifié par cosimo (25 May 2013 - 21:06)
Bonjour,

Je dirais simplement que ton image est trop courte?
Tu peux tenter de la séparer pour avoir un morceau que tu peux mettre en repeat afin de remplir l'espace entre les 2 images des bords (un pixel de largeur suffit ) comme ca pas de souci avec la largeur du footer, pour ce qui concerne l'image au moins Smiley rolleyes
ce serait possible sur le footer je pense pour éviter le multi-background en remplacent son padding par un border adapté.

et je dois dire que je n'ai jamais vue ca mais heu...c'est pourquoi que c'est fait pour?
<html class=" js no-flexbox canvas canvastext postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache" lang="fr-FR"> … </html>
hum mais c'est déjà le cas. Ce n'est pas une image monolithique, c'est nav-bottom.png à gauche, nav-bottom-fill.png au milieu & nav-bottom-right.png en cloture.

Le problème se situe dans la relation entre nav-bottom.png & nav-bottom-fill.png. Actuellement mon nav-bottom.png est en "repeat" (ce qui cause l'apparition de cet artefact / seconde occurence). Sans ce repeat, nav-bottom-fill.png ne remplit pas tout l'espace et s'arrête au niveau de l'artefact / anomalie.
Tybar a écrit :

et je dois dire que je n'ai jamais vue ca mais heu...c'est pourquoi que c'est fait pour?
&lt;html class=&quot; js no-flexbox canvas canvastext postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache&quot; lang=&quot;fr-FR&quot;&gt; … &lt;/html&gt;


C'est Modernizr.
jb_gfx a écrit :
Y'a des designers qui devraient laisser certaines de leur idées dans leur tête...

Arf... Smiley lol
Je ne crois pas que Craig Buckler soit (web)designer Smiley cligne
Sinon, tu peux développer ton point de vue ?
Oui je peux. Smiley smile

Je veux simplement dire qu'à trop vouloir en faire avec du CSS on se retrouve avec des solutions peu souples, difficiles à maintenir et qui ressemble plus à de la bidouille qu'autre chose. Les CSS c'est bien en abuser ça craint. Smiley lol

PS : Joyeux anniversaire. Smiley cligne
jb_gfx a écrit :
Oui je peux. Smiley smile
Je veux simplement dire qu'à trop vouloir en faire avec du CSS on se retrouve avec des solutions peu souples, difficiles à maintenir et qui ressemble plus à de la bidouille qu'autre chose. Les CSS c'est bien en abuser ça craint. Smiley lol

Je comprends et accepte volontier le point de vue, merci d'être repassé Smiley cligne
jb_gfx a écrit :
PS : Joyeux anniversaire. Smiley cligne

Merci Smiley cligne
Bonsoir,

Je me permet d'insister un peu désolé, cette fois j'ai bien regardé ton footer de fond en comble et je n'ai trouvé aucune image nav-bottom-fill.png alors je suis aller voir dans le css et même chose, j'en ai bien trouvé un qui sert pour le menu mais aucune image pour remplir le centre de ton footer visiblement.

jb_gfx a écrit :
C'est Modernizr.

Merci pour le tuyau ^^
Modifié par Tybar (26 May 2013 - 01:51)
Désolé pour le retard, j'étais très pris. J'ai résolu le problème en agrandissant l'image, tout simplement...
Sujet clos
Aller à