Alignement centrer de block et gestion de redimension

bonjours as tous, voila, j'ai un ptit souci, ca fait 3ans que je passes une par si une heure par là, mais aucune solution trouvé, alors explication:

je souhaiterai pouvoir afficher de facon centrer plusieur block, balise div, cote à cote sur plusieur étage. Il faut que lorsque je redimensionne la page, il y ait moins de block sur chaque ligne et forcement plus de ligne, mais que dans tout les cas, que l'affichage reste centré. Je réussi sans peine à faire un affiche sur plusieur ligne avec gestion de la redimension, juste en utilisant la propriété float:lef, ou right, mais le problèm, c'est qu'il n'existe pas de center.

voila, si vous trouver une solution, vous éte fantastique, meme si c tout béte, vous pouver même vous moquer de moi, pas de problèm, mais si vous avez la réponse, c'est fète pour moi.


merci encore.

Bonsoir et bienvenue,
Non on ne va pas se moquer de toi... Nous avons tous ici on à faire face à des déboires...
Par contre je n'arrive pas vraiment à bien saisir ce que tu veux faire.
N'hésite pas à donner un lien ou une image ou un quelconque document qui pourrait clarifier tes besoins.
Amicalement,
IlSandor.

bon voila, explication de mon problèm, avec un peu plus de détail
www.kaobang.com

lorsque l'on va sur ce site et que l'on parcours le catolgue, les différents article apparaissent avec alignement à gauche due à la propiété float:left; et lorsque l'on redimentionne, il y nombre variable d'article sur la même ligne, jusque là, je trouve ca parfait, (bon ok, c moi qui l'ai fait), mais le problèm ce que vue que float et sur left, alors tout est collé à gauche, et lorsque l'on redimentionne, et ba, ca fait pas trés joli, il reste un gros éspace vide à droite, jusqu'a ce que l'espace soit sufisant pour k'un artilce apparraisse.

En gros j'aimerai qu'il existe une propriété float:center, pour ke le résultat visuel, soit plus agréable. Surtout avec la nouvelle version du site que je suis en train de faire, cela fera encore plus moche.

J'avais réussi à le faire sous ie l'an dernier, mais pas sur les autres navigateur.

Bonsoir,
Oooh le garnement !!! lis ca tu comprendras
Enfin bon c'est pas grave et hors sujet.
Pour ton problème la solution est assez simple, tu dois mettre tes petits divs en float left dansun autre div conteneur que tu centera par rapport au flux principal. Pour ce faire, tu dois mettre - pour IE - le text-align du conteneur de ton conteneur à center -oui je sais c pas clair conteneur de contenur mais en gros la balse qui englobera ton nouveau div - et les margin left et right de ton nouveau div à auto - pour FF-.
En espérant que c'est assez clair.
Bon courage.
IlSandor.

Edit : En fait je viens de m'apercevoi que la réponse à ta question est ici ... d'où l'utilité de faire une recherche...
Modifié par ilsandor (03 May 2005 - 04:55)

ouai je sais pour les frame, mais bon, j'ai pas trouvé de solution plus pratique pour faire mon interpahce pour ce site, sinon le chargement était trop, long et je n'avais pas le temps de passé du temps sur le pkoi de tout ca. Et en plus j'ai tellement eu de problèm, avec les feuille de style, que j'ai un peu peure de me lancé dans un site sans frame.


Enfin, j'ai essayé à peu prés ce que tu viens de m'expliquer, mais je n'ai pas réussi, je voudrais centrer tout ca, mais il n'en ait pas question ca me pose problèm, donc voila un code exemple, si tu trouve une solution, j'esserai d'enlever une ptite de mon site

<style>
 .vignette {
 	float:left; 
	border: 1px solid black;
	margin: 5px 5px 5px 5px;	
	width:100px;
 }
 
 .container1 {

    background-color: green;
	border: 1px solid black;

 }

 .container2 {
 	
	margin-left:auto;
	margin-right:auto;
	text-align: center; 	
    background-color: red;
    border: 1px solid black;
 }

</style>
<div class="container1">
	<div class="container2">
		<div class="vignette">
		le roi du monde
		</div>
		
		<div class="vignette">
		le roi du monde
		</div>
		
		<div class="vignette">
		le roi du monde
		</div>
		
		<div class="vignette">
		le roi du monde
		</div>

		<div class="vignette">
		le roi du monde
		</div>

		<div style="clear:both">
		</div>
	</div>
</div>
	

Bonjour,

Pas sûr d'avoir bien compris.
Le "conteneur du conteneur" d'Ilsandor pourrait être l'élément body. Celui-ci doit avoir pour bien fonctionné avec IE une propriété de style:

body{
text-align:center
}

Ensuite il te faut un conteneur qui va recevoir en son sein les autres divs. Comme body va appliquer un alignement centré à tout ce qu'il contient, il faut rétablir l'alignement de ce conteneur:

#conteneur{
text-align:left;
}

Pour que ce conteneur soit centré dans ta page il faut qu'il soit muni d'une largeur. Sans cette largeur les marges droite et gauche ne pourront pas fonctionner avec la valeur auto.

#conteneur{
text-align:left;
width:740px;
margin: 0 auto;
}

Pour le centrage il y a ce tutoriel: Centrer les éléments ou un site web en CSS

c vrai que j'ai un peu de mal à epliquer mon problèm, je viens de trouver une facon de vous montrer le resultat que je veux, il correspond à ce code executé sous IE, le resultat que je voudrais obtenir et le même sauf, qu'au lieu d'utiliser des balise span, j'aimerai utiliser des balise div, et j'aimerai que cela soit compatible tout navigateur,

voila, tout, désolé encore de mon peu de clarté, mais c pas toujours d'expliquer clairement des cas, que l'on ne comprend pas trop.

<style>
 .vignette {

	border: 1px solid black;
	margin: 5px 5px 5px 5px ;
	width: 100px;
 	white-space:nowrap;
 }
 
 body {
	margin-left:auto;
	margin-right:auto;
	background-color: green;
	border: 1px solid black;
	text-align: center;
	width:100%; 	
 }

 .container {
 	
	margin-left:auto;
	margin-right:auto;
	text-align: center; 
	width:75%;
    background-color: red;
    border: 1px solid black;
 }

</style>

<body >
	<div class="container">
		<span class="vignette">
		le roi du monde1
		</span>
		
		<span class="vignette">
		le roi du monde2
		</span>
		
		<span class="vignette">
		le roi du monde3
		</span>
		
		<span class="vignette">
		le roi du monde4
		</span>

		<span class="vignette">
		le roi du monde5
		</span>

		<span style="clear:both">
		</span>
	</div>
</body>
	

et donc le plus important c'est que lors du redimenssionnement de la page, il faudrait que le nombre de vignette par ligne, varient, et qu'elles restent toujours centrées.
Modifié par nicky_45 (03 May 2005 - 16:03)

bon ba aucune solution pour mon problèm alors, bouh, ba ca alors c'est embétant, que vais je devenir,just une ptite réponses une illumination divine de la part de quelqu'un.

As-tu pris le soin de lire les liens et exemples qui t'on été donnés ?

ps:un petit effort sur l'orthographe et la grammaire.

désolé, pour l'orthographe, j'ai énormément de problèms de ce coté là, et c pas histoire de faire genre, je me cache derierre cette excuse bidon, pour en faire plus.

Enfin bon, au niveau des liens, ouai j'ai bien regardé j'ai même trouver des sites sympa au niveau des explications sur la mise en page et tout ce qui va avec, mais lorsque l'on fait un float:left par exemple impossible de centré tout ca, même si on optien un résultat correct, chose possible, en imbrication avec des balises div, si on redimenssionne la page et bien le centrage ne marchera pas sur les vignettes. Parlons un bête, je voudrais une sorte de float:center.

J'avais trouvé une alternative, avec display:inline, permetant à un block (balise div par exemple), de ce comporter comme une balise "span", le problèm c'est que cette propriété ne s'applique qu'à la balise concerné, elle ce détache de tout ce qu'elle contenait. donc echec total(sauf sur ie ou ca fonctionne je crois). Si t'as deux minutes essais le code que j'ai mi plus haut, redimentionnes, et tu comprendras ce que je recherche. l'exemple fonctionne, c'est des balises "span", mais moi je veux le même résultat avec une image et des commentaires, tout ca bien structuré, c'est pour afficher les articles d'un catalogue

Aprés si il n'y a pas de solution, il n'y a pas de solution, mais ca m'embeterais un petit peu, tout de même.

donc voila tout, et sinon, j'ai posté sur le forum. Tu sais, si je le fais c'est vraiment que je suis embété. Je suis pas genre à poster tout les 2 minutes, parceque j'ai oublié une balise de fermeture, ca fait déja quelque temps que je cherche une solution, je trouve pas, je suis peut étre passé à coté d'un truc super simple, mais j'arrive pas, j'arrive pas.

Merci d'avance.

excuser moi encore une fois, mais si ce n'est pas possible de régler mon problèm, dite le moi, je ferai totalement un autre systèm, ca m'embéte énormément mais si le formatage web me bloque, et bien, ainsi va la vie.

Donc maintenant la question est : Esil possible, N'est il pas possible?
Modifié par nicky_45 (07 May 2005 - 01:10)

Le code que tu as posté plus haut avec quelque smodifications correspond à ce que tu veux faire il me semble.
Tu définis tes vignettes comme des span de largeurs (et pourquoi pas de hauteur fixe)
tu met le text-align du div contenant à center et tes vignettes vont se centrer par raport à ce dernier.
IlSandor.

ilsandor a écrit :
Bonsoir,
Oooh le garnement !!! lis ca tu comprendras

Certes, on peut faire la même chose avec un calque et un overflow mais cela pose 2 pb :

1) La molette ne marche plus sous Firefox. Voir ma page de test en cours

2) Comme la hauteur de son menu de gauche est, d'une, supérieure à 400px (je parle en résolution d'écran même si, en réalité, il est plus petit) et, de deux, de hauteur variable selon le lien cliqué, il arrive qu'il dépasse même les 768px. Dans ce cas, l'ascenceur vertical du body apparait et on ne peut pas le cacher avec un overflow:hidden car on ne verrait alors plus le nombre d'articles choisis. On obtient alors un affichage assez moche (pardon nicky) tel qu'on peut le voir si on choisit "BD > Franco-Belge" avec une résolution de 800x600 et que l'on descend la scrollbar du body à donf

C'est vrai qu'enlever les frames demanderai une "reconception du site".
IlSandor.
Modifié par ilsandor (07 May 2005 - 03:07)

a écrit :
On obtient alors un affichage assez moche (pardon nicky)

oui je sais, je m'en attriste d'ailleur, c pour ca que je refait une nouvelles versions en corrigant le plus de choses possible.

je ne comprend pas trop l'intéret du redimenssionnement de la hauteur, j'ai essayé un peu, mais bon, j'ai pas eu de résultat concluant, enfin peut étre que je me suis trompé, c vrai que je ne vois pas trop quoi faire avec ca.
Modifié par nicky_45 (07 May 2005 - 12:32)