28172 sujets

CSS et mise en forme, CSS3

Div dans une Div

Bonjour!

Pourriez-vous me dire si il y a moyen de créer une div (qui serait donc une sorte de conteneur), de la centrer, et ensuite créer d'autres div pour les placer dans cette dernière..

J'aimerais en fait créer un cadre centré, et y mettre des éléments de façon précise, et que quel que soit la résolution, le cadre soit centré avec ces éléments mis précisément...

Pourriez-vous m'aider? merci!
Salut,

Pas sûr d'avoir tout compris mais si tu connais le width de ton bloc; un margin: 0 auto devrait suffire? pour le reste bah les joies du positionnement classique dans le flux ou en absolute avec ses contraintes...
Bonjour,

Docxell a écrit :
Pourriez-vous me dire si il y a moyen de créer une div (qui serait donc une sorte de conteneur), de la centrer, et ensuite créer d'autres div pour les placer dans cette dernière.

Oui, c'est possible.

Pour le centrage horizontal, il faudra utiliser les marges automatiques (évoquées par ghost). Si tu as besoin en plus d'un centrage vertical, il y a quelques solutions listées ici: un bloc centré horizontalement et verticalement dans la page.

Pour placer de manière précise des éléments de dimensions définies dans un conteneur qui a lui-même des dimensions définies, l'idéal est d'utiliser le positionnement absolu. Le conteneur sera positionné en relatif (sans utiliser top, right, bottom ou left), les éléments de contenu seront positionnés en absolu par rapport aux limites de ce conteneur.

Attention toutefois aux problèmes de chevauchement de contenus avec le positionnement absolu. En général, pour un site web, on a besoin d'avoir des conteneurs extensible en hauteur, et le positionnement absolu n'est pas l'idéal pour ça si on veut éviter des chevauchements de blocs.
La solution retenue devra donc être adaptée à ce que tu veux intégrer. Si tu souhaites des précisions, il faudra nous montrer ce design.
Merci beaucoup pour vos réponses.

Heureusement, je n'ai pas besoin dans ce cas de faire des pages extensibles...

Je vais me contenter de centrer horizontalement,

J'ai fait ceci;

<div id="bloc">

<div id="logo"></div>

<div id="tache"></div>

</div>


Et en css;




#bloc {
        background: url(element/fond.jpg) no-repeat center;
        position:absolute;
	width: 100%;
        margin: 0 auto;
	height: 100%;
	top:0%;
	left:0%;

}


#logo {
	background: url(element/logo.png) no-repeat;
        position:absolute;
	width: 100%;
	height: 100%;
	top:0%;
	left:0%;

}

#tache_cafe {
	background: url(element/tache.png) no-repeat;
        position:absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;

}


Et le seul élément centré c'est le background de "bloc"...

Est ce à cause du "absolute" des autres éléments?
Modifié par Docxell (02 Jun 2009 - 09:14)
Salut,

Pour que tes éléments restent bornés à ta div bloc, tu dois lui ajouter un propriété :

Position: relative;

De plus, je te conseille de ne pas assigner des width de 100% à tous tes blocs mais plutôt des valeurs fixes et définies, surtout si tu n'as pas à faire de site "extensible". Parce que là, logiquement tes deux div devraient se chevaucher à l'intérieur même de ton div bloc puisque les deux sont en absolute et le deux prennent 100% de l'espace disponible.

tu devrais essayer comme ça:

#bloc {
        background: url(element/fond.jpg) no-repeat center;
        position: relative;
	width: /*La largeur de ta div conteneur en taille FIXE*/;
        margin: 0 auto;
}

#logo {
	background: url(element/logo.png) no-repeat;
        position:absolute;
	width: /*La largeur de ton logo en taille FIXE*/;
	height: /*La hauteur de ton logo en taille FIXE*/;
	top:0;
	left:0;
}

#tache_cafe {
	background: url(element/tache.png) no-repeat;
        position:absolute;
	width: /*La largeur de ta tache de café en taille FIXE*/;
	height: /*La hauteur de ta tache de café en taille FIXE*/;
	top:0;
	left:0;
}

Dans ce cas précis, ta tache de café et ton logo se chevaucheront dans le coin haut gauche de ta div conteneur... A toi de changer ses valeurs par la suite !
Sujet clos
Aller à