Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: STYKA le le 22-10-2010 a 12:44:29

Titre: Probleme d'affichage sous IE
Posté par: STYKA le le 22-10-2010 a 12:44:29

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.

Titre: Re:Probleme d'affichage sous IE
Posté par: Walkomedia le le 22-10-2010 a 14:52:43

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 !

Titre: Re:Probleme d'affichage sous IE
Posté par: STYKA le le 22-10-2010 a 14:59:23

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!

Titre: Re:Probleme d'affichage sous IE
Posté par: lgm243 le le 26-10-2010 a 13:25:57

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>????
[color=Red][size=1]
<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>
[/color][/size]

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

Titre: Re:Probleme d'affichage sous IE
Posté par: STYKA le le 26-10-2010 a 16:47:03

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.

Titre: Re:Probleme d'affichage sous IE
Posté par: lgm243 le le 26-10-2010 a 18:05:51

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

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 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sistastyka.fr%2Fphotos.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

Titre: Re:Probleme d'affichage sous IE
Posté par: STYKA le le 26-10-2010 a 18:32:27

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!