28172 sujets

CSS et mise en forme, CSS3

Problème décalage ie et firefox pour thème wordpress

Bonjour, je fais appel à vous car j'ai un problème:
Je crée actuellement mon thème pour mon blog wordpress, je viens de créer un petit calendrier permettant de dater chaque article . Sous firefox, tout est nickel mais sous ie, c'est décaler.

Voici les images représentant le problème:
upload/18328-firefox.jpg

upload/18328-ie.jpg


Voici aussi mes codes:

HTML:

<?php get_header(); ?>
<?php get_sidebar();?>
<div id="content">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<h1>
<div class="calendar">
<img src=http://essaiblog.olympe-network.com/wp-content/themes/mk2-10/images/calendar.gif  border="0" >
</div>


<div class="calendar2">
<p>
<span class="calendar_month"><?php the_time('M')?></span>
<span class="calendar_day"><?php the_time('j')?></span>

</p>
</div>

<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	<p class="postinfotop"><?php the_time('Y-m-d')?>  |  Filed Under <?php the_category(', ') ?>  |  <?php edit_post_link('[Edit]', '', ''); ?></p>

        <?php the_content(__('[More...]'));?>
       
        <div style="clear:both;"></div>



CSS:


#content h1 div.calendar{

background-image:url('images/calendar.jpg');
float:left;
height:50px;
margin-right:10px;
width:47px;
}

.calendar2 {
position: absolute;
float: left;
height:50px;
width:52px;
margin-left: 10px;
margin-top: 2px;
}


.calendar_month {
color:#fff;
font-size:12px;
margin-top:1px;
margin-left: 3px;}

.calendar_day {
margin-top: 16px;
margin-left: 5px;}


Merci de m'éclairer Smiley biggrin
Modifié par tintinmarron (29 Oct 2008 - 14:07)
tintinmarron,

a écrit :

28 Oct 2008 - 23:53:08 - premier post
29 Oct 2008 - 09:06:56 - relance

Pardonnes-nous ce manquement à nos obligations... Smiley confused
Nous sommes à ton entière disposition, nos membres (bénévoles ?), somnambules pour la plupart, écument d'ordinnaire le forum pour donner des réponses sous les délais contractuels...
Nous allons prendre des mesures disciplinaires exemplaires afin que ce type de désagréments ne se reproduisent plus Smiley fache

Allez blague à part :

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

upload/12813-1-code.gif

Merci également de poster le code html final (après traitement PHP) et plus idéalement l'adresse de ta page en ligne (une page de test reproduisant le problème suffira)

D'autre part, je t'encourage vivement à te servir des ressources et des outils à ta disposition...ici sur le forum, dans la Faq, les tutoriels, les articles, les sujets déjà traités etc...ou sur la toile...
Vérifier la validité de ton code par exemple
Cela peut aider Smiley cligne

A bientôt Smiley smile
Cdt,
Sylvain
Merci, j'ai édité le message.
Mais les erreurs qu'il m'a détecté non rien avoir avec le problème. Verriez vous une erreur permettant de résoudre ce problème? Smiley murf
tintinmarron a écrit :
Merci, j'ai édité le message.

C'est aimable à toi, merci.
tintinmarron a écrit :

Mais les erreurs qu'il m'a détecté non rien avoir avec le problème. Verriez vous une erreur permettant de résoudre ce problème? Smiley murf

Page en ligne, intégralité du code html généré ? Smiley rolleyes
6l20 a écrit :

Page en ligne, intégralité du code html généré ? Smiley rolleyes

Bis repetita non placent...
Excuse moi de mon ignorance mais je ne comprends pas bien ce que tu as marqué. Merci beaucoup de ton aide mais mon niveau n'est pas suffisant pour résoudre le problème grâce à ton aide.

Donc si tu pouvais "m'assister", ce serait gentil Smiley smile
Pas de soucis, il suffit de demander Smiley smile

Pour que nous puissions regarder avec attention ce qui cause les différences constatées entre les navigateurs (FF et IE) il nous serait utile d'avoir le code html final (une fois que le code php a été interprété coté serveur) et que ta page s'affiche dans ton navigateur (si tu regardes le code source dans ton navigateur, tu remarqueras qu'il n'y a plus de <?php...> mais à la place du code html (le code qui a été inclus grace à php) c'est ce code qui nous serait utile, ainsi que le code de ta feuille de style (.css)

Comme c'est parfois assez lourd à gérer et que nous nous retrouvons trop souvent avec des lignes de codes interminables et fastidieuses à déchiffrer, nous demandons le plus souvent à voir une page en ligne (c'est à dire envoyé sur ton petit coin de web, serveur, page perso,...) beaucoup plus facile à lire, manipuler, déchiffrer.

Cdt,
Sylvain
Bonsoir tintinmarron,

Désolé le sujet m'était sorti de la tête Smiley cligne
Beaucoup d'erreurs sur cette page, de codage et certainement une certaine méconnaissance des langages html et css (PHP peut-être ?)...
Le mieux serait peut-être de reprendre du début. Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.
(Les ressources pour Wordpress ne manquent pas non plus...)

Pour visualiser les erreurs (qu'il conviendrait de corriger avant toutes choses) tu peux te servir de l'outil en ligne mis à disposition par le W3C:
http://validator.w3.org/
(tu ne peux pas avoir de div dans un h1 par exemple...)

Pour ton petit problème, il faut essayer de visualiser ce que tu tentes de faire, le reste viendra tout seul (après avoir réviser le positionnement Smiley cligne )
Tu peux te servir d'un crayon et d'une feuille de papier, poser ton code html puis positionner via css par exemple.
Donc, tu as un bloc qui englobe différentes informations (d'autres bloc) ce qui pourrait donner :

<div id="post">
	<div class="datebox">
		<p class="month">oct</p>
		<p class="date">30</p>
	</div><!-- .datebox -->
	<div class="title">
		<h1>blablabla</h1>
		<p class="sous-titre"> blablabla</p>
	</div><!-- .title -->
	<div class="post-content">
	<img src="truc.jpg" alt="mon truc en plume" height="200" width="150px" />
	Ce que tu veux...
	</div><!-- .post-content -->
</div><!-- #post -->


Pour positioner ta boite de date, par exemple :

.datebox {
	background:transparent url(calendar.gif) no-repeat 0 0;
	color:#FFFFFF;
	float:left;
	height:50px;
	padding:6px 0;
	text-align:center;
	width:47px;
}
.datebox .date {
	color:#666666;
	font-family:Verdana,Arial,Sans-Serif;
	font-size:1em;
	font-weight:bold;
	padding-top:3px;
}
.datebox .month {
	color:#FFFFFF;
	font-size:12px;
}

Tout ceci sera à adapter/améliorer suivant ton besoin, j'ai fait cela rapidemment pour te donner une idée Smiley cligne

Tu peux positionner ton titre et ton sous-titre en flottant ou non (utilisation d'une marge à gauche par exemple) puis le reste dans le flux...
Bref, à toi de voir, de chercher, de modifier...

Cdt,
Sylvain
Merci beaucoup, j'ai réussi grâce à ton aide et quelques petits tâtonnements.
Il reste encore un petit décalage de 1 ou 2 pixels mais rien de grâve.

Il ne me reste plus qu'à mettre de l'ordre dans mon html car tout le monde me dit que c'est le bordel ^^.

Je vais corriger les erreurs que le site me donne.
Faut-il que je fasse quelque chose d'autre après pour l'organiser? Si oui, comment?

Merci encore
Là,Je comprends pas:
Tous les problèmes qu'il me donnent sont qu'il manque des:
>;<;"h" dans http; ou bien se sont des problèmes dues à la vidéo dailymotion alors que j'ai récupéré le script sur le site et tout ce qu'il manque est marqué dans tous mes fichiers php!

Sinon, j'ai corrigé l'erreur du h1 mais sinon, je ne vois pas comment resoudre cela
Bonjour tintinmarron,


Tes images se présentent sous cette forme dans ton code (de mémoire le site semble en maintenance...) :

<img src=http://essaiblog.olympe-network.com/wp-content/themes/mk2-10/images/martinz.gif  border="0">


Alors qu'elles devraient, dans le meilleurs des mondes, avoir peu ou prou cet aspect :

<img src="http://essaiblog.olympe-network.com/wp-content/themes/mk2-10/images/martinz.gif" alt="description qui va bien" width="" height="" />


Je te laisse comparer les différences et faire les corrections (pour les images décoratives, s'il y en a, un alt (alternative textuelle) vide est requis : alt="" ) la balise fermante est également requise.

Concernant ta video, le fait de recopier le code sur le site qui te fourni ce flash ne signifie pas forcément que le code soit valide Smiley cligne

Un peu de lecture : Comment rendre valide une animation flash

Reste çà et là des choses à corriger, le style et le javascript pour ta galerie qui n'ont, à mon avis, rien à faire dans le corps du document et quelque balise de style à externaliser...

Bonne continuation,
Cdt,
Sylvain
Sujet clos
Aller à