Problème fausse frame avec ancres

Bonsoir,

J'ai un gros soucis avec la mise en page de mon design et je voulais savoir si peut être quelqu'un pourrait m'aider.

Le code est plutôt complexe et j'ai du opter pour les fausses frames, bien que ce ne soit pas conseillé, afin d'avoir le style de design que j'avais prévus.

J'ai également fait un système de "plan" pour les articles, avec des ancres. Mon problème est que sous Firefox, Opera etc (et non sous IE), lorsque l'on clique sur une de celles-ci, le bloc "container" se soulève de quelques px (et pas les background "bgg" et "bgd"). De plus le décalage varie en fonction des ordinateurs, ce qui est surement dû à la résolution d'écran.

Voici le lien du design

Pour info, il y a une feuille de style pour FF et IE, et une appelée en plus uniquement sous IE pour les fausses frames.

Merci et bonne soirée.
Modifié par Orelien (31 Oct 2006 - 21:42)

bonsoir ,
probablement que le
line-height:0;
est en cause

++

Bonsoir,

Je les ai enlevé mais apparement le problème ne vient pas de là .

Merci tout de même,

++

?! , pour moi , le probleme est réglé dans ff des que le line-height est laissé a ses valeurs par defauts . si line-height:0; alors l'ancre vient au niveau de celui-ci , bien evidement , les caracteres eux etant plus haut que zero et posée sur le "baseline" , il disparaissent evidement bien au dessus ..

++

Ah .. ok

Désolé, en fait on ne parlait pas de la même chose. Effectivement, sans le line-height c'est ok pour ce décalage dans le texte, mais je parlais du soulèvement du bloc "container" qui se produit et qui est bien plus génant ...

Une petite captute pour illustrer :

Modifié par Orelien (31 Oct 2006 - 23:25)

oups , désolé, heu , la je dirais que le resultat est normal , car en activant un lien vers une ancre tu donne aussi le focus a ce conteneur , qui vient aussi se placer en haut de page si possible , essai d'appeler une ancre sur une fenetre qui fait 300px de hauteur , tu vas avoir peur.

En fait , ce n'est pas vraiment un bug , désolé.

++

Mince ...

Mais il y aurait peut être une manière de corriger cela, peut être en fixant le div de contenu non ?
Car sous IE, tout fonctionne parfaitement ...

bonsoir,

je viens de modifier en ligne le css , le resultat semble probant dans FF ... sous reserves.

#contenu {
	position: absolute;
	background-color: #F5F6F0;
	left: 277px;
top: 0px;
	margin-top: 130px;
	right: 188px;
	bottom: 0px;
margin-bottom:150px;
	overflow: auto;
	width: 591px;
}

#contenu div {
	padding: 20px 20px 20px 20px;height:100%;
}


body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	overflow: hidden;
	text-align: center;
	background-color: #EEF0E5;
	width: 100%;
	color: #2e2e2e;
position:relative;
}
#container {


    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
	width: 1000px;
margin:0;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

j'ai modfie le positionement de #contenu en y ajoutant des marges
le position:relatives est passe de #container a body et #contenu div prends height:100% pour bien etirer la page sur toute sa hauteur.

resultat ça ne saute plus , le div redimensionné/rafraichit par le focus sur l'ancre en remontant provoqué ce defaut de calcul de hauteur dans firefoxe a priori.

Sous reserves de test dans d'autre navigateurs et en modifiant reelement le css. (test a faire sur copies)

J'avais fait les modifications une première fois et tout avait l'air de bien marcher (j'ai du ajouter un margin sous IE, mais ca marchait aussi) !

Ensuite comme j'ai voulu re-centrer la page, j'ai modifié le code, et comme ca ne marchait toujours pas, j'ai remis une sauvegarde et recommencé la modification et depuis ca ne marche plus ...

bonsoir ,
les modifs sont sur la page en ligne ?
++

Bonsoir,

Voilà, j'ai remis la page modifié.
Merci encore pour votre aide !

Bonne soirée,
++

bonjour,

en effet , ça ne marche qu'en utilisant "EditCss en ligne.
ça ressemble a un vrai bug , mais ...

pour reprendre un truc de rafraichissement d'opera , il y aurait :

#container:hover {height:200%;}

ou

body:hover {overflow:visible;}

.

ça reste de la bidouille a 200% comme soluce , il faut bouger la souris et ça remet brutalement la page en place.

As tu validé les codes css et xhtml?
target="_blank" n'est pas valide par exemple avec le doctype que tu as choisi , surement rien a voir néanmoins

as tu essayer sans incorporé les elements flash a la page .

Il manque un bouton pour remonter , en passant .


Le #container ne semble pas servir a grand chose finalement, il ne contient que des elements en absolu a priori.

En allant plus loin je dirais que le decoupage des images est peut-etre ecxessivement compliqué et qu'il y a surement moyen de faire plus economique en html et avec moins de positionement absolu.

au bout du compte , il n'y a pas grand choses pour "etirer réllement le body et le dimensioné/redimensionné" du coup ff semble s'emmeler les pinceaux . . Le defaut d'affichage provient peut-etre de la .
a propos body pourait recevoir une image de fond s'etirant sur toute la hauteur comme celle du menuspacer.jpg , par exemple.

Je crois bien ne pas pouvoir t'aider plus que ça sur cette page .

bonne journée.