Sujet Précédent Sujet Suivant

Page html lourde à monter et descendre

Résolu/Fermé
Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009 - 24 nov. 2008 à 16:05
Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009 - 25 nov. 2008 à 00:02
Bonjour,

Voilà mon problème, j'ai modifié mon fichier site.css afin de pouvoir ajouter à ma page html, un fond ecran fixe, sur les côtés, seul le contenu bouge, mais le probleme c'est que la page est trop lourde, j'ai du mal à la descendre et la monter, pourtant il n'y a presque aucun contenu dessus, mis à part un player flash, ainsi qu'un texte défilant.
Ma question est, d'ou cela peut il provenir??.., je vous joins mon fichier site.css, afin que vous puissiez voir ce que j'ai modifié et ce qui n'irais pas .

Je n'ai que modifié le haut du fichier site.css.

Etant novice, j'espere que vous pourriez m'aider, afin que je regle ce petit détail, ce serais trés sympa de votre part.

Je vous remercie beaucoup de votre aide.


Voici le fichier site.css :

body
{background-image:url(../topic/Fond AzuRadio.jpg);
background-attachment:fixed;background-repeat:repeat;}

html, body
{
height:100%;
margin:0px;
font-family:Tahoma;
}
.wg-formfield
{
font-family:Tahoma;
}
.wg-button a:hover img
{
visibility:hidden;
}
* html a:hover
{
visibility:visible;
}
.wg-button img
{
border:0;cursor:hand;
}
.wg-button
{
text-align:center;
width:64px;
height:50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
overflow:hidden;
display:block;
background-image:url(../topic/Fond AzuRadio.gif);
background-position:top bottom;
background-repeat:no-repeat;
position:relative;
}
.wg-button a
{
color:#FFFFFF;
text-decoration: none;
overflow:hidden;
display:block;
}
.wg-button a:hover
{
color:#FFFFFF;
}
hr {
height:1px;
color:#000000;
background-color:#000000;
} h1 {
margin:4px 1px 1px 1px;
font-size:14px;
color:#FFFFFF;
}
.wg-subparag {
margin-left:16px;
}
.wg-paragraph {
font-size:14px;
color:#FFFFFF;
}
.wg-paragraph h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FFFFFF;
}
.wg-paragraph h3 {
margin:1px;
font-size:12px;
}
.wg-paragraph a {
color:#D827D8;
text-decoration : underline;
}
.wg-paragraph ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.wg-paragraph ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.wg-panel {
background-color:#FFFFFF;
font-size:14px;
text-align:justify;
color:#000000;
}
.wg-panel h2 {
margin:1px;
text-align:center;
font-size:12px;
color:#000000;
}
.wg-panel h3 {
margin:1px;
text-align:left;
font-size:12px;
color:#000000;
}
.wg-panel a {
color:#000000;
text-decoration : underline;
}
.wg-panel ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:16px;
}
.wg-panel ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:16px;
}
.twps_c0846453c782e537947c7c486d245af1 {
font-size:14px;
color:#000000;
border:1px inset #343451;
background-color:#FF6600;
}
.twps_c0846453c782e537947c7c486d245af1 h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FFFFFF;
}
.twps_c0846453c782e537947c7c486d245af1 h3 {
margin:1px;
font-size:11px;
}
.twps_c0846453c782e537947c7c486d245af1 a {
color:#000000;
text-decoration: underline;
}
.twps_c0846453c782e537947c7c486d245af1 ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_c0846453c782e537947c7c486d245af1 ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f {
font-size:14px;
color:#0000FF;
border:10px dashed #FFFFFF;
background-color:#FFFFFF;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FF6600;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f h3 {
margin:1px;
font-size:11px;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f a {
color:#000000;
text-decoration: underline;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_144b05ced1ff7e97bc70aa9bd19bb77f ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_e62955f6a99be7b664969a4956d05692 {
font-size:14px;
color:#FFFFFF;
border:2px solid #FFFFFF;
}
.twps_e62955f6a99be7b664969a4956d05692 h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FFFFFF;
}
.twps_e62955f6a99be7b664969a4956d05692 h3 {
margin:1px;
font-size:11px;
}
.twps_e62955f6a99be7b664969a4956d05692 a {
color:#D827D8;
text-decoration: underline;
}
.twps_e62955f6a99be7b664969a4956d05692 ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_e62955f6a99be7b664969a4956d05692 ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_eddb279593851b1c15154866e6f21dc6 {
font-size:14px;
color:#1C4BE2;
border:15px outset #FFFFFF;
background-color:#FFFFFF;
}
.twps_eddb279593851b1c15154866e6f21dc6 h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FFFFFF;
}
.twps_eddb279593851b1c15154866e6f21dc6 h3 {
margin:1px;
font-size:11px;
}
.twps_eddb279593851b1c15154866e6f21dc6 a {
color:#000000;
text-decoration: underline;
}
.twps_eddb279593851b1c15154866e6f21dc6 ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_eddb279593851b1c15154866e6f21dc6 ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_948000908eb60551ca69fd95c3e4ffef {
font-size:14px;
color:#FFFFFF;
background-color:#333333;
}
.twps_948000908eb60551ca69fd95c3e4ffef h2 {
margin:1px;
font-size:13px;
text-align:center;
color:#FFFFFF;
}
.twps_948000908eb60551ca69fd95c3e4ffef h3 {
margin:1px;
font-size:11px;
}
.twps_948000908eb60551ca69fd95c3e4ffef a {
color:#000000;
text-decoration: underline;
}
.twps_948000908eb60551ca69fd95c3e4ffef ul {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}
.twps_948000908eb60551ca69fd95c3e4ffef ol {
margin-top:10px; margin-bottom:10px; padding-left:0px; margin-left:24px;
}

.wg-navbt img {
border:0;cursor:hand;
}
#dhtmltooltip {
position: absolute;
width: 150px;
font-family:Tahoma;
font-size:14px;
padding: 2px;
visibility: hidden;
z-index: 100;
border-style:solid;
border-width:1px;
border-color:#000000;
background-color:#FFFFDD;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
A voir également:

2 réponses

Réponse 1 / 2
Craigthd Messages postés 34 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 août 2009
24 nov. 2008 à 16:11
le texte défilant ne doit pas prendre des masses de place.
est-ce toujours aussi lourd en enlevant l'animation flash ?
0
Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009
24 nov. 2008 à 18:11
Bonsoir Craigthd,

Tout d'abord je tiens à te remercier pour avoir répondu à mon problème, et pour m'excuser de ne pas avoir répondu avant, car je n'étais pas chez moi.

Quand tu dis que le texte défilant ne doit pas prendre des masses de place, parles tu de la place en largeur et longueur ou tout simplement, que la page ne doit pas être trop chargée??.. je pense que l'on peut charger une page jusqu'à environ 900 ko, si je me trompe pas, reprends moi si tu connais la réponse.

Aprés avoir essayer, sans l'animation flash, et sans le petit module de dédicasses, ma page est toujours aussi lourde, quand je la descend et la remonte, elle suit mais en sacadant, par acoups....

Donc pour te répondre, oui ma page est toujours aussi lourde, et mon problème reste pareil.

Encore merci à toi Craigthd pour vouloir m'aider.
0
Craigthd Messages postés 34 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 août 2009 > Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009
24 nov. 2008 à 21:40
je suppose que la page n'est pas entierement de toi ( .twps_948000908eb60551ca69fd95c3e4ffef , c'est pas super évident comme id ;p ).
Enfin dans tous les cas, le mieux serait de voir la page. Si tu pouvais donner un lien où la voir ou donner le code html, ce serait beaucoup plus simple.

Sinon, autre chose : Ta configuration indique Internet Explorer 7.0, mais ça donne quoi sous un autre navigateur ?
0
Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009 > Craigthd Messages postés 34 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 août 2009
24 nov. 2008 à 22:10
Alors pour te répondre Craigthd, quand je suis sous Mozilla, je n'ais pas mon background, c'est à dire que mes deux côtés de ma page sont blanc, et effectivement ma page est fluide quand je la descend et la remonte aucun problème.
Cela viendrait il du poid de mon image???...qui fait 685 ko....ce qui est peut être énorme, mieux vaut peut être que je change le poid de cette image???

voici le lien du site :

http://www.spacewill.fr/AzuRadio/

Et pour te répondre à ta question Craigthd, si la page était entierement de moi , heuuuuu..non , car étant novice je serais incapable de faire cela, mais je m'aide d'un logiciel de conception de site html.

Encore un grand merci à toi Craigthd.
0
Réponse 2 / 2
Craigthd Messages postés 34 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 août 2009
24 nov. 2008 à 22:55
pour le poids de l'image, le plus simple est d'essayer. (et c'est à toi de le faire car en local chez moi, ça ne rame pas donc je ne peux pas te dire si ça change quoi que ce soit).
au début de ton css, remplace
body
{background-image:url(../topic/Fond AzuRadio.jpg);
background-attachment:fixed;background-repeat:repeat;}

par
body
{background-color:#00ff00;}

Le résultat sera absolument magnifique (ahem...) mais ne pèsera rien. Si ton site rame encore avec un fond aussi léger, c'est que ça ne vient pas de là.

au passage, tu peux en profiter pour modifier ton code html ligne 162 et remplacer
<body bgcolor="#ffffff">
par
<body>

ça devrait régler ton problème d'affichage sous firefox.
0
Yuricol Messages postés 11 Date d'inscription vendredi 18 mai 2007 Statut Membre Dernière intervention 18 septembre 2009
25 nov. 2008 à 00:02
Voilà enfin ..loll...c'est bon Craigthd, et ceci grâce à toi, donc j'ai remplacez

{background-image:url(../topic/Fond AzuRadio.jpg);
background-attachment:fixed;background-repeat:repeat;}

par
body
{background-color:#00ff00;}

mes côtés sont a présent vert fluo..LOL. et mes pages sont entierement fluide, nikel, donc ce qaui résume que c'est bien le poids de mon image 685 ko, c'est de trop apparament, je vais donc diminuer le poids en variant la qualité etc...

Pour le problème sous Mozilla, j'ai remplacé comme tu l'as dis

<body bgcolor="#ffffff">
par
<body>

et maintenant c'est bon, cela fonctionne nikel, je vois maintenant mon background sur chacun des cotés et tout ça avec la même fluidité que sous IE.

Je n'ai que quelques mots à dire...eh bien merci à toi Craigthd pour ton aide et ta gentillesse, et bravo pour ton talent en la matiére , tu es une bête....!!

Merci Encore Craigthd.
0

Discussions similaires

Comment faire pour couper une feuille en 4 sur word ?
anonyme -
Moi -

11 réponses
Séparer une page Word en deux
LauurineZel -
telliak -

6 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses