28172 sujets

CSS et mise en forme, CSS3

Placer des div en décoration autour de mon container

Bonjour,

Voici mon petit souci.
Je simplifie mon code:

Voici l'html

<body>
   <div id="container">
      <div id="decoGauche></div>
      <div id="decoDroite></div>
      <div id="Content></div>   
   </div>
</body>

et la css

#container {
   width:900px;
   margin:0 auto;
   position:relative;
   min-height:300px;
   height:auto !important;
   height:300px;
}

#decoGauche {
width:400px;
height:600px;
background:url(.....);
position:absolute;
top:0;
left:-400px;
}

#decoDroite {
width:400px;
height:600px;
background:url(.....);
position:absolute;
top:0;
right:-400px;
}


Explicatif:
Mon site est centré à l'aide du container et j'ai deux éléments de décoration placé autour. Éléments que j'aimerais voir disparaitre ou rétrécir si la fenêtre du site se rétréci. Tout fonctionne bien avec l'élément de gauche qui disparait si le bord gauche du site se rapproche du bord gauche du navigateur. Il ne prend donc pas sa largeur de 400px, ce qui est parfait.
Cependant l'élément de droite prend effectivement les 400px que je lui donne: il créé un scroll horizontal dans ma page, ce que je ne souhaite pas.

Y a-t-il une solution simple pour résoudre mon souci (j'espère avoir été suffisemment clair Smiley cligne )

Merci d'avance.

Phenix
Salut,

Pourquoi s'embetter ?
<body>
   <div id="container">
      <div id="Content></div>   
   </div>
</body>

Ceci te suffit pour obtenir le même effet.
Il te suffit d'appliquer une seule et même image en fond de ton site, centrée de manière à ce que chaque bord extérieur disparaisse lorsque la fenètre du site est réduite. Smiley cligne
Beaucoup plus simple non ? En plus ton code est plus léger Smiley smile
Hello,

Merci de ta réponse. J'avais effectivement aussi testé comme ça mais comme mon body possède déjà une image de fond dégradée j'ai cherché ailleurs. Mais c'est clair que ta solution est bien plus légère.

Je vais tester avec un second body (id="body") avec une largeur 100% et une grande image centrée.

J'aurais toutefois aimé trouver une solution selon ma méthode ce qui me permettrais une plus grande souplesse selon les éléments que je veux placer sans être forcément liés entre-eux.
Sujet clos
Aller à