28172 sujets

CSS et mise en forme, CSS3

Arrière-plan étirable : conteneur central pas centré

Bonjour,
Je souhaite mettre un arrière-plan étirable sur la page entrée d'un site (comme expliqué sur l'astuce de Raphaël). 

<body>
<img src="images/pageEntrerG.png" id="fond" alt="">

<div id="conteneur_centre">
	<h1>LOGO</h1>

	<ul id="menu">
		<li><a href="#">ENTREE 1</a></li>
		<li><a href="#">ENTREE 2</a></li>
	</ul>
</div>
</body>
</html>


html, body {
	height: 100%;
	width: 100%;
}

#fond {
	height: 100%;
	width: 100%;
}

#conteneur_centre {
	width: 950px;
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 1;
	margin: 0 auto;
	background-image: url(images/pageEntrer2.png);
	background-repeat: no-repeat;
	background-position: center top;
}


L'arrière-plan s'étire parfaitement mais je souhaite centrer la div #conteneur_centre et je n'y arrive pas.

Que puis-je faire pour centrer le contenu de mon site sur ce fond étirable ?
Merci par avance pour votre aide.
Bonjour,

passer #conteneur_centre en position:relative; et margin:0 auto; .

Redéfinir probablement les marges internes et externes de html et body, ainsi que h1 et ul .

GC
merci beaucoup GC,
J'ai fait ce que tu m'as dit. Mais la div conteneur_centre est descendu se caler en dessous de mon image de fond, comme si la position relative ne suffisait pas à le caler en haut de mon body.
Tu parles des marges internes html et body, je vois pas ce que je dois faire. Je suis débutante, c'est un de mes premiers sites et je cafouille encore pas mal.
merci encore de ton aide, et bonne soirée.
bonjour GC,
j'ai passé ma matinée à lire tout ça. J'ai appris plein de choses. Merci encore.
Sinon, je crois que j'ai réussi, en tout ça marche. S'il te plaît, dis-moi ce que tu en penses, toi.
Voici ce que j'ai fait :

<body>
<img src="images/pageEntrerG.png" id="fond" alt="">

<div id="conteneur_centre">
	<h1>TEXTE</h1>
		<ul id="menu">
			<li><a href="#">ENTREE 1</a></li>
			<li><a href="#">ENTREE 2</a></li>
		</ul>
</div>
</body>
</html>


html, body {
	height: 100%;
	width: 100%;
}
#fond {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}
#conteneur_centre {
	width: 950px;
	height: 100%;
	margin: 0 auto;
	background-color: #F03;
}


Bonne journée.
bonsoir,

sur le fond, css 3 propose : background-size, c'est mieux Smiley smile . en français : http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html entre autre lien, on en a parlé aussi sur le forum.

Html et body mériteraient un RAZ des marges internes et externes.

La balise image, qui sert a habillé le fond pourrait être mise en dernier dans le flux de la page, a moins que cette image véhicule quand même un message, que l'attribut alt pourrait retranscrire.

Le z-index négatif ne passe pas dans tout les navigateur, je préconiserait pour assurance un z-index a zéro pour l'image et un position:relative; + z-index:1; poir le contenu.

Pas vu le doctype utilisé ?

Cordialement,
GC
Sujet clos
Aller à