28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement d'un contenu central avec ou sans scroll barr

Bonjour la populace!

Voilà, j'ai un petit soucis de positionnement du contenu de mon bloc central.
En effet, selon si la barre de défilement verticale est affichée ou non, le contenu est décalé de quelques centimètres, et de ce fait , ne se trouve plus a sa place dans l'image de mon background.

J'ai tenté de toujours afficher la barre, grâce à : overflow-y:scroll.
Mais ça ne me convient pas pour plusieurs raisons Smiley ohwell
Déjà ça ne semble compatible qu'avec FF, et puis même avec FF, ça m'affiche deux barres de défilement cote a cote x)

J'imagine qu'il existe d'autres solutions, je ne dois pas être le seul a vouloir un contenu central convenablement placé dans une image d'arrière plan x)

Merci d'avance pour votre aide =)
Bonjour,

Solution 1: ne pas utiliser de barre de défilement interne. Les barres de défilement interne, bien souvent c'est une catastrophe ergonomique.

Solution 2: appliquer l'image de fond à un bloc à l'intérieur du bloc qui a une barre de défilement interne.
Merci Florent pour ta réponse!

En fait je suis pas encore bien familiarisé avec les feuilles de style.
Pour le moment ma page est très basique :
Juste un div central, la barre de scroll est celle de body.
L'image d'arrière plan est appliquée a ma balise body, laissant une partie transparente en son centre de 800px.

Mais le contenu de ma div centrale se déplace de la taille de la barre de scroll en fonction du contenu de la page afficher.

Je suis d'accord avec toi sur le fait que ergonomiquement parlant les barres de défilement interne ne sont pas chouette, mais dans mon cas ça pourrait peut être m'aider?
Ok, je n'avais pas compris que la barre de défilement était celle de body, vu que tu parlais d'un bloc interne.

C'est bizarre, il ne me semble pas que les navigateurs décalent l'image de fond de body ainsi. Est-ce que tu aurais oublié de la centrer, par hasard?
background-position: center top;


Je fais un test et je t'en dis plus...
Hop, page de test, essai concluant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
	html, body {
		height: 100%;
	}
	body {
		margin: 0;
		padding: 0;
		background: url(http://forum.alsacreations.com/skins/alsacreations/titre.gif) repeat center top;
	}
	div#global {
		overflow: hidden; /* évite la fusion des marges */
	}
	p {
		width: 758px;
		margin: 50px auto;
		padding: 10px;
		background: white;
		border: 1px solid black;
	}
	p#para {
		width: 740px;
		border: 10px solid red;
	}
	</style>
</head>
<body>
<div id="global">
	<p>
		<a id="etendre" href="#" onclick="
			document.getElementById('para').style.height='2000px';
			document.getElementById('reduire').style.display='inline';
			this.style.display='none';
		">Étendre</a>
		<a id="reduire" href="#" style="display: none;" onclick="
			document.getElementById('para').style.height='auto';
			document.getElementById('etendre').style.display='inline';
			this.style.display='none';
		">Réduire</a>
	</p>
	<p id="para">Bla bla</p>
</div>
</body>
</html>
Tu peux recréer cette page en local (crée juste un fichier .txt avec ce code et renomme le en .html, par exemple), et le tester. La présence ou non d'une barre de défilement ne modifie pas l'alignement des éléments centrés (horizontalement) dans la page et de l'image de fond centrée également.
Plop Florent !

Voici ce que j'applique a ma balise Body :


background: #FFF url(Fond3.png) no-repeat top center fixed;


Mais je pense avoir compris, j'ai fait quelque chose de mal, très mal :x
Mon background était appliqué a deux élements : html et body puisque déclaré de la sorte :


html,body
{
	height:100%;
	width:100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	background: #FFF url(Fond3.png) no-repeat top center fixed;
}


J'ai changé tout ça en ne l'appliquant qu'à body et effectivement, tout reste en place maintenant (on devrait jamais coder la nuit ^^)

edit : Merci pour la page de test Smiley cligne
Je modifie tout de suite le sujet, résolu!
Modifié par The_Moye (29 Mar 2008 - 14:28)
Sujet clos
Aller à