28172 sujets

CSS et mise en forme, CSS3

Ma configuration WP actuelle
- Version de WordPress : 2.6
- Thème utilisé : WP_Premium_(niss)_Slide_MenuImage
- Plugins en place : Akismet, Contact Form ][, Google Analytics for WordPress, podPress, Updated Today Banner FR
- Nom de l'hebergeur : ovh
- Adresse du site : http://www.jeanjacquescanaby.info/

Problème(s) rencontré(s) :

Bonjour tout le monde! Utilisateur de wordpress depuis la version 2.1, j'ai réalisé déjà un blog perso et mon portfolio sous WP. J'ai découvert récemment le thème “WP_Premium_(niss)_Slide_MenuImage”. Je fais face actuellement à un petit bug dont je n'arrive pas à trouver la cause.
Je m'explique :

Mon soucis se trouve dans le footer. Il y a un décalage au niveau d'un élément CSS. Malheureusement je ne suis pas assez bon en CSS pour résoudre cela. Je vous laisse voir sur la page d'accueil.
Je vous joint le CSS de mon footer, peut-être vous verrez le bug...



/*************************************
	Footer
**************************************/
#text-link-advertise {
	padding: 15px;
	text-align: left;
	clear: both;
	}

/*************************************
	Footer
**************************************/
#footer { 
	padding:  10px 0px 20px 0px;
	text-align: center;
	height:25px;
	clear: both;
	font-size:11px;
	}

#footer-wrap {
	width: 950px;
	margin: 0px auto;
}
#footer .copyright 		{ float:left; text-align:left;}
		.copyright a 	{  text-decoration:none;}
		.copyright a:hover {text-decoration:none; }
		
 	ul#nav-footer 				{ margin: 0 0 0 0; padding:0; float:right;  
								  font-size: 11px; font-weight:bold; text-align: right; text-transform:uppercase;}
	ul#nav-footer li 			{ padding: 5px 8px 5px 12px; list-style:none;  float:left; }
	ul#nav-footer li.nobg 		{ padding: 5px 8px 0px 12px;    }
	ul#nav-footer li a 			{ text-decoration:none; }
 	ul#nav-footer li a:hover 	{ }
 
 
.loginout {
	background: url(images/mini-loginout.gif) no-repeat left center;
	padding-left: 18px;
	padding-bottom: 2px;
	margin-left: 8px;
}

.admin_site {
	background: url(images/mini-blogroll.gif) no-repeat left center;
	padding-left: 12px;
	padding-top:5px;
	margin-left: 8px;
}

.stats {
	background: url(images/stats_img.png) no-repeat left center;
	padding-left: 15px;
	padding-top:1px;
	margin-left: 8px;
}


ainsi que le code de la page footer.php :



<div class="clearfix"></div>

</div>

<div class="container-bottom">

<div id="footer">

<div id="footer-wrap">

<?php wp_footer(); ?>

</div>
<p class="copyright">Propulsé par <a href="http://wordpress.org/">Wordpress</a> | Thème <a href="http://cssace.com/free-wp-premium-theme-is-here/">WP Premium</a> par <a href="http://wpremix.com/">WP Remix</a> | Traduction <a href="http://www.niss.fr/">(niss.fr)</a>. <br />
Copyright 2007. <?php bloginfo('name'); ?>. Tous droits réservés</p>
<ul id="nav-footer"> 
	<li class="<?php if (is_home()) { echo "current_page_item"; } ?>"><a href="<?php echo get_settings('home'); ?>">Accueil</a></li>		
	<?php wp_list_pages('title_li=&depth=1&exclude='); ?>
</ul>

<div class="right"><span class="loginout"><?php wp_loginout(); ?></span> <span class="admin_site"><a href="http://www.jeanjacquescanaby.info/wp-admin/">Administration</a></span><span class="stats"><a href="https://www.google.com/analytics/reporting/dashboard?id=10093329&pdr=20080615-20080715&cmp=average" target="_blank">Stats</a></span></div>
</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("XX-XXXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
</script>

</body>
</html>


Voila la capture d'écran du footer:

upload/17407-footer.JPG

J'espère que vous pourrez me donner un coup de main.
Je vous remercie par avance.

Skelton
Bonjour et bienvenu à toi sur le Forum Smiley smile

Après avoir vainement cherché l'élément auquel était affecté ton background, voici ce qui me vient à l'esprit :
- soit ton élément à des marges externes (margin) qui de ce fait sont également appliquées à l'image d'arrière-plan.
- soit le bloc contenant ledit élément à des marges internes (padding) et le résultat est le même.

Cherche de ce côté-là...
Smiley cligne
Cygnus a écrit :
Bonjour et bienvenu à toi sur le Forum Smiley smile

Après avoir vainement cherché l'élément auquel était affecté ton background, voici ce qui me vient à l'esprit :
- soit ton élément à des marges externes (margin) qui de ce fait sont également appliquées à l'image d'arrière-plan.
- soit le bloc contenant ledit élément à des marges internes (padding) et le résultat est le même.

Cherche de ce côté-là...
Smiley cligne


Merci beaucoup pour ta réponse. Mais qu'est ce que tu entends par "l'élément auquel était affecté ton background".
Je parle de l'élément qui a pour background container-bottom_black.gif.
Sur la version actuelle, sur la version buggée, je ne connais pas son nom.
Cygnus a écrit :
Je parle de l'élément qui a pour background container-bottom_black.gif.
Sur la version actuelle, sur la version buggée, je ne connais pas son nom.


ok ok j'ai trouvé l'élément : "container-bottom_red.gif"
Le thème dispose d'un CSS global (style.css) et de 3 déclinaisons : red; blaxk et brown.
L'élément "container-bottom_red.gif" fais référence au style-red.css.
Voila si je prend le style-red.css on a ce code ou se trouve l'élément :


/*************************************
	Main Container
**************************************/
#container { 
	background:url(images/container-cbg_red.gif) top repeat-y;
	border: 0px solid black;
	}
.container-top {
	background:url(images/container-bg_red.gif) top left no-repeat;
}
.container-bottom {
	background: url(images/container-bottom_red.gif) no-repeat;
}


Si maintenant je regarde dans le style.css au niveau du block "container" voila ce que j'ai:


/*************************************
	Main Container
**************************************/
#container { 
	width:940px;
	text-align: left; 
	margin: 0 auto;
	padding: 0px 10px;
	border: 0px solid black;
	clear: both;
	overflow:hidden;
	height:100%;
	}
.container-top {
	clear: both;
	height: 17px;
	width: 960px;
	display: block;
	margin: 12px auto 0 auto;
}
.container-bottom {
	clear: both;
	height: 17px;
	width: 960px;
	display: block;
	margin: 0px auto;
}
 


J'ai essayé de virer le margin, ca n'a rien fait....
Peut-être pourras tu y voir plus clair? Ta supposition était-elle exacte?
On y voit effectivement un peu plus clair... Smiley cligne

Si .container-bottom est un descendant de #container, alors le comportement observé est normal car #container a une marge interne de 10px :
#container { 
	padding: 0px 10px;
}


Ton image d'arrière-plan ne peut-donc, en toute logique, pas être affiché à gauche de #container, mais bien à 10px à gauche de sa marge gauche... Smiley smile
Modifié par Cygnus (24 Jul 2008 - 16:50)
Cygnus a écrit :
On y voit effectivement un peu plus clair... Smiley cligne

Si .container-bottom est un descendant de #container, alors le comportement observé est normal car #container a une marge interne de 10px :
#container { 
	padding: 0px 10px;
}


Ton image d'arrière-plan ne peut-donc, en toute logique, pas être affiché à gauche de #container, mais bien à 10px à gauche de sa marge gauche... Smiley smile



Alors donc si j'ai bien compris il suffit que je mette dans "container" du bloc "main container" de "style.css"un padding à gauche de 0px, pour re décaler à gauche l'élément "container-bottom_red.gif"? Ce qui doit donc donner :


/*************************************
	Main Container
**************************************/
#container { 
	width:940px;
	text-align: left; 
	margin: 0 auto;
	padding: 0px [b]0px[/b];
	border: 0px solid black;
	clear: both;
	overflow:hidden;
	height:100%;
	}


Parce que j'ai testé cela et ça ne bouge pas....
Au niveau du style-red.css y-a-t-il des modifs à faire?
skelton a écrit :
Parce que j'ai testé cela et ça ne bouge pas....
Au niveau du style-red.css y-a-t-il des modifs à faire?


Ah ? Smiley rolleyes
C'est ballot parce que ça pourrait être une bonne raison. Smiley murf

Autre petite question, à quoi c'est les valeurs auto dans ce cas-là ?
.container-bottom {
	margin: 0px auto;
} 
salut,

apres avoir jeté un coup d'oeil a ta page il semble, comme on t'a indiqué que le 'container-bottom' herites du padding-left du container .
Aussi, n'étant pas sur de ce que tu veux si tu souhaite que l'arrondi bas soit juste au dessus du footer , avec celui ci flottant sans les lignes a droite et a gauche tu as plusieurs solutions je pense.
Si tu veux éviter de mettre un valeur négative a ton 'container-bottom' tu as la possibilté de gerer les paddings internes, non pas sur le container mais sur le content et bien sur de fermer le container avant le footer.
Autre possibilité, tu peux mettre un bg a ton container , tres haut et tres optimisé, englobant l'arrondis bas et positionné en bottom left no-repeat et bien sur, fermer le container avant le footer.
Si tu as la main sur la structure, je pense que le mieux c'est
<container> </container>(ton bg repeat) > <container-bottom> /<container-bottom> > <footer> </footer.> (tant pis pour ts ces margin auto Smiley smile
Si tu ne peux rien changer a ta structure, vire les paddings du container
et refais une image de background pour ton footer qui masquera les lignes paralleles.

jespere que c'est clair. ... Smiley rolleyes
@ cygnus : les margin auto c'était deja en place d'origine sur le thème.

@ zincou : bin j'ai pas tout compris je suis pas expert en CSS. Y aurait peut-être moyen que l'on se parle sur msn? J'aimerai beaucoup réparer ce petit bug.

Merci encore pour votre aide.
Essaye de supprimer les padding du conteneur principal et de mettre les margin à 0 à ton conteneur-bas.
Je pense que ça devrait faire l'affaire : ton background devrait être centré.

Ceci dit, j'ai une question subsidiaire : ton thème noir est identique à celui-ci et exempt de bug.

Pour ne reprends tu pas les morceaux de css concernés ?
Ça te permettrait au moins de voir où les CSS diffèrent. Smiley cligne
Cygnus a écrit :
Essaye de supprimer les padding du conteneur principal et de mettre les margin à 0 à ton conteneur-bas.
Je pense que ça devrait faire l'affaire : ton background devrait être centré.

Ceci dit, j'ai une question subsidiaire : ton thème noir est identique à celui-ci et exempt de bug.

Pour ne reprends tu pas les morceaux de css concernés ?
Ça te permettrait au moins de voir où les CSS diffèrent. Smiley cligne


Alors j'ai testé ce que tu m'as dis, ca n'a rien fait....
En ce qui concerne les autres thème (le marron et le noir) le bug du footer est aussi présent. Ceci dit, j'ai un autre thème qui reprend la base de celui que j'ai (en fait c l'original, le mien est un thème modif ou des plugins on été rajouté), la, le footer est niquel...j'ai comparé footer.php et style.css (au niveau du footer) pour les 2 thèmes et tout est identique!

Je te jure ca me rend fou!
Est ce que par hasard cela pourrait venir de la side bar? Je l'ai modif en virant article récent, catégorie...ect...comme je l'avais déja plus haut, est ce que j'aurais pu effacer involontairement une ligne qui m'aurait décalé le footer?
Bonjour

En regardant ton code avec Firebug, il ressort que ton footer est inclus dans le container tout comme le container-bottom.

Sur un autre site ayant ce même thème, il s'avère que ces div sont externes ce qui pourrait peut-être expliquer la chose.

Le validateur signale également qu'une div n'est pas fermée et il se pourrait fort bien que ce soit justement la div #container qui soit concernée.

Si je me gourre pas, essaie juste d'ajouter une div fermante soit </div> dans le haut de ton fichier footer.php de façon à lire :

<div class="clearfix"></div>
</div>
</div>
<div class="container-bottom"></div>
........... le reste sans changement
pastazere a écrit :
Bonjour

En regardant ton code avec Firebug, il ressort que ton footer est inclus dans le container tout comme le container-bottom.

Sur un autre site ayant ce même thème, il s'avère que ces div sont externes ce qui pourrait peut-être expliquer la chose.

Le validateur signale également qu'une div n'est pas fermée et il se pourrait fort bien que ce soit justement la div #container qui soit concernée.

Si je me gourre pas, essaie juste d'ajouter une div fermante soit </div> dans le haut de ton fichier footer.php de façon à lire :

<div class="clearfix"></div>
</div>
</div>
<div class="container-bottom"></div>
........... le reste sans changement



Super merci beaucoup!
Ca marche, tu es un as!
C'était bien la div qui n'était pas fermée...ralala

Dis moi par hasard serais tu comment changer l'ordre des pages créées. Sur ma page d'accueil par exemple j'ai "accueil / contact / pour me connaître", et j'aimerai pouvoir faire : "accueil / pour me connaître / contact"

Dans quelle page je dois allé pour modif cela?
skelton a écrit :
Bin écoute vraiment tu m'as réparé tout les bugs! Merci beaucoup pastazere!
:)

La classe ! Smiley biggrin
Tu peux même indiquer ton sujet comme étant [Résolu]