28172 sujets

CSS et mise en forme, CSS3

Agrandir un <div> pour agrandir son image de fond

Je sèche sur un truc qui me parait pourtant simple, du coup ça m'énerve Smiley bawling

En gros j'ai un div basique de 750*450px avec une image de fond, hors je souhaite changer d'image de fond (passer d'un bloc simple à quelque chose de plus joli, donc avec une sorte de bordure). Mon image passe de 750*450px à 960*720px, du coup j'agrandit mon div jusqu'à 960*720px et je met un padding top et left de 270px et de 220px

Je veux paser de ça :

http://img707.imageshack.us/img707/8750/avant.png

à ça :

http://img32.imageshack.us/img32/4337/aprsq.png

Avant :


background-image: url(http://localhost/Portfolio/img/portfolio-bg.png);
display: block;
height: 450px;
position: absolute;
width: 750px;


Après :


background-image: url(http://localhost/Portfolio/img/portfolio-bg.png);
display: block;
height: 720px;
padding-bottom: 0px;
padding-left: 210px;
padding-right: 0px;
padding-top: 270px;
position: absolute;
width: 960px;


Et bien sur, ça ne marche pas, le fond est bien comme je veux mais l'intérieur du <div> ne suit pas Smiley ohwell
Modifié par Calvein (19 Dec 2009 - 15:35)
Salut!

Perso, j'ai besoin de voir ce qu'il y a autour pour bien comprendre le problème. Est ce que çà ne peux pas être les div alentours qui restreignent ta div principale.

Ensuite, plutôt que de restreindre ta div uniquement sur top et left, je pense que tu devrais répartir les paddings tout autour, comme ceci :

padding: 135px 105px;

Enfin, quand tu dis que le fond est comme tu veux, j'en déduis que la div a la bonne dimension désormais. Par contre, qu'est ce que tu entends pas "la div ne suis pas"? Est ce qu'elle est trop petite? est ce que le contenu ne prend pas en compte le padding ?
Ah, sinon, je crois que j'ai trouvé :


background-image: url(http://localhost/Portfolio/img/portfolio-bg.png); 
display: block; 
height: 450px; 
position: absolute; 
width: 750px;
padding : 135px 105px;


En fait, si je ne dis de conneries, les paddings viennent "en plus" de tes dimensions. Du coup, ta div était agrandie, de base. Et en plus, les paddings venaient s'ajouter : du coup, tu avais un background qui entrait complètement dans la div, un espace utilisable de la taille de ton image, et toute une zone de padding inutilisable en plus.

Si c'est bien çà, le code ci-dessus devrait te donner satisfaction Smiley cligne
J'ai du mal me faire comprendre Smiley langue

Ma div est centrer dans la page grâce à du JS (mon div en position absolute et son top vaut la moitié de la différence entre la taille du navigateur et du div, pareil pour la largeur).

De base, mon div vaut 750*450px, je ne veux pas réellement l'agrandir mais en faire lui mettre un cadre (une bordure imagé, merci le CSS 3 Smiley ohwell ), la façon la plus simple que j'ai trouvé était celle ci, agrandir mon div et grâce à un padding, faire comme si le contenu de mon div restait à la même place.
Sauf que le padding agrandi ta div, viens en plus de width et height. Il faut donc repartir des dimensions de la div de base, et ajouter les padding pour les bordures (ce que je te propose), au lieu d'agrandir avec width et height, puis de restreindre avec des padding.

D'autre part, j'insiste sur le fait que ta façon d'ajouter les padding ne va pas non plus te permettre de centrer ton contenu dans ton cadre. Tu insères un décalage en haut et à gauche, mais rien en bas et à droite.


Je viens de tester en pratique ce que je te proposais en théorie dans mon précédent post, et çà marche... Ou alors je comprend vraiment pas ce que tu veux faire.
Modifié par lautrejojo (20 Dec 2009 - 17:10)
Sujet clos
Aller à