18041 sujets

Questions générales et questions de débutants

Des ancres données qui tue la mise en page

Bonjour tout le monde !

Petit pwoblème que je tente sans succès de résoudre...

Il s'agit en fait d'une page centrée dans les deux axes et incluses dans une balise div. À l'intérieur de cette même balise, se trouve une non-moins importante autre balise div conteneur pour du texte. Or voilà, le texte est très long et donc, je mets sur le côté des liens donnant sur des ancres données positionnées, vous devinerez, stratégiquement dans le texte pour facilité la navigation.

Mais le big problème c'est que j'ai dû arracher des dents à un vers de terre pour centrer cette page et que, aussitôt que je clic sur un lien amenant à une ancre donnée, la page ne demeure pas centrée verticalement.

à la limite, je me demande si l'action ne devrait pas avoir lieu simplement dans la balise div de mon texte avec scroll déroulant mais bon, j'en suis au stade de l'exploration...

voici le lien de la page en question...si vous pouviez m'aider là-dessus, cela serait très apprécié...
http://hityan.ifrance.com/

Merci à vous tous et à vous toutes et vive la communauté !
Smiley biggrin
Bonjour à tous,
je suis vraiment à bout d'idées...

Tout ce que j'ai trouvé c'est que quand on active un lien pour aller sur un ancre donné et que mon image de fond est grande, la page qui s'ouvre est décentrée sur l'axe verticale. Quand mon images de fond est petite, elle conserve son positionnement à l'ouverture.

C'est tu un genre de préférence de centrage de page d'ancre donnée ou quoi ? je ne sais même pas par ou commencer à continuer de chercher !

S.V.P! un conseil !
Ca ne viendrait pas tout simplement de la barre ifrance en haut ?

J'ai désactivé javascript sous Firefox, exit la barre, et je ne vois plus de problème.
Merci infiniement DidierK

Je ne crois pas, car cela me joue la même chanson dans mes aperçu navigateurs tout navigateurs confondus.

On dirait que le programme dit d'ouvrir la nouvelle page centrée en fonction du contenu de mon calque de texte déroulant...

C'est pourtant quelque choses de banal, non ? de placer des ancres données et de faire apparaître les liens y étant rattachés... Smiley ohwell
Je te le dis, je n'y comprend plus rien. sur un site conventionel, hop et on ne fait que défiler le texte dans le bloc, le fond de la page reste statique... Pas moyen de fixer le tout ? un genre de super colle internet ? Smiley cligne
Administrateur
akinayotaka a écrit :
développement...
J'ai essayé avec position:fixed; et niet...

Hello,

En effet, IE ne supporte pas la position fixed.
Mais pourquoi ne pas avoir fait un tour dans l'incontournable FAQ comme cela t'es conseillé à l'inscription ?

Voilà qui devrait t'aider : http://forum.alsacreations.com/faq/#item67
Bonjour Raphael

J'ai beau essayer, rien n'y donne. Je crois que c'est parce que j'ai un élément calque comme arrière plan. Que tous les autres calques sont imbrtiqués dans ce dernier. Les exemples donnés dans le FAQ correspondent à une construction sans superposition. Qui plus est, mon calque de fond est positionné avec des marges négatives...

C'est le bordel, quand j'applique la règle, tout se déplace et le résultat est encore pire. Au secour !

Voici une partie de mes CSS. 

/*modification telle que présentées dans les tutos*/
html, body {
	height: 100%;
	width: 100%;
	overflow: auto;
}

body{
  margin:0px;
	padding:0px;
	overflow:hidden;
	height:100%
}
/*partie contenant l'image d'arrière plan et qui laquelle doit rester fixe*/
#arrplan {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 1024px;
	height: 768px;
	margin-top: -384px;
	margin-left: -512px;
	z-index: 1;
}
/*partie contenant les liens ayant leur ancres dans la partie textes_scroll*/
#liens {
	position:absolute;
	left:240px;
	top:257px;
	width:84px;
	height:236px;
	z-index:2;
}
/*partie contenant le texte avec barre de défilement*/
#texte_scroll {
	position:absolute;
	left:337px;
	top:257px;
	width:491px;
	height:362px;
	overflow:auto;
	scrollbar-base-color :#4F437E;
	z-index:3;
}

Mon projet est en plus un modèle de page.

Merci beaucoup !
Peut-être pourras-tu y voir ce que je ne vois pas ?
Modifié par akinayotaka (23 Aug 2006 - 17:38)
Modérateur
bonjour,

en fait tu as un probleme de debordement de fenetre,

essai en indiquant a html , body et #fond les dimension suivantes : height:100%;width:100%; (attention au probleme des marges negative qui fond disparaitre la page sur le haut et la gauche en cas de redimensionnement et qui n'apprecierons peut-etre pas ces nouvelles valeurs :
ex: 

html, body {margin:0;padding:0;/* pour annuler les marges */
height:100%;width:100%;
}
#fond  img {height:100%;width:100%;}/* attenetion ici de ne cibler que l'image de fond afin de l'empecher de deborder.*/
/* le mieux a faire est de mettre cette image en fond a body en position center center  avec une couleur de fond dans les ton de l'image */
#fond {
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-50%;
	margin-left:-50%;
	z-index:1;
}


en enlevant, empechant ta page de deborder (en particulier a la taille de l'image ) , tu ne devrais plus avoir cette effet deplaisant qui est tout a fait normal.

pour te defaire des marges negative et centré ta page , la solution la plus fiable et qui n'abime en rien le codage ni ne va au detriment de la semantique Smiley smile (ou du moins de l'accessibilité visuelle quelque soit la taille de la fenetre) c'est de placé ta page dans un tableau ex:
http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html
je n'ai aucune "honte" Smiley cligne a proposé un tableau contre le risque de faire disparaitre ou rendre inaccessible un morceau de la page .

En bref , si tu arrive a maintenir sa page dans la fenetre sans scroll (donc dans ta configuration les limites sont en hauteurs 768px + la banniere de pub + les marges par defaut sur html/body ), tu ne verra plus ta page descendre quand tu "vise " une ancre en bas de page Smiley smile .

Pour le tableau une cellule , tu en fait ce que tu veut Smiley smile
l'ideal reste d'avoir un hebergeur qui ne t'impose pas un javascript en banniere qui fera basculer IE en mode quirk de toute façon. Smiley decu

++ et bonne continuation.
Bien le bonjour à toi gcyrillus !

J'ai pris ton exemple pour en faire une page "ressource" personnelle. Voilà donc que je reprend le travail du début afin d'isoler les variables pour en faire un genre de référence et à peine débuter, que le centrage vertical ne fonctionne pas...Je suis bien embêter car, étant novice, je tente de comprende avec les ressources que j'ai... et je comprends pas fort Smiley cligne

Mes questions :

-Ou met-on le margin:0 auto; (cité dans ton exemple) ?
-dois-je supprimer les infos sur la hauteur (comme je l'ai fait pour aller dans le sens de ton exemple)?
-Qu'elle erreure ais-je fait ? le conteneur table ne se centre pas à la vertical...
Pourquoi un largeur de 99% ?

Voici mon humble code...
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test ancrage fix&eacute;</title>
<style type="text/css">
<!--

html, body, table, td{
	height: 100%;
	width: 99%; 
	border:0;
	/* pour annuler les marges */
	margin:0;
	padding:0;
}

td {
	text-align: center;
}
-->
</style>
</head>
 <body>
   <table>
     <tr>
      <td><img src="images/fond de page pour tous.jpg" width="1024" alt="arriere_plan" /></td>
     </tr>
   </table>
 </body>
</html>


Merci beaucoup pour ton aide, elle est très appréciée !
Smiley biggrin
Modifié par akinayotaka (23 Aug 2006 - 17:36)
Hello! Encore moi !
Dans mes tentatives, en m'inspirant de toi, j'ai essayé ceci:
<!--

html, body, table, td{
	height: 100%;
	width: 100%;
	border:0;
	margin:0;
	padding:0;
             }
td {
	text-align: center;
	margin: 0 auto;
	background-image:url(images/fond de page pour tous.jpg);
	background-position:center; 
	}
-->
</style>
</head>
 <body>
   <table>
     <tr>
       <td></td>
     </tr>
   </table>
 </body>
</html>

Je ne sais pas vraiment ce que j'ai fait, c'était une intuition... Mon côté féminin probablement Smiley biggrin

N'empêche que le centrage fonctionne: mais je n'ai pas d'images sur mon plan création dans dream... difficile d'aligner...
suis-je sur la bonne voie ?
Modifié par akinayotaka (23 Aug 2006 - 17:37)
Vraiment navré pour cet exploit visuel... en effet je pourrais améliorer grandement ma présentation. dois-simplement sélectionner la partie code et cliquer mise en forme code ou bien dois-je faire la chose manuellement ?

édit par Igor: manuellement en éditant les messages Smiley cligne
édité par Akin.: J'imagine que c'est mieux comme ça ! Smiley cligne
Modifié par akinayotaka (23 Aug 2006 - 17:39)
Bonjour à tous et à toutes !
Enfin, après 6 jours de recherches, de discussion, de tentatives semi-fructueuses et grâce au concours de vos pistes de solutions, j'ai finis par résoudre mon problème.

Je ne suis pas certain de la propreté de la chose, parce que mon background image bouge toujours après avoir redimensionner la fenêtre du navigateur. Mais, ayant remarqué que la position absolute se fixe en fonction du premier élément ancêtre définit et qu'un petit bloc n'entrainait pas de décentrage, j'ai donc définit un bloc central fixe par absolute et imbriquer à l'intérieur tous les autres éléments. Mon bloc central ne dépassant ainsi d'aucune manière les bords de l'écran, car je crois que là résidais le problème, le fait de pointer vers une ancre basse dans un bloc de texte déroulant ne fait plus bouger le bloc conteneur central.

Hop !

CSS
<!--
body {
	margin:0;
	padding:0;/* pour annuler les marges */
	height:100%;
	overflow:hidden;
	background-color:#d6b05b;
}
html {
	height:100%;
	overflow:hidden;
}

/*ici je conserve mon éternel besoin de centrer les blocs...*/

#bloc {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 658px;
	height: 498px;
	margin-top: -249px;
	margin-left: -329px;
	z-index: 1;
}


coté html
(Je mets mon background image ici car, dans firefox,elle n'apparait pas quand je l'insere dans mes CSS.)

<body background="images/fond seul.jpg">
   <div id="bloc"><img src="images/bloc centre.jpg" alt="bloc"       width="658" height="498" /></div>
</body>


j'apprécierais vos commentaires car, s'il y a place à compréhension et/ou amélioration, je suis toujours ouvert !

Merci pour votre précieuse collaboration !
Modifié par akinayotaka (24 Aug 2006 - 16:02)
Modérateur
bonsoir,

pour repondre a ta question du width:99%; , il peut-etre remis en 100% en appliquant un border-collapse:collapse; (ou ne pas applique aussi la largeur a "<td>" ) dans l'exemple en ligne ce qui evitera au tableau de se voir etirer au dela des 100% initial.

Ceci dit tu as pris l'option d'eviter le "scroll" autrement et tu as ton resulat escompté Smiley smile .

Pour le background qui ne passe pas dans firefoxe ,
soumet ta page au validateur html et css pour delogé d'eventuelles erreurs de frappe.
Une accollade de fermeture dans le css doublé par exemple , ou une apostrophe manquante ou en trop dans le html, .... ou bien l'espace dans le nom du fichier : bloc centre.jpg , plutot faire : bloc_centre.jpg Smiley smile

ton exemple n'est plus en ligne , ce ne sont donc que des conseils/pistes.

Bonne continuation !

++
Modifié par gcyrillus (25 Aug 2006 - 18:39)
Sujet clos
Aller à