Pb d'ascenceurs (scrollbars) sous Opera

Bonjour.

Après avoir cherché vainement une réponse, je m'en remets à vous...

En stage pour une agence immobiliere, je dois refaire leur site afin d'en ameliorer le referencement.

Donc il m est demande d enlever les frameset et de faire un site valide w3c ( pas de polémique sur les normes svp ).
J'ai donc remplacé les frameset par des pages incluses en php, composées de div fixes avec un ptit hack pour IE qui ne connait pas le position: fixed.

Mon probème est le suivant:

Sous IE et FireFox, tout marche correctement mais sous Opera le resultat est une catastrophe....

vous pouvez vous en rendre compte à l' URL:

http://www.inmopv.com/php/fr/Renseignements.php [/url]

Tout scrolle nimporte ou, nimporte comment ...

Le code html, vous le trouverez sur la page quand au code css, le voici:


body {
overflow: hidden;
margin: 0;
padding:0;
}

#logo{
background-image: url(./Pictures/logo.jpg);
background-repeat: no-repeat;
height: 99px;
width: 100%;
z-index: 6;
}
body>#logo {position:fixed; overflow:hidden;}

#right{
background-image: url(./Pictures/Main-right.jpg);
background-repeat: no-repeat;
background-position: top left;
position: absolute;
top: 99px;
left: 776px;
height: 100%;
width: 319px;
display: block;
z-index: 3;
}
body>#right {position:fixed overflow:hidden;}



#header {
padding: 0px 0px 0px 0px;
float:left;
width: 100%;
height: 28px;
overflow: hidden;
position: absolute;
top: 99px;
font-size: 1.0em;
background-image: url(./Pictures/Header-Background.jpg);
background-repeat: repeat-x;
background-position: top left;
z-index: 5;

}

#header ul {
margin: 0;
padding:0;
list-style:none;

}

#header li {
float:left;
margin:0px;
height: 20px;
text-align: center;
display: block;
}

#header a {

display:block;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: 0.90em;
padding:2px 5px 5px 5px;
text-align: center;

}

#header a:visited{
display:block;
}

#header a:link {
color: white;
font-weight: bold;

}

#header a:hover {
color: yellow;
font-style: italic;
font-weight: bold;

}
body>#header {position:fixed overflow:hidden;}

.content {
position:absolute;
top:127px;
left: 10px;
height:79%;
overflow: hidden;
width: 766px;
}
body>.content {
position:fixed;
}
#central {
overflow: auto;
background-image: url(./Pictures/background.jpg);
background-repeat: no-repeat;
background-position: top left;
font-size: 0.78em;
height: 95%;
z-index: 4;
}
body>#central {
position:fixed;
}




#central a:link {
color: green;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#central a:visited {
color: gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#central a:hover {
color:red;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#central a.previous{
position: absolute;
left: 100px;
}
#central a.previous:link {
color: green;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#central a.previous:visited {
color: gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#central a.previous:hover {
color:red;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#central a.next {
position: absolute;
right: 100px;
text-decoration: none;
}
#central a.next:link {
color: green;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#central a.next:visited {
color: gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#central a.next:hover {
color:red;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

#flags{
display: block;
position: absolute;
top: 60px;
left: 600px;
z-index: 10;
border: 0px;
}

#flags img{
border: 0;
}

li{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
display : list-item;
list-style-image : url(./Pictures/point.gif) ;
list-style-position: inside;
text-align: justify;
}

.spacer {
clear: both;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}

h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
color: #1F8884;
text-align: center;
font-weight: bold;
}
.small{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.90em;
color: gray;
font-style: italic;
text-align: center;
}
form{
float: left;
position: relative;
left: 20%;
}

fieldset{
border: dashed;
border-color: #1F8884;
background-color: #a1dbd9;
width: 500px;
left: 10%;
}
.cssform legend{
font-size: 1.5em;
color: #1F8884;
text-decoration: underline;
}

.cssform p{
clear: left;
margin: 10px;
height: 1%;


}

.cssform input{
padding-left: 5px;
}

.cssform label{
display:inline;
float: left;
width: 300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: purple;
}

#envoyer{
position: relative;
left: 70%;
background-color: #a1dbd9;
height: 2em;
width: 5em;
font-size: 1.5em;
color: grey;
}


Merci par avance de jeter un coup d'oeil...

gazbhan a écrit :

En stage pour une agence immobiliere, je dois refaire leur site afin d'en ameliorer le referencement.

Les bonnes vieilles habitudes de rentabilisation des stagiaires ne se perdent pas, manifestement

Mais ce qui est beaucoup plus inquiétant, c'est de voir que les enjeux qualitatifs ne sont manifestement pas perçus.

Ce n'est pas parce que c'est un stagiaire qui va effectuer la refonte: il n'a a évidemment aucune raison pour que ce ne soit pas très bien fait

Mais parce qu'au lieu d'intégrer cette refonte et l'amélioration du service Web dans le process qualité de l'entreprise (ce qui engage beaucoup plus et beaucoup plus durablement que le seul stagiaire), on fait encore et toujours du Web "plaquette publicitaire à la petite semaine" : tant que ça s'affiche, c'est bon ; ça n'engage rien sur les modes de fonctionnements internes.

la première réaction du stagiaire, dans ce cas, et dans un monde meilleur, devrait être de dire: "moi, je veux bien faire, mais pour que ce soit vraiment profitable, vous devriez investir dans une remise à niveau et une sensibilisation par des gens dont c'est le métier, parce que l'essentiel n'est pas le côté technique, contrairement à ce que vous ressentez". ça ferait aussi une sacré formation pour le stagiaire, d'ailleurs.

Passons.

gazbhan a écrit :

Donc il m est demande d enlever les frameset et de faire un site valide w3c ( pas de polémique sur les normes svp ).
J'ai donc remplacé les frameset par des pages incluses en php, composées de div fixes avec un ptit hack pour IE qui ne connait pas le position: fixed.

Oui, mais... Pourquoi diable vouloir reproduire le visuel des frameset ?

Allez : un petit saut de plus, et on a une page sans ces fichues "div fixes", avec un beau flux qui s'écoule naturellement dans tous les navigateurs, un temps de développement réduit à une petit quart d'heure, et tous les navigateurs qui sont aussi contents que leurs utilisateurs.

Même le prochain stagiaire qui devra s'y coller y retrouvera ses petits, avec des CSS sans hacks ni bidouilles, qu'il pourra prendre en main immédiatement. Que du bon

Donc... régler le rendu dans Opera, c'est viser à côté du problème. Quelques détails, sinon:
- on évite le plus souvent les changements au survol qui provoquent des déplacements de contenu. Comme la mise en italique des item de menu sur les :hover. Ou alors, jouer sur les paddings latéraux pour que ça ne bouge pas.
- les textes d'avertissement des formulaires gagneront à être placés en tête de fieldset plutôt qu'à la fin (c'est agaçant de n'avoir ces infos que trop tard en mode de rendu linéaire, quand on a déjà rempli les champs et qu'on doit alors recommencer).
- ce serait tellement bien si la langue du contenu était indiquée, ainsi que les changements de langue quand ça passe en espagnol...
- exploiter davantage le titrage (rien que pour le référencement, aussi incertain que soit le résultat)
Modifié par Laurent Denis (14 Jul 2006 - 11:19)

Bonjour,

Je ne peux évidemment qu'ajouter ma voix pour t'inciter à suivre les conseils donnés par Laurent. Mais que tu le fasses ou non, j'ajoute deux remarques :
- Passe ton code au validateur et tu verras qu'il y a des balises mal imbriquées dans ton formulaire, corriger ces erreurs résoudrait probablement une partie de tes problèmes ;
- Tu parles d'amélioration du référencement... le robot d'un moteur de recherche n'a vraiment pas grand chose à se mettre sous la dent en terme de mots clés. De même, le visiteur doit parcourir le formulaire pour savoir de quoi il est question. Un court texte de présentation du contenu du site et des services proposés serait tout bénéfice, pour le visiteur comme pour le référencement.

PS : je t'invite à éditer ton message et à utiliser le bouton "code" comme cela est expliquer dans les conseils d'utilisation du forum . Merci
Si tu veux de l'aide plus spécifique au référencement, je t'invite à consulter les 3eme et le 4eme liens cités dans les références web en bas de page.
Modifié par Monique (14 Jul 2006 - 12:02)

Merci pour vos réponses si rapides.

Concernant la reproduction du visuel des framesets, l'entreprise veut garder le meme aspect général pour son site. C'est une PME, dont le site web doit principalement servir de vitrine, et de publicité. Ce site ne cherche pas à apporter un contenu et des informations abondantes et de qualité.

Le problème du flux normal est que le menu fixe est une chose à laquelle l'entreprise tient.

Je m'efforce de respecter les standards et d'avoir une certaine accessibilité tout en respectant aussi les contraintes de design ...

Si ca ne tenait qu'a moi, le site aurait un design en flux normal exploiterait les fonctionnalités css ignorées par IE (before, after par ex) mais ce n'est malheuresement pas pour mon site perso ....

Peut etre devrais je le poster ailleurs, mais y a t il possibilté de faire des php "include" de pages renvoyées par script cgi ? Ou de recevoir ces pages et les traiter pour ne recuperer que le contenu ?

Merci beaucoup
Modifié par gazbhan (14 Jul 2006 - 12:04)