28172 sujets

CSS et mise en forme, CSS3

Problème d'alignement de mon conteneur.

Bonjour, voilà j'ai créer un conteneur qui me permet de centrer tout le contenu de mon site.


#bodycenter
{
	width:732px;
	text-align:center;
	position: relative;
	margin-left: auto; 
	margin-right: auto; 
}


Dans ce fameux conteneur "bodycenter" je dois insérer un autre conteneur aligner sur la gauche, mais je n'y arrive pas il me centre tout.

Comment je dois faire?
En vous remerciant.
Cordialement Tchupa.
Bonjour Tchupa,

Peux-t-on voir ton code XHTML s'il te plaît ?

Cependant, je vais essayer de te proposer une solution pour pallier ton problème :

Dans ton conteneur bodycenter tu peux ajouter un autre bloc que l'on va appeler page

Ce qui te donne ça :

<!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="fr" lang="fr">

<head>
	<title>page de test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>

<body>

	<div id="bodycenter">
		<div id="page">
		
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt turpis et est dignissim euismod. Curabitur porta, libero<br />
			ut sodales facilisis, sapien quam laoreet ipsum, vel suscipit lectus augue id libero. Donec vel tellus arcu. Nam quis elit<br />
			adipiscing orci interdum lacinia eu in libero. Fusce vestibulum, leo vel tincidunt ullamcorper, neque nulla euismod tortor, at<br />
			ullamcorper tellus odio vitae nunc. Proin eget neque ante. Donec aliquet venenatis turpis, at pretium lacus pulvinar a.<br />
			Suspendisse sem justo, convallis eget consequat id, sagittis id neque. Etiam tristique, dolor in auctor vulputate, mauris felis<br />
			consequat ipsum, nec auctor est magna non metus. Sed nec tellus et neque volutpat pellentesque et mollis ipsum. Integer<br />
			iaculis, ligula et suscipit convallis, nisi arcu scelerisque purus, id tristique nunc dolor ac libero. Nullam et tellus non ligula<br />
			sollicitudin placerat. Nulla elementum volutpat arcu at pretium. In ut lectus in nulla dignissim tincidunt. Integer quis lectus elit.<br />
			Maecenas in condimentum nulla. 
			</p>
			
		</div>
	</div>

</body>
</html>

Ici, j'ai ajouté du texte et c'est ce dernier qui devra être aligné à gauche.

Ensuite, l'idée est de "supprimer" la marge de gauche au bloc #page et, de ce fait, ce dernier sera aligné à gauche.

Ce qui nous donne ceci pour le code CSS :

/* CSS */

#bodycenter {
	width:732px;
	height: 700px;
    text-align:center; 
    position: relative; 
    margin-left: auto;  
    margin-right: auto;
	border: 1px solid #c00;
}

#page {
	width: 400px;
	height: 500px;
	margin-left: 0;
	border: 1px solid #00cc00;
}

J'ai rajouté des bordures et une hauteur pour les blocs, libre à toi de les modifier.

Es-ce le résultat escompté ?
Sujet clos
Aller à