Problème site XHTML/CSS2

leconseil · 23 Juillet 2003

Bonjour,

J'ai "dévoré" le site de Monique qui traite de XHTML et de la mise en page à l'aide de CSS, donc sans tableaux. J'ai totalement réorganiser mon site : viré les tableaux et autres balises opsolètes au profit de XHTML et CSS mais... On dirait que les pages se chargent plus lentement qu'avant (alors que les pages sont plus légères en ko de près de 40% (j'avais une mise en page complexe avec les tableaux). De plus, si je met deux ou trois mots en italique avec em la partie contenu ne bouge pas mais si je met deux lignes de suite en em par exemple, mon menu de droite "vire" quarément en dessous. J'ai utilisé float uniquement : un header, un contenu à gauche, un menu à droite et un bas.
Donc, si je ne peux pas utiliser librement le em et si les pages semblent bizarement plus longues à charger... bref ce n'est pas top pour un bon référencement dans google.

Je ne sais pas quoi faire et en attendant, j'ai remis la version avec tableaux en ligne...

Une idée de ce qu'il peut y avoir comme anomalie ?

A+

anguenot.com · 23 Juillet 2003

"float" est un attribut un peu capricieux qui donne lieu à des résultats légèrement différents entre ie et Mozilla. Je parviens en général à maitriser les décalages ou retours à la ligne intempestifs en jouant sur les attributs padding et margin... et en testant systématiquement sous ie et moz.

En revanche, tu n'as pas à craindre pour ton référencement. Les mises en pages calamiteuses ne gênent pas google.

Pour ce qui est du temps de chargement, pas d'explication. Assure toi que tu compares les tailles totales de tes pages, sans oublier les images et les fichiers inclus (css, js, ...)

Mirgolth · 23 Juillet 2003

Salut,

Perso, je sent un problème de fermeture de balise... Comme la fermeture de balise est obligatoire en XHTML, le naviguateur attend d'être arrivé à la fin de la page pour comprendre que tu l'as oublié et d'essayer d'afficher quelque chose.

Néanmoins si tu as "dévoré" le site de Monique tu as dû valider ton code. Il y a donc peu de chance que mon intuition soit bonne.

En fais le plus simple c'est que tu nous indique ton URL... qu'on puisse voir au lieu de faire des supposissions sur les multiples ereurs possibles.

Mirgolth

leconseil · 23 Juillet 2003

Le code

Mirgolth a dit:
Salut,

Perso, je sent un problème de fermeture de balise... Comme la fermeture de balise est obligatoire en XHTML, le naviguateur attend d'être arrivé à la fin de la page pour comprendre que tu l'as oublié et d'essayer d'afficher quelque chose.

Néanmoins si tu as "dévoré" le site de Monique tu as dû valider ton code. Il y a donc peu de chance que mon intuition soit bonne.

En fais le plus simple c'est que tu nous indique ton URL... qu'on puisse voir au lieu de faire des supposissions sur les multiples ereurs possibles.

Mirgolth

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Ici le titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="copyright" content="Copyright © blabla" />
<meta name="Robots" content="ALL" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="frame">
<div id="haut">
ICI UN HAUT (juste une image)
</div>
<div id="contenu">
<br />
<br />
ICI LE CONTENU
</div>
<div id="menu">
<br />
ICI C'EST LE MENU
</div>
<div id="bas"><br />
<br />
<br />
<br />
<br />
<br />
<font size="1">Copyright ©blablabla (juste une ligne)</div>
<br clear="all" />
</div>
</body>
</html>

/* VOICI LA FEUILLE CSS externe (styles.css) */

body {
padding-right: 0px; padding-left: 0px; background: #ffffff; padding-bottom: 0px; margin: 0px; font-size: 10pt; color: #333333; font-family: Arial, Helvetica, sans-serif; padding-top: 0px;
text-align:center;
background-image: url('images/fond.gif');
}
#frame {
width:762px;
border: 1px solid #000000;
background:#ffffff;
margin-right:auto;
margin-left:auto;
margin-top:20px;
padding:0px;
text-align:left;
}
#contenu {
width:540px;
padding:0px;
float:left;
background:#ffffff;
}
#contenu p,h1,pre {
margin:0px 20px 20px 30px;
text-align:justify;
}
#contenu A:active {
FONT-WEIGHT: 10pt; COLOR: #333333; TEXT-DECORATION: underline
}
#contenu A:link {
FONT-WEIGHT: 10pt; COLOR: #333333; TEXT-DECORATION: underline
}
#contenu A:visited {
FONT-WEIGHT: 10pt; COLOR: #333333; TEXT-DECORATION: underline
}
#contenu A:hover {
FONT-WEIGHT: 10pt; COLOR: #990033; TEXT-DECORATION: underline
}
#contenu h1 {
COLOR: #CCCCCC;
text-align:left;
}
#contenu h1 A:active {
COLOR: #CCCCCC; TEXT-DECORATION: none
}
#contenu h1 A:link {
COLOR: #CCCCCC; TEXT-DECORATION: none
}
#contenu h1 A:visited {
COLOR: #CCCCCC; TEXT-DECORATION: none
}
#contenu h1 A:hover {
COLOR: #CCCCCC; TEXT-DECORATION: none
}
#contenu h1 span {
font-size:16px;
COLOR: #990033;
}
#menu {
width:220px;
padding:0px;
float:left;
background:#ffffff;
}
#menu p,h1,pre {
margin:0px 20px 10px 20px;
}
#menu A:active {
FONT-WEIGHT: 10pt; COLOR: #999999; TEXT-DECORATION: underline
}
#menu A:link {
FONT-WEIGHT: 10pt; COLOR: #999999; TEXT-DECORATION: underline
}
#menu A:visited {
FONT-WEIGHT: 10pt; COLOR: #999999; TEXT-DECORATION: underline
}
#menu A:hover {
FONT-WEIGHT: 10pt; COLOR: #990033; TEXT-DECORATION: underline
}
#haut {
background:#990033;
}

#bas {
clear:both;
background:#ffffff;
margin-left:170px;
}
#bas A:active {
COLOR: #000000; TEXT-DECORATION: underline
}
#bas A:link {
COLOR: #000000; TEXT-DECORATION: underline
}
#bas A:visited {
COLOR: #000000; TEXT-DECORATION: underline
}
#bas A:hover {
COLOR: #666666; TEXT-DECORATION: underline
}
table {
FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
pre {
font-size: 10px; color: blue
}
ol {
margin-right: 40px;
}
li {
list-style-type: square;
}
.livres {
list-style-type: square;
margin-left: 70px;
}
.relief {
color:#990033;
}

Mirgolth · 23 Juillet 2003

Pas de pb mis à part le dernier font qui n'est pas fermé

background-image: url('images/fond.gif');

Elle est grosse ton image ?

J'ai mis ta page ici : http://www.defis-fantastiques.net/leconseil/ et le temps d'affichage est normal. ( mais je n'ai pas l'image de fond à charger) Fait un test sans l'image.

Mirgolth

leconseil · 23 Juillet 2003

Mirgolth a dit:
Pas de pb mis à part le dernier font qui n'est pas fermé

background-image: url('images/fond.gif');

Cliquez pour agrandir...

Elle est grosse ton image ?

Mirgolth

Dans ma page la balise font est bien fermée, c'était juste une erreur de copier-coller

Sinon, pour l'image, non elle n'est pas grosse (width="370" height="76"). Elle ne pèse pas lourd du tout (14 ko)

Battochon · 23 Juillet 2003

Battochon · 23 Juillet 2003

ah sorry j'avais pas vu le dernier post...

Mirgolth · 23 Juillet 2003

leconseil a dit:
Dans ma page la balise font est bien fermée, c'était juste une erreur de copier-coller

Je m'en doutais... d'ou le smiley.

Sinon, pour l'image, non elle n'est pas grosse (width="370" height="76"). Elle ne pèse pas lourd du tout (14 ko)

Ok, alors je vois pas.
Si tu as le temps essayes de mettre en ligne une 2eme version de ton site ( par exemple index2.html ) que l'on puisse constater la différence de temps de chargement.

Mirgolth

PS: si un modo pouvais déplacer le sujet vers "Gestion d'un site web" où il serait mieux placé...

leconseil · 23 Juillet 2003

Le problème essentiel n'est pas trop le temps de chargement mais plutot ce problème lié à la balise em

En plus sous NN7 on dirait que l'affichage de la page est saccadé lorsque l'on fait défiler (rapidement) la page de bas en haut et de haut en bas à l'aide du curseur du navigateur.