28172 sujets

CSS et mise en forme, CSS3

Background d'un site en 3 div, alignement.

Bonjour à tous,

Je souhaite solliciter votre aide aujourd'hui car je bloque sur l'intégration d'un fond de site. En gros j'ai trois éléments CSS pour créer mon fond. (voici une image pour illustré : http://img838.imageshack.us/img838/6755/capturedcran20110612162.png )

Il y a trois Style.
Le fond, qui est un motif qui ce répète sur X et Y,
L'images avec les formes géométrique qui a une taille définie (1327px / 1143px)
Et mon fond de site, une div blanche avec l'ombre en CSS3.

Voici mon code html (il y a rien de plus basique...): 

<body>
<div id="bg2">
<div id="content">   
</div>
</div>
</body>

et mon css : 
body {background:url(images/bg.jpg) repeat #e7e7e7; height:100%; width:100%;}
#bg2 {background:url(images/bg2.png) no-repeat top center; width:1327px; height:1143px; z-index:2;margin:0 auto; position:absolute;}
#content {-moz-box-shadow: 4px 5px 11px #3d3d3d;-webkit-box-shadow: 4px 5px 11px #3d3d3d;box-shadow: 4px 5px 11px #3d3d3d; margin:0 auto; background:#FFF; height:1200px; width:960px;margin-top:25px;}


Les problèmes :
je n'arrive pas à centrer tous les éléments au milieu de la page.
Lors ce que je redimensionne mon navigateur en 1024 ou 1280, mes div ne ce centre pas en fonction de ma fenêtre, mais sont décaler en dehors de mon ecran. (Le problème est que mon navigateur ce base par défaut sur la div bg2 avec l'image de 1327px de large.)

Si quelqu'un aurait une petite idée de comment résoudre ce probléme, ce serai sympa Smiley smile .
Merci à vous et bon weekend.
Modifié par Ank (12 Jun 2011 - 16:47)
Administrateur
Bonjour,

Nul besoin de positionnement absolu et de z-index, à moins d'avoir des tendances masochistes. Tu peux déjà enlever ces 2 instructions qui sinon vont te pourrir le reste de tes tests et de ce que j'écris ci-dessous.

Pour pouvoir passer (sans ascenseur horizontal) en 1024, tu ne peux pas indiquer de width supérieur à 1004px (typiquement 960, 980, 990, 940, 1000 px. Bref).
Tu peux donc supprimer le width de 13xx sur #bg2

C'est bien #content qui sera centré grâce à
margin: 0 auto;
width: 9x0px;
background-color: white;
color: black;


Du coup comment centrer tes formes géométriques ? Il ne faut pas tenter de centrer le contenu (il faudrait indiquer une largeur et comme ça peut pas être 1300px mais qu'il faudrait ça pour éviter de rogner le fond ... insoluble) mais se contenter de centrer l'image de fond en profitant de la largeur par défaut du div qui est ... 100% = toute la fenêtre Smiley smile

Oublie tout de suite la propriété height quand la propriété min-height suffit Smiley baille même pour des tests. min-height sur #content et les autres s'agrandiront d'eux-mêmes (vu qu'il y a pas de flottants)


EDIT: attention aux mélanges fond centré avec background-position / contenu centré avec margin. Les navigateurs ont tous des erreurs d'arrondi dans un sens ou dans l'autre et c'était une joie sans fin de voir Safari bugger en corrigeant Firefox, etc Smiley biggol
Dans ton cas c'est bon car le blanc recouvre les formes géométriques et tu n'es pas à un pixel près. box-shadow sera correctement interprété, aucun souci.
Mais dans le temps l'ombrage extérieur était inclus dans l'image, pas dans les CSS. Le blanc du footer était par exemple une image de fond centrée mais la colonne de contenu était centrée via margin et c'était une belle partie d'arrachage de cheveux Smiley smile
Modifié par Felipe (12 Jun 2011 - 17:35)
Un grand merci Felipe Smiley smile je cherchais trop compliqué...et merci pour ces petit conseils.

Néanmoins, il reste un petit problème (que je n'avais pas mentionné dans mon premier poste) c'est le fameux "margin-top:25px;" de ma div #content.
Quand on regarde bien la copie d'écran, les formes géométriques du #bg2 n'ont pas de marge en haut. Par contre mon fond blanc, pour mon contenu commence avec une marge haute de 25px.
Le problème est que si je mets un "margin-top:25px;" a ma div au fond blanc, le bg2 (formes géométrique le prend aussi).
j'ai beau essayé avec des position:absolute sur la div bg2 le résultat n'est pas vraiment concluant car mes div s’aligne automatiquement a gauche...
Quelqu'un aurait il une petite idée ?
Ank a écrit :
Le problème est que si je mets un "margin-top:25px;" a ma div au fond blanc, le bg2 (formes géométrique le prend aussi).

Lire à ce sujet: La fusion des marges en CSS.

Ank a écrit :
j'ai beau essayé avec des position:absolute sur la div bg2

Houlà, faut arrêter avec ça! Du coup, encore un lien pour la route:
Guide de survie du positionnement CSS

Ank a écrit :
le résultat n'est pas vraiment concluant car mes div s’aligne automatiquement a gauche...

En effet, tu ne peux pas utiliser la technique des marges automatiques (margin-left:auto; margin-right: auto;) pour centrer ou aligner un bloc si ce bloc est positionné en absolu.

En passant, en utilisant les éléments HTML et BODY, on devrait pouvoir se passer du bloc #bg2.
Sujet clos
Aller à