Comment Centrer une div ?

Comment Centrer une div ? sans centrer ce qu'elle contient... Noter :

#1 tankia

Groupe : Hubmaster
Messages : 197
Inscrit(e) : 16-juillet 04
Localisation:Clichy
Société:Graphiste multimédia

Posté 28 juillet 2004 - 13:59

Bonjour,
j'ai un problème dont la solution est peut être évidente pour vous mais apres avoir retourné mes codes dans tous les sens je n'arrive pas à centrer une div (conteneur) sans que les div contenues dans cette div soient centrer.

<div name="conteneur centré">

	<div name="contenu non centré" ></div>
	
</div>

J'espère que la solution existe !

Merci d'avance

TaNkia - Graphiste multimédia freelance

Mon hublog : Dessiner le web

Haut

#2 Monique

Le Web à tous

Groupe : Hubmaster
Messages : 3 952
Inscrit(e) : 19-août 03
Genre:Femme
Localisation:rue Georges Mabile, Havré
Société:Webatou

Posté 28 juillet 2004 - 14:07

Bonjour,

Je pense que cette page répondra à ton problème : Initiation au centrage CSS

Plusieurs solutions sont proposées, pour différentes situations.
Comme celle-ci pour centrer une boîte élastique :

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: left;
}

Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web

Haut

#3 tankia

Groupe : Hubmaster
Messages : 197
Inscrit(e) : 16-juillet 04
Localisation:Clichy
Société:Graphiste multimédia

Posté 28 juillet 2004 - 14:10

Merci beaucoup, je vais consulter cette page et je fais un compte rendu

TaNkia - Graphiste multimédia freelance

Mon hublog : Dessiner le web

Haut

#4 tankia

Groupe : Hubmaster
Messages : 197
Inscrit(e) : 16-juillet 04
Localisation:Clichy
Société:Graphiste multimédia

Posté 28 juillet 2004 - 14:16

Très instructif pour mon cas c'est une largeur rigide donc pour une largeur de 760px :

.centre {
 margin-left: auto;
 margin-right: auto;
 width: 760px;
 text-align: left;
}

Merci beaucoup j'irai voir ce site avant de poser des question sur le xhtml/css dorénavant

Ce message a été modifié par tankia - 28 juillet 2004 - 14:17.

TaNkia - Graphiste multimédia freelance

Mon hublog : Dessiner le web

Haut

#5 Monique

Le Web à tous

Groupe : Hubmaster
Messages : 3 952
Inscrit(e) : 19-août 03
Genre:Femme
Localisation:rue Georges Mabile, Havré
Société:Webatou

Posté 28 juillet 2004 - 14:23

Tu peux aussi ajouter celui-ci à tes favoris : Alsacreations

Haut

#6 tankia

Groupe : Hubmaster
Messages : 197
Inscrit(e) : 16-juillet 04
Localisation:Clichy
Société:Graphiste multimédia

Posté 28 juillet 2004 - 16:19

Oui Alsacreation, je l'avais déjà mais sur alsa les solutions pour centrer la div été :

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}

Et lors d'un rétrécissement de la fenêtre on apperçoit des problèmes d'affichages du contenu de la page : en effet, le contenu de gauche disparait plus on rétrécit la fenêtre avec les poignées de redimenssion. Donc, je ne vois pas l'utilité de ce code... Sinon beaucoup de bonnes chose sur Alsacreation quand même !

TaNkia - Graphiste multimédia freelance

Mon hublog : Dessiner le web

Haut

#7 tankia

Groupe : Hubmaster
Messages : 197
Inscrit(e) : 16-juillet 04
Localisation:Clichy
Société:Graphiste multimédia

Posté 28 juillet 2004 - 17:02

Nouveau problème

:

la méthode que j'utilise pour centrer la div fonctionne lorsqu'il y a le code suivant avant la balise html :

Citation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(Code par défaut des pages html créés sous dreamweaver mx 2004)

Par contre lorsque je le remplace par :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">

que j'ai chopé sur http://openweb.eu.or...html_une_heure/

Je suis sous IE6...

EDIT :

.conteneur {
	text-align: center;
}
.bloc contenu {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
 	 height: 110px;
	text-align: left;
}

ça fonctionne c'est bon merci

Ce message a été modifié par tankia - 28 juillet 2004 - 17:31.

TaNkia - Graphiste multimédia freelance

Mon hublog : Dessiner le web

Haut

#8 lobotomie

Groupe : Membre
Messages : 1
Inscrit(e) : 21-janvier 10

Posté 21 janvier 2010 - 17:03

tankia, le 28 juillet 2004 - 17:02, dit :

EDIT :

.conteneur {
	text-align: center;
}
.bloc contenu {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
 	 height: 110px;
	text-align: left;
}

ça fonctionne c'est bon merci

doit on insérer ce code dans le head? et comment fait ton pour quil soit attribué à la div puisque quand on crée la div, elle a déja tout ses info de positionnement et de grandeur??

Jai le meme probleme, je veux centrer une image dans ma page qui sert de design central et ajouter texte et autre par dessus sans que ces autres éléments soit centrés.. cependant, il ne saffiche pas correctement lorsque je les regarde en preview.. limage reste centré mais tout le reste nest pas au meme endroit que dans dreamweaver..que dois-je faire?

Haut

#9 Vixen

Groupe : Membre
Messages : 1
Inscrit(e) : 14-mars 11

Posté 14 mars 2011 - 11:23

Bonjour, j'ai un problème pour centrer ma vidéo sur ma page web. J'ai essayer tout plein de possibilité, mais rien y fait. Voici le script en dessous. Si vous pouvez me venir en aide sa serais génial. Merci d'avance

<div style="width:450px;height:300px;"><object width="450" height="300"><param name="movie" value="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"/
><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"type="
application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"width="450" height="300"></embed></object></div>

Haut

#10 Ciseur

Groupe : Actif
Messages : 10
Inscrit(e) : 03-décembre 10
Genre:Homme

Posté 16 mars 2011 - 10:06

Vixen, le 14 mars 2011 - 11:23, dit :

<div style="width:450px;height:300px;"><object width="450" height="300"><param name="movie" value="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"/
><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"type="
application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"width="450" height="300"></embed></object></div>

Pour centrer une DIV en css, elle doit posséder une largeur fixe et des marges gauches et droites en auto :

#ma-video {
        margin-left: auto;
        margin-right: auto;
        width: 450px;
}

C'est tout ce qu'il y a besoin de faire.
Attention tout de même à ce que la dite DIV ne soit pas en absolute.

Ciseur : Développeur / Intégrateur web à Paris

Fuegin.com : Blog graphisme, publicité et internet

Haut

Partager ce sujet :

Page 1 sur 1

Vous ne pouvez pas commencer un sujet
Vous ne pouvez pas répondre à ce sujet

Webmaster Hub: Comment Centrer une div ? - Webmaster Hub