Probleme d'affichage sous IE - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Probleme d'affichage sous IE

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Probleme d'affichage sous IE (Lu 1025 fois)

Probleme d'affichage sous IE
« sur: le 22-10-2010 a 12:44:29 »

STYKA
Membre récent

Hors-Ligne

Messages: 4

Bonjour à tous.

Avant de venir posté ici, j'ai pris le soin de faire une recherche mais sans succès alors je me lance, en espérant être au bon endroit.

Je suis une débutante et parfois mes codes sont assez bancale mais peu importe. J'ai créé plusieurs design différent qui marcher très bien sous firefox (je travail sous firefox) et aussi sous IE (je l'utilise juste pour voir ce que ça donne). Récemment, j'ai fais un design simple et qui me plait bien. Il s'affiche comme il faut sous firefox (d'après ma résolution d'écran, maintenant sur un ordi plus grand ou plus petit, je ne sais pas) mais le problème c'est que sous IE, c'est tout décaler.

J'ai fais plusieurs recherches sur google mais je n'ai rien trouvé. Je ne m'y connais pas assez donc je fais appel à vous.

Voici l'adresse: http://sistastyka.fr/photos.html
Si vous pouvez voir le site sous firefox et IE, vous verrez le problème qui est assez génant..

Comment faire fonctionner le site aussi sous IE?
Existe-t-il un code exprès ou comment dois-je procéder?

Merci pour votre futur réponse.

Rapporter au modérateur

Re:Probleme d'affichage sous IE
« Répondre #1 sur: le 22-10-2010 a 14:52:43 »

Walkomedia
Membre récent

Hors-Ligne

Sexe: Male

Messages: 68

Bonjour,

Il serait judicieux de créer des catégories pour y mettre les photos car le fait de scroller pendant 3 ans et demi pour arriver à la photo qu'on souhaite est assez désagréable.
Sinon, le design me plait bien, c'est simple et efficace.

De très jolis photos en tout cas !

Rapporter au modérateur

Votre identité visuelle : http://www.walkomedia.com
Siret : 51425133900016

Re:Probleme d'affichage sous IE
« Répondre #2 sur: le 22-10-2010 a 14:59:23 »

STYKA
Membre récent

Hors-Ligne

Messages: 4

Merci Walkomedia

Pour la création des catégories, j'y pense.. Je pense le faire une fois que le site sera complètement terminer, mais merci de le dire parce que, effectivement, c'est assez chiant!

Rapporter au modérateur

Re:Probleme d'affichage sous IE
« Répondre #3 sur: le 26-10-2010 a 13:25:57 »

lgm243
Membre récent

Hors-Ligne

Messages: 24

En effet tu as de gros pb sur IE.

Idem ke Wal ajoute des catégories et pk pas ajouter des vignettes de tes images pour avoir un apercu plus rapide de tes photos. (agrandissement avec zoombox)

Également en analysant le site tes images sont toutes en png et font environ 200 ko. Pour les photos mets les en jpg elles seront - lourdes.

Au niveau code html et css s'est pas très très moche

Déjà tu as deux <head> </head>????

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>> SistaSTYKA | C'est l'bronx dans ma tête ..</title>
<link type="text/css" href="documents/textstyles_nf.css" rel="stylesheet">
<meta name="generator" content="EzGenerator 3.0.0.36 (zen_10c-v1)">
<meta name="description" content="C’est l’bronx dans ma tête .. ..">
<meta name="keywords" content="">
<meta name="date" content="2010-10-26T02:20:28+00:00">
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
<link href="favicon.ico" type="image/ico" rel="icon">





</head>
<body style="padding: 0px 0px 0px 0px;background: #000000 url(extimages/0_back.png) repeat fixed top;">

<p class="rvps1"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>> SistaSTYKA | C'est l'bronx dans ma tête ..</title>
<meta name="generator" content="EzGenerator 3.0.0.36 (zen_10c-v1)" />
<meta name="description" content="C'est le bronx dans ma tête .. .." />
<meta name="keywords" content="" />
<meta name="date" content="2010-10-24T16:13:49+00:00" />
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link href="favicon.ico" type="image/ico" rel="icon" />

<link rel="stylesheet" href="js/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<style type="text/css">

/* Basics */
body { background: #1F1F1F url('extimages/0_back.png') top left fixed repeat; color: #6D6D6D; font-family: Helvetica, Arial, sans-serif; font-size: 11px; margin: 0px; padding-top: 5px; text-transform:lowercase; }

a, a:link, a:visited { color: #FFFFFF; font-family: Helvetica, Arial, sans-serif; text-transform: lowercase; text-decoration: none; font-size: 11px; }
a:hover { color: #4A9F1A; text-shadow: 3px 3px 1px #000000; font-family: Helvetica, Arial, sans-serif; text-transform: lowercase; text-decoration: none; font-size: 11px; }

.linkbox a { font-size: 9px; text-transform: uppercase; margin-top: 4px; }
.linkbox a:hover { font-size: 9px; text-transform: uppercase; margin-top: 4px; }

p { margin: 5px 0 0 0; line-height: 12px; padding: 0; }
ul, ol { margin: 5px 0 0 25px; padding: 0; }
blockquote { margin: 2px 2px 1px 2px; padding: 1px 2px 1px 4px; border: 0px solid #6D6D6D; }
blockquote p { margin: 0; padding: 0; line-height: 12px; }

/* Boxes */
#main { width: 890px; padding: 5px 0; margin-left: auto; margin-right: auto; }
#left { background-color: #000000; width: 205px; position: fixed; text-align: justify; top: 100px; padding: 5px 5px 5px 5px; -moz-border-radius: 5px; border-radius: 5px; }
#right { background-color: #000000; width: 665px; margin-top: 40px; -moz-border-radius: 5px; border-radius: 5px; float: right; padding-left: 5px; padding-top:5px; padding-bottom: 5px; margin-bottom: 10px; }
.BlocImage { padding-bottom: 28px; }

.navlinks a { margin-bottom: 4px; background-color: #0A0A0A; padding: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing: -1px; display:block; text-align: center; }
.navlinks a:hover { margin-bottom: 4px; background-color: #0F0F0F; border-left: 3px solid #4A9F1A; border-right: 3px solid #4A9F1A; padding: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing: -1px; display: block; text-align: center; }

</style>

</head>

tu as des balises ki servent a rien
exemples
<div> </div>

<div style="text-align: center;"><b>Dernière mise à jour</b></div>
<div style="text-align: center;"><i>le 18.10.10</i></div>
<div style="text-align: center;"><b>Ajout de 8 photos</b></div>

Peux etre remplace par cela

<p style="text-align: center;">
<b>Dernière mise à jour</b><br />
<i>le 18.10.10</i><br />
<b>Ajout de 8 photos</b><br />
</p>

Garde les div pour faire blocks

ne pas remplacer les <p> par des div
ou
des h1 h2 h3 par des <div class="titre"></div>

Voila j'ai pas tout regarder mais bcp de correction à apporter.

Sinon niveau graphisme du site et les photos sont sympas

Apres pk pas créer ton site avec wordpress tu pourras gérer tes photos et ton blog. Mais il faut que tu maitrises un peu le html le css et le php

Rapporter au modérateur

Freelance webmaster /webdesigner
www.lgmcreation.fr

Re:Probleme d'affichage sous IE
« Répondre #4 sur: le 26-10-2010 a 16:47:03 »

STYKA
Membre récent

Hors-Ligne

Messages: 4

Merci lgm243 pour tes remarques.

Après avoir posté ce sujet, on m'a contacté par message pour rectifié mon code.
Donc le nouveau code qu'on voit est celui rectifié.

Pour les deux <head>, je n'avais pas vu.. c'est a cause du logiciel que j'utilisais jusqu'a aujourd'hui mais qui a fini a la corbeille directement. DU coup, ce problème là est regler.

Pour les div a la place des <br>, j'ai demandé a la personne qui m'a rectifié mon code et il m'a dit que c'était quand même mieux car les <br> peuvent changer l'interface de temps en temps. Donc je pense laisser comme ça.

Pour les catégories, j'y pense, comme je l'ai dis plus haut. Je ne sais pas encore quelle solution adapter mais j'y penser aussi a lightbox ou quelques choses qui s'en rapproche, je vais voir ça.

En tout cas, merci d'avoir pris le temps de regarder et de me répondre.

Rapporter au modérateur

Re:Probleme d'affichage sous IE
« Répondre #5 sur: le 26-10-2010 a 18:05:51 »

lgm243
Membre récent

Hors-Ligne

Messages: 24

de rien j'ai aussi été débutant , et j'apprends encore

Idem le menu au lieu d'utiliser les div navlinks pk ne pas utiliser
<ul>
<li></li>
<li></li>
<li></li>
</ul>

Code bcp plus propre

C'est sur avec le div on peut tout faire ca marche aussi

pour t'aider va sur les sites de validation W3C html css pour voir si ton site utilise les bonnes balises html

exemple tes images de preference doivent avoir les attributs alt width height
les <br> s'écrivent <br />

va voir ce lien qui correspond a la page photos.hmtl il ya 431 erreurs notamment a cause de toutes tes images

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sistastyka.fr%2Fphotos.html&charset=%28detect+automatically%29&doctype=Inline&group=0

« Dernière Édition: le 26-10-2010 a 18:06:34 par lgm243 »

Rapporter au modérateur

Freelance webmaster /webdesigner
www.lgmcreation.fr

Re:Probleme d'affichage sous IE
« Répondre #6 sur: le 26-10-2010 a 18:32:27 »

STYKA
Membre récent

Hors-Ligne

Messages: 4

431 erreurs.. c'est énorme!

Merci pour le lien, je vais aller voir ça et les corriger.
Et aussi remplacer <br> par <br />.

En ce qui concerne le menu, j'ai jamais vraiment compris avec les <li> <ul> et tout ça.. J'ai fais "au plus simple" même si parfois, ce n'est pas toujours bon!

Rapporter au modérateur