28173 sujets

CSS et mise en forme, CSS3

Div Css, centrer

Bonjour à tous,

Je prépare un site web …, et j’ai toujours un problème pour centrer automatiquement la mise en page que je prépare avec dreamweaver ….

Je travaille avec des div et avec un fichier css …

Je travaille sans penser que mon site doit centrer pour chaque résolution et donc quand je bosse je travaille par rapport a mon écran et donc en 1024/768 sur mon écran le site est centrer.
Mais si je bosse en 1152/864 sur mon affichage de dreamweaver le site n’est pas centrer et l’aperçu du html aussi ( sur le navigateur IE & FF ) .

Ce que j’ai fait taper sur google centrer un div et je suis tomber sur ce sujet ici qui est intéressant
…

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

J’utilise la méthode citer dans l’article mais mon site ne ce centre pas …

Voici mon code de base

Le html

<div id="01 "><img src="images/01.gif" width="801" height="17" /></div> 
<div id="02 "><img src="images/01.gif" width="801" height="22" /></div>


et le css

#01 {
	position:absolute;
	width:263px;
	height:14px;
	z-index:2;
	left: 100px;
	top: 195px;
}
#02 {
	position:absolute;
	width:200px;
	height:13px;
	z-index:3;
	left: 369px;
	top: 195px;
}

Après avoir lu le lien j’ai fait ça

<div id="global">
<div id="01 "><img src="images/01.gif" width="801" height="17" /></div> 
<div id="02 "><img src="images/01.gif" width="801" height="22" /></div>
</div>


Le css

#global {
     margin-left: auto;
     margin-right: auto;
     width: 802; 
     }
#01 {
	position:absolute;
	width:263px;
	height:14px;
	z-index:2;
	left: 100px;
	top: 195px;
}
#02 {
	position:absolute;
	width:200px;
	height:13px;
	z-index:3;
	left: 369px;
	top: 195px;
}


Mais ça ne marche pas ...
Pouvez vous me dire la cause ou si y’a un problème dans le code
Et aussi savoir si c’est la meilleur façon de bosser ?

Merci d’avance
Amicalement
IVIedia
Re a tous

J'ai contrer leprobleme avec ça

#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -300px; /* moitié de la hauteur */
margin-left: -505px; /* moitié de la largeur */


mais je travail avec des valeurs negatif c'est grave ? ou pas grave
merci bien
Modifié par IVIedia (23 Jun 2007 - 19:50)
Administrateur
IVIedia a écrit :
ouep j'avez deja essaye avec ça ...
le px mais rien ne se centre ...

Smiley smile
merci

Hello,

Oui forcément puisque tous les éléments internes sont positionnés en absolu.
As-tu lu tout le tutoriel ? Même la partie qui traite des éléments en position absolute ?
merci raphael
par apres j'ai lu la suite mais ca ne va pas


je peux travaille avec des valeur negatif ?

#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -300px; /* moitié de la hauteur */
margin-left: -505px; /* moitié de la largeur */

merci bien
Bonsoir,

Centrer le conteneur global avec la technique des marges automatiques. C'est la première décrite dans le tutoriel. Ne pas utiliser, autant que possible, les marges négatives pour un bloc positionné en absolu (risques de contenus rognés et inaccessibles).

Si certains éléments à l'intérieur du conteneur global doivent être positionnés en absolu par rapport à ce conteneur, il suffira de faire ceci :
div#global {
	position: relative;
}

Ainsi div#global servira de référent pour ses enfants et descendants positionnés en absolu.
Bonjour,

Probablement faudrait-il reprendre avant tout quelques bases quand au positionnement css et les notions de flux (en particulier Openweb en trois leçons: une, deux, trois) plutôt que de se contenter de quelques martingales au centrage d'éléments. Smiley cligne

Une fois assimillées ces quelques bases tout devient plus simple et évite les tatonnements Smiley smile
Je vous remercie d'avance pour vos réponses Smiley smile
J'ai fait une méthode mais ya des absolu, des negatifs et tout ...

jusqu'a présent je bosse ainssi ...
je regarde les liens donner et test ce qui a dit FLorent 

div#global {
	position: relative;
}


Je regarde tout ça demain car je suis fatigue Smiley rolleyes
merci encore a vous !
bonne soiree
Bonjour a vous, je voulais savoir si c'est bon c'est 2 lien que je vous passe ... si a votre resolution il centre bien, et aussi si c'est juste ...

index
Page Membre

Dans mon css tout est absolute

pour la page membre

#global {
position:absolute;
left: 50%;
top: 50%;
width: 800px;
height: 400px;
margin-top: -310px; 
margin-left: -501px; 
}


Et la page Index

#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -300px; 
margin-left: -501px;


De mon coté la page index alair de bien aller mais la page membre ce centre mais en 1152/864 le contenu descend de 10 px vers le bas ...

vous avez le meme soucis ?
Merci a vous
bon dimanche
IVIedia
Sujet clos
Aller à