Aller au contenu
Webdesigneuse

Mauvais rendu de mon site sous différents navigateurs

Noter ce sujet :

Recommended Posts

Bonsoir à tous

Je suis en train de créer un blog pour un évènement que j'organise avec le Syndicat d'Initiative de ma commune.

Je réalise ce blog sous le CMS WordPress. C'est le deuxième blog que je réalise ainsi, mais cette fois, j'ai quelques difficultés avec le rendu sous les différents navigateurs.

Je me suis rendue compte que le site n'apparaissait carrément pas sous OPERA 11.51 et je ne comprends pas pourquoi.

En revanche, si tout est ok sous FireFox 6.0.2, sous CHROME 12 et IE 9.08 j'ai des déplacements de calque au niveau de la zone navigation + le header qui s'étire sans respecter le "reapet-x" de l'image de fond uniquement sur la droite extrême du calque (= zone blanche donc). Pas testé sous Safari.

Voici le lien du blog en cours de construction

J'ai cherché des info, mais tjs pas de réponse concernant mon problème avec OPERA.

Pour les calques, il existe peut-être un script pour éviter ce genre de décalage entre les principaux navigateurs ? Bien sûr, je sais qu'on ne pourra pas réaliser un site compatible pour tous les navigateurs ^^

Mais si je pouvais tout de même le rendre compatible à FF, IE, Chrome et Safari et qu'il soit visible sous Opéra, je serais ravie ! Si vous avez quelques pistes, merci ;)

Modifié par Webdesigneuse

Partager ce message


Lien à poster
Partager sur d’autres sites

Le conseil que je peu te donner dans un premier temps c'est de rendre ton site valide W3C en utilisant leur site, site du w3c.

c'est vrai que c'est très compliqué à régler, il faut tenter pleins de trucs pleins de petite modifs en contrôlant à chaque fois sur les différents navigateurs.

Courage

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour et merci pour ta réponse ;)

Je viens de valider... pour le reste je tatonne ^^

Pour mon soucis Opera il semble que ce soit juste sur mon ordi car une réponse sur un autre forum m'a confirmé qu'ils pouvaient voir le site...

à suivre...

Partager ce message


Lien à poster
Partager sur d’autres sites

Chez moi sous chrome le menu de droite s'affiche en bas.

Certainement un problème de CSS !

Partager ce message


Lien à poster
Partager sur d’autres sites

Version: 14.0.835.186 m

Si je fais un "CTRL + Molette" Effectivement le menu est à droite!

Mais le mot "Venir" est en bas de "Blog'Info"

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir,

J'ai déjà eu le même problème, un menu d'affichait normalement avec IE, Safari, Firefox et Opera

mais dès que je testais avec Chrome... tout allait de travers !

A bientôt,

Alexis

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité

Le problème c'est que les navigateurs n'interprète pas le code exactement de la même façon. Je reprends ce qui a été dit plus haut: valide ton site avec des outils W3C ou semblables!

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci Rizer ;)

J'utilise une typo perso (méthode _AT_font-face)... est ce que tu as la même que moi à l'écran ? (voir image ci-dessous) car si le navigateur ne prend pas en charge cette méthode, ça décale tout en effet, car la typo système par défaut est nettement plus grosse que ma typo perso.

Sinon, c'est étrange et je ne vois pas d'où ça peut venir ^^ chez moi tout est ok avec la dernière version Chrome (14.0.835.187) et "@font-face" fonctionne depuis sa version 2. Je sais par contre que Linux pose problème (je suis sous W7).

chrome.jpg

Partager ce message


Lien à poster
Partager sur d’autres sites

Oups ! je n'avais pas lu les derniers messages ^^ en effet, je dois aussi re-valider depuis quelques changements ça m'a pas mal ajouté d'erreurs :/

Partager ce message


Lien à poster
Partager sur d’autres sites

Non je ne vois pas la même typo que toi !

Le problème viens certainement de ça mais alors toutes les personnes n'ayant pas ta typo verrons mal le site non ?

Pourquoi tu n'utilises pas une typo de base ou des images?

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

Chez moi, sous Firefox 6.0.2, c'est tout cassé : la sidebar qui est sensée se trouver à droite, se retrouve en dessous.

En regardant rapidement le code, on constate que tu as le #content en float left, et la #sidebar en float left également. Même si théoriquement ça devrait fonctionner, dans la pratique, ce n'est pas une bonne idée, et ces nombreux bugs d'affichage que tu rencontres selon les navigateurs en sont la preuve. Il serait plus logique de placer la #sidebar en float right et le #content en "normal". (en plaçant la sidebar avant le content dans le code).

Partager ce message


Lien à poster
Partager sur d’autres sites

_AT_Rizer... eh bien je suis graphiste à la base ;) voilà pourquoi j'use de méthode qui me permettent de garder une cohérence dans le design. J'aurais pu effectivement utilisé des images, mais j'avais aussi envie de tester cette méthode que je n'avais jamais utilisé jusque là. Normalement tout le monde doit être capable de voir cette typo puisqu'elle est sur mon serveur et se charge dès lors que le navigateur accepte la méthode que j'utilise (@fonte-face). Si je m'en tiens à mes recherches, aujourd'hui cette méthode semble acceptée par toutes les dernières versions des navigateurs courants (FF, Opera, Chrome, Safari, IE) ... Aujourd'hui, de mon côté tout est ok sur tous ces navigateurs (sauf les personnes qui sont sous Linux à priori).

_AT_Ernestine... Merci pour ta remarque ;) je ne sais pas si j'aurai le temps de tout revoir le script du CMS ^^ (la mise en ligne officielle du site est la semaine prochaine et mon temps -en bénévolat - est également très limité ^^) ... en outre, chez moi ça fonctionne nikel sous tous les navigateurs cités plus haut, testés sur 4 ordi différents... sauf l'ordi qui est sous Linux. Tu es sous Linux aussi ?

Du coup, ma question aujourd'hui est plutôt : pourquoi diable ça pose soucis chez vous puisque ça marche pour tous les navigateurs chez moi ? ^^ (sauf celui sous Linux qui ne reconnait pas ma typo).

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

La mise en page est cassée sur Chrome et sur Firefox (pas testé sur les autres navigateurs). Parce que la police "Angelina" n'est pas chargée. Si ça fonctionne chez toi et nulle part ailleurs, c'est pour la simple et bonne raison que le fichier de police est installé sur ton propre ordinateur ! Il est donc évident que chez toi la police Angelina soit appliquée, puisque le navigateur va la chercher non pas sur le serveur, mais sur ton disque dur. Pour te mettre dans les conditions réelles d'un internaute, tu devrais supprimer la police de ton ordi (sur Windows les polices sont dans le répertoire c:/windows/fonts).

Un simple font-face ne suffit pas pour que la police se charge correctement partout. L'utilisation de cette propriété est un vrai chantier, qui demande notamment de convertir la police dans différents formats de fichiers de police : ttf, eot, woff, svg. Au final tu devrais avoir un truc du style :

@font-face {
font-family: 'Angelina';
src: url('font/Angelina-webfont.eot');
src: local('☺'), url('font/Angelina-webfont.woff') format('woff'), url('font/Angelina-webfont.ttf') format('truetype'), url('font/Angelina-webfont.svg#webfontGQeY2qCy') format('svg');
font-weight: normal;
font-style: normal;
}

Un article qui fait le tour de la question : http://sixrevisions.com/css/font-face-guide/

En résumé : embarquer une police de caractères non standard n'est pas une mince affaire. Mais c'est tout à fait possible, il suffit de bien suivre les recommandations ;)

Cela dit, il n'est pas normal que la mise en page soit toute cassée juste pour une question de police. Que la police de caractères ne se charge pas correctement, c'est une chose dommage mais acceptable, mais qu'elle démolisse toute la mise en page, là par contre, ça la fout mal !

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci Ernestine ;) voilà qui apporte de l'eau à mon moulin... par contre ce qui est étrange, c'est que j'ai testé sur plusieurs ordi (4 !) et tous n'ont pas cette typo perso installée sur leur disque dur...

Je cours lire l'article et rectifier mon script !

Modifié par Webdesigneuse

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

La mise en page est cassée sur Chrome et sur Firefox (pas testé sur les autres navigateurs). Parce que la police "Angelina" n'est pas chargée. Si ça fonctionne chez toi et nulle part ailleurs, c'est pour la simple et bonne raison que le fichier de police est installé sur ton propre ordinateur ! Il est donc évident que chez toi la police Angelina soit appliquée, puisque le navigateur va la chercher non pas sur le serveur, mais sur ton disque dur. Pour te mettre dans les conditions réelles d'un internaute, tu devrais supprimer la police de ton ordi (sur Windows les polices sont dans le répertoire c:/windows/fonts).

Un simple font-face ne suffit pas pour que la police se charge correctement partout. L'utilisation de cette propriété est un vrai chantier, qui demande notamment de convertir la police dans différents formats de fichiers de police : ttf, eot, woff, svg. Au final tu devrais avoir un truc du style :

@font-face {
font-family: 'Angelina';
src: url('font/Angelina-webfont.eot');
src: local('âº'), url('font/Angelina-webfont.woff') format('woff'), url('font/Angelina-webfont.ttf') format('truetype'), url('font/Angelina-webfont.svg#webfontGQeY2qCy') format('svg');
font-weight: normal;
font-style: normal;
}

Un article qui fait le tour de la question : http://sixrevisions.com/css/font-face-guide/

En résumé : embarquer une police de caractères non standard n'est pas une mince affaire. Mais c'est tout à fait possible, il suffit de bien suivre les recommandations ;)

Cela dit, il n'est pas normal que la mise en page soit toute cassée juste pour une question de police. Que la police de caractères ne se charge pas correctement, c'est une chose dommage mais acceptable, mais qu'elle démolisse toute la mise en page, là par contre, ça la fout mal !

Voilà ce qu'on attendez!

Merci pour cette excellente remarque !

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon... eh bien rien de mieux :/ c'est même pire ! car maintenant, même chez moi, ça bug sous FF... Je vais devoir faire un choix qui ne m'enchante pas... bouhh ! j'aurai pourtant aimé réussir ce petit défit ^^

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par kevinjoseph
      Bonjour, j’ai un gros problème sur mon site Wordpress . Du jour au lendemain, mon site wordpress fais une redirection vers un autre site wordpress que j’ai crée ,sans que je touche à quoi que ce soit. Quand j’essai d’aller sur l’admin pour désactiver les plugins et voir d’où peut venir le problème. Impossible d’accéder, sa me redirige vers l’admin de l’autre site. Au final il est impossible que j’accède au site via (google, la bare de recherche, les favoris, l’admin…) pour voir ce qu’il fonction pas, j’ai juste accès au FTP. J'ai essayé de voir d'où pouvez venir ce bug en supprimant les plugins, le théme, mes derniers modifications, regarder sur le .htaccess si il y avais quelque par le nom de domaine de l'autre site écrit. Ca n'a rien changer, le site continue de ce rediriger automatiquement vers l'autre site. Si vous avez une idée d’où sa peut venir ou comment faire pour arranger ça et surtout comment éviter que sa ce reproduise. Sa m’aiderai beaucoup, merci d’avance.
      voici le code du .htaccess:
       
      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.php [L]
      </IfModule>

      # END WordPress
      ~   Ludovic • 16:28    
    • Par prem
      Hello j'aurais besoin urgemment de votre aide svp... Cela fais des jours que je bloques.
      Voilà j'ai des posts , chaque posts a plusieurs categories.
      j'ai fais une requete wp_query pour lister tous les posts sauf une categorie ,mais je me retrouves avec des doublons . voila mon code 
      <?php /** * The template for displaying a grid item. * * @package WordPress * @subpackage Edition * @since Edition 1.0 */ $do_not_duplicate = array(); $query = new WP_Query( array( 'category__not_in' => array( 32 ) ) ); if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); $do_not_duplicate[] = $post->ID; global $tw_section, // section object $grid_size, // grid size $post; // section object $section_id = get_the_ID($post); // section id $tw_categories = get_categories(); // get all post categories $post_type = get_post_type(); $thumbnail_size = 'half'; $thumbnail_size = ($grid_size == 'fullgrid') ? 'big' : $thumbnail_size; if ($grid_size == 'related') { $thumbnail_size = 'related'; } ?> <div class="<?php if ( isset($tw_categories[0]->term_id) ) { echo 'highlight_category_' . $tw_categories[0]->term_id; } ?> <?php echo (has_post_thumbnail()) ? 'has-thumbnail' : 'no-thumbnail'; ?> <?php echo $grid_size;?> grid-item"> <div class="isobrick-inner"> <?php the_post_thumbnail($thumbnail_size, array( 'onload' => 'jQuery(this).animate({ "opacity" : 0.75 }, 500);' )); ?> <?php echo themewich_review_circle('none', false); ?> <?php if ( 'post' == $post_type ) : ?> <span class="thumboverdate"> <i class="fa fa-bookmark"></i> <?php themewich_date('human'); ?> </span> <?php else: ?> <?php if ( function_exists( 'wc_get_template' ) ) : ?> <span class="thumboverdate"> <?php wc_get_template( 'loop/price.php' ); ?> </span> <?php endif; ?> <?php endif; ?> <div class="thumbovertext"> <div class="badge"> <?php echo ag_get_cats(3); ?> </div> <h2 class="title"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php $title = get_the_title(); if (strlen($title) >= 75) { $title = mb_substr($title, 0, 75) . "... "; } echo $title; ?> </a> </h2> <?php if ( 'post' == $post_type ) : ?> <?php preg_match('/<!--more(.*?)?-->/', $post->post_content, $matches); ?> <a class="button outline" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if ( isset($matches[1]) && $matches[1] ) { echo $matches[1]; } else { _e('Lire la suite', 'themewich'); } ?> </a> <?php endif; ?> </div> <a class="brick-thumb-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </div> </div> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?>  
       
       
      et quand je fais un var_dump ($do_not_duplicate);
      j'obtiens 
      array(1) { [0]=> int(470) }
      array(2) { [0]=> int(470) [1]=> int(368) } 
      array(3) { [0]=> int(470) [1]=> int(368) [2]=> 
       
       
      et je souhaiterai avec l'aide d'un foreach ne poster mon article qu'une fois
    • Par Theode69
      Bonjour à tous, sachez que votre réponse me sera d'une très grande aide ! 
       
      Je suis actuellement entrain de créer un  site pour une université. L'objectif est d'avoir terminé avant la fin du mois d'aout une version test/un MVP simple mais fonctionnel. Pour résumer, mon but est de simplifier et rendre plus rapide les inscriptions des étudiants auprès des professionnels. Ce site contiendra une partie pour les étudiants, une pour les professionnels.
       
      Pour faire simple chaque étudiant aura  un compte perso, sur lequel il pourra ajouter des documents (carte d'identité, RIB, justificatif de domicile, etc) afin de les stocker dans un cloud. 
       
      De l'autre côté, les professionnels (auto école, salle de sport, assurance, protection sociale, opérateur téléphonique) auront un espace dédié à leur activité. Ils auront une fiche résumant leur entreprise (secteur, téléphone, localisation) et ils renseigneront les documents nécessaire lors de l'inscription à leurs services. 
      Pour s'inscrire, l'étudiant n'aura plus qu'a autoriser l'accès à ses documents (préalablement enregistrés dans le cloud) évitant ansi de perdre du temps sur place en passant par la dématérialisation de l'inscription. 
       
      Le projet devra donc contenir : 
       
      une zone de connection privée pour chaque utilisateur et entreprise la liaison avec un cloud (je pensais sous traiter la gestion du cloud  à une entreprise spécialisée)  si possible une barre de recherche permettant de trouver les professionnels répondant aux besoins des utilisateurs  la possibilité pour le professionnel de télécharger les documents auxquels ils a été autorisé afin de procéder à l’inscription  si possible (pas urgent car surement compliqué) que chaque professionnel puisse établir une page de pré inscription où l’utilisateur remplie ses données de manières manuscrites (prénom, nom, mail, etc) avant de compléter l’inscription avec les documents justificatifs contenus dans le cloud   
       
      Ayant de bonnes bases en HTML+CSS et quelques connaissances concernant Java Script j'hésite encore sur la forme que pourra prendre le site. 
      Soit il m’est possible d’utiliser WordPress.org en utilisant différents plug ins (mais il y en a t-il qui permettent réellement de remplir tout ces objectifs?). 
      Soit je pensais créer mon site à l’aide de Meteor.Js ou Node.Js …

      Quelles solutions préconisez vous ? Si aucune ne vous semble adaptée selon vous comment pourrais je faire pour créer ce MVP ? Comment feriez vous pour commencer ce projet ? 
      Merci énormément pour l’aide que vous pourrez m’apporter dans cette aventure ! Je suis disponible si vous voulez échanger plus longuement. 
       
      Bien cdt 
      Théo R
    • Par Toulonweb
      Bonjour,
      je souhaite réaliser une section annuaire sur un site tournant sous wordpress,
      j'ai eu beau chercher a droite et a gauche mais rien à part 2 plugins qui ne sont plus mis a jours depuis des années.
      Je précise que je ne souhaite pas faire un site annuaire mais seulement une section sur un site existant.
      J'ai bien tenté arffo mais il n'est plus compatible avec php 5
      Auriez vous une piste?
       
      Merci d'avance.
       
      Nicolas
    • Par fbern
      Bonjour
       
      j'ai un vieux site sous wordpress, et je voudrais faire une dizaine de redirections.
      Je n'ai pas besoin d'expressions régulières, c'est du 1 pour 1.
      N'étant pas développeur, pouvez vous m'aider: dois-je obligatoirement utiliser mod rewrite ?
      Est-ce que vous n'auriez pas une solution plus simple car je n'ose pas mettre les mains dans Apache?
      merci
×
×
  • Créer...