28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je rencontre un problème de mise en page que je n'arrive pas à résoudre, j'ai essayé plusieurs idées mais rien ne fonctionne correctement...

Voilà la maquette de l'interface du site :
http://www.chezben.be/Angelus/test/interfacevertt.jpg
(je ne met pas l'image directement car elle est grande)

Différents test :
http://www.chezben.be/Angelus/
http://www.chezben.be/Angelus/style.css

http://www.chezben.be/Angelus/test/test.html
http://www.chezben.be/Angelus/test/test.css

http://www.chezben.be/Angelus/test/testestucture.html
http://www.chezben.be/Angelus/test/style.css

On a donc un bloc centrale où on retrouve le contenu, et une colonne à gauche et à droite du bloc. Le problème c'est qu'il faudrait que le bloc de contenu soit toujours centré (quitte à cacher la colonne de gauche même si c'est vraiment dommage). Mais malgrès plusieurs test je ne trouve pas de solution, rien ne fonctionne comme je le voudrais et j'ai testé pas mal de truc pourtant...

Alors si quelqu'un a une solution ou une idée je l'en remercie d'avance !
Salut,

je pense que sit ton bloc central est de largeur fixe, il te faut mettre ton bloc de droite et ton bloc de gauche sur la même image, ainsi tu le positionnes en background de ton body, en position centrale.
Non j'arrive au même problème avec ça la colonne de gauche empêchera le bloc de contenu de ce centrer et pour les petites résolutions ça oblige le déplacement latérale ...
Manatee a écrit :
Non j'arrive au même problème avec ça la colonne de gauche empêchera le bloc de contenu de ce centrer et pour les petites résolutions ça oblige le déplacement latérale ...

Heu... quelle colonne de gauche? En regardant le design, je ne vois qu'une seule colonne, centrale, et un habillage autour. Cet habillage peut très bien être placé en image de fond de BODY (ce sera par contre un peu lourd, mais on n'y peut pas grand chose, c'est inhérent au design).

Tu prends ton design, tu supprimes la colonne centrale (header, contenu, logos), et tu obtiens un habillage vide, de 1190px de large. Il faudrait dans l'idéal prévoir au moins 1000px de haut, peut-être plus. Puis exporter cette image dans un format pas trop lourd (à priori en JPEG, même si je ferais un test en PNG avec une palette optimale de 32 ou 64 couleurs, à tout hasard, et avec un outil correct -- donc pas Photoshop pour le PNG, à moins de repasser derrière avec PNGCrush ou équivalent). Et placer cette image en fond de BODY, en repeat-y, et en background-attachment: fixed.

Ensuite, il suffit de faire un bloc global de 750px de large, et de le centrer via la technique des marges automatiques. Et voilà.