28172 sujets

CSS et mise en forme, CSS3

Comment réduire l'image de fond

Bonjour,

je suis sur que c'est tout bête, mais je ne sais pas sur quel levier appuyer...

Sur ma page, j'ai deux balises div imbriquées. La plus grande porte une image de fond, la petite porte le corps de la page.
Voir mon exemple ici: http://www.kat-in.fr/Sanstitre-1.html

Lorsque je réduis la largeur de mon navigateur, je voudrais que l'image du div container ("centre") disparaisse sur la gauche jusqu'au div le plus petit ("centre2"), à la façon de ce site par exemple: http://www.jeuxvideo.com/etajvbis.htm
Or, sur l'exemple de ma page, l'image vient se "caler" sur la gauche sans disparaitre.

C'est sans doute hyper simple, désolé et ....

BONNE ANNEE A TOUS!!!!
Hello et bonne année à toi!

Alors :

- Centre2 est centré au sein de ta div "centre", grâce aux margin auto. Donc, quoiqu'il arrive, il y restera. D'autre part, il fait 780px de large
- Ta div "centre" par contre, a une width de 1200px.
-> la déduction est que, quoiqu'il arrive, centree2 aura toujours, à gauche et à droite, un margin de 210px ((1200-780)/2).

Comment peut on résoudre çà :
- La méthode purement numérique: si on reprend le petit calcul de tout à l'heure, on voit qu'on peux agir sur 2 paramètres pour supprimer le margin. Soit tu diminue width de centre jusqu'à 780px, soit tu fais en sorte que centre 2 fasse 1200px. À ce moment là, les margin seront réduit à 0, et tes div pourront coller à gauche.
- Sinon, je crois comprendre ce que tu veux faire en voyant ton image de fond. En fait, il n'est pas forcément très pertinent de gérer le fond gris et le fond blanc de cette manière. dans ton cas (et si j'ai bien compris), je découperais un peux plus l'ensemble, comme ceci



<body>
      <div class="centre">
            <div class="centre_gauche"> </div>
            <div class="centre_main"> </div>
            <div class="centre_droite"> </div>
      </div>
</body>


ta div centre doit être calculée au plus juste niveau largeur. Cela permettra d'avoir le fameux comportement "collé à gauche quand on réduit". Je te propose de partir sur une largeur standard : 800px.
À l'interieur, tu a pu voir que je créais deux colonnes. La colonne de gauche contiendras l'image de gauche. La colonne centrale sera l'équivalent de "centre2" et la colonne de droite contiendras l'image de droite.

De cette manière, tu obtiens un ensemble de trois div "solidaires". Pour tout ce qui est placement globale, tu utilises alors les attributs de "centre". Et pour la gestion des contenus (images et texte), alors tu joueras avec les 3 colonnes. Cela devrait te donner de la souplesse et de la clarté. Voilà la css que je te propose : 



body
{
    background-color: grey;
}

.centre
{
    width: 800px
    margin: 0 auto /* équivalent à dire 0px en haut et en bas, et auto à gauche et droite */
}

.centre_gauche
{
    width: 20px;
    background-image: url("img/image_de_gauche.png");
    float: left;
}

.centre_main
{
    background-color: #FFF;
    float: left;
    width: 760px;
}

.centre_droite
{
    width: 20px;
    float: left;
    background_image: url("img/image_de_droite.png") repeat-y;
}
Salut et merci de ton aide!

J'ai fait une page avec l'imbrication des div comme tu me conseilles:
http://www.kat-in.fr/Sanstitre-2.html

Pourquoi pas, ca pourrait coller, mais il faudrait que le "centre_gauche" disparaisse progressivement lorsque l'on réduit la taille de la fenêtre à celle de "centre_main", soit 780 px dans mon cas.
Or, en réduisant la largeur de la fenêtre, le div gauche conserve sa taille, jusqu'à ce que la fenêtre soit trop petite. Il se place alors au dessus du main. Smiley confus

je cherche un effet du style :

http://www.barackobama.com/index.php?splash=false

ou le "centre_main" se cale à gauche et le "centre_gauche" disparait lorsque l'on réduit la fenêtre. C'est un exemple uniquement, sans rien de politique Smiley ravi

merci encore, à plus tard!
Oki, je pense que j'ai compris. Ce site là a justement une grande image de fond "unique", placée comme ceci dans body : 

body
{
background: #01245C url(http://www.barackobama.com/images/bgv5.jpg) no-repeat scroll 50% 0;
}


Finalement, en faisant de cette manière, on retourne à ce que tu faisais au début. Tu n'as pu besoin des colonnes gauche et droite. Par contre, pour éviter l'effet que tu avais avant, avec la div "centre" qui créait des margin, il te suffit de supprimer cette div centre, et d'appliquer ton image de fond comme montré précédemment, sur body. (en changeant la couleur Smiley cligne

Ensuite, tu conserves ton margin : 0 auto; sur centre2, ainsi que le width et le tour sera joué,
et au fait, ton aide n'aura pas été vaine, tu as participé à:
http://www.kat-in.fr/

Tu reconnaitra ta technique en fond de page, merci!!! D'autant qu'en changeant uniquement le body sans imbrication des div, je suis épargné de reprendre mon template et de modifier toutes mes pages, seule la feuille de style est modifiée (et encore, à peine 10 lettres!)! Smiley smile
Sujet clos
Aller à