28173 sujets

CSS et mise en forme, CSS3

Centrer ce Css [ RESOLU EN 1 MINUTE ]

Hello!

Voilà, je suis en train de faire une mise en page, qui st vraiement très simplifiée pour le moment...

Je souhaite centrer mes div's, mais pas moyen...
Pourtant, je pense avoir fait ce qu'il fallait !!!!

Voici le code de mon css -----------------


 body{
	margin: 0px;
	text-align: center;
}

#tete{
	height: 42px;
	width: 100%;
	background-image: url(Images/golo.gif);
	background-repeat: repeat-x;
}
#logo{
	background-image: url(Images/logo.gif);
	height: 100px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
#contenu{
	background-color: #999999;
	width: 80%;
	background-position: center;
	text-align: center;


Voici le code de ma page--------------------

<body>
<div id="tete"></div>
<div id="logo"></div>
<div id="souslogo"></div>
<div id="contenu">adzazdzadzadad</div>
<div id="pied"></div>
</body>


Pour finir, voici un visu, avec on le voit bien, ma balise div ou se trouve le texte, non centrée..

Moi j'aimerais qu'elle se trouve au centre !!! upload/14508-copie.jpg
Modifié par FranZz (29 Oct 2007 - 11:33)
Smiley lol Smiley lol Une solution serait de faire des marges à mon body par exemple...

Mais cela ne me convient pas Smiley langue , parce que je souhaite faire du "plein bord" avec des Background's... Smiley murf Smiley murf
Hello Mikachu;

Je crois que je vois ce dont tu parles, enfin, je vais mater un peu voir ce qu'y s'y raconte !!!
Smiley sweatdrop Ok c'est bon !!!

En fait, c'est le fait de mettre des 
 	margin-left: auto;
    margin-right: auto;


qui permettent de faire cela...

Smiley murf

Bon, ben c'est ok pour moi !!!

Merci !
Bonjour,

je n'ai pas eu de problême à ce niveau jusqu'à ce que je voulais personnaliser mes id...

voila mon code en css :

#page {width: 60%;
text-align: left;
margin-left: auto;
margin-right: auto;
background-color: black;
border: 2px solid black; }

#global {background-color: black;
margin-left: auto;
margin-right: auto;
width: 65%;
border: 2px solid white; }

#recherche {position: absolute;
margin-left: 10%;
margin-right: auto;
margin-top: 5%;
margin-bottom: auto;
border: 2px solid blue;
color: white }

#langue {position: absolute;
margin-left: 40%;
margin-right: auto;
margin-top: 5%;
margin-bottom: auto;
color: white;
border: 2px solid white; }

#rubriques {position: absolute;
... etc ...


et en html :

<html>

	<head>
<link rel="stylesheet" type="text/css" href="feuille1.css" media="all" />
		<title>menu</title>
	</head>
	<body>
	<div id="global">
		<div id="recherche">fonction recherche
		</div>
		<div id="langue">fonction langue	
		</div>
		<div id="participer">participer 
		</div>
		<div id="rubriques">menu rubriques   	
		</div> 
    	<div id="articles1">dernier article 1
		</div>
   	 	<div id="articles2">dernier article 2
		</div>
		<div id="breves">breves</div>
</div>
	</body>
</html>


ce qui devrait me donner au final un rectangle noir centré horizontalement qui engloberait mes autres <div id=...> mais rien n'y fait... j'ai tenté de comparer d'autres pages pour voire où pouvait être le problème... mais je ne trouve pas du tout la réponse... je n'arrive pas à comprendre pourquoi mon #global ou #page n'arrivent pas à faire un rectangle qui centre mes blocs...

j'ai pourtant relu le tuto... soit je suis passé à coté de qelque chose... soit je sis idiot Smiley langue

voila le résultat que ça me donne :
http://otxando.free.fr/test-accueil.html

un grand merci pour votre aide... j'ai conscience que la réponse doit être évidente Smiley ohwell merci de votre patience
Modifié par bga_O (06 Nov 2007 - 18:28)
Salut,

à bga_O : Aurais tu la courtoisie d'ouvrir ton propre sujet, au lieu de poser ta question dans un sujet déja marqué comme résolu. Tu auras certainement plus de chances d'avoir une réponse, car il n'est pas dit que tout le monde lise les sujet déja résolus. Rien ne t'empêche de faire un lien vers ce sujet s'il apporte quelque chose au problème que tu rencontres.

Merci de ta compréhension. Smiley cligne
Sujet clos
Aller à