28172 sujets

CSS et mise en forme, CSS3

Decaler le background, ou une div child

Bonjour!

Première fois que je poste sur votre forum (bien que je sois grand lecteur), pour poser une question assez spéciale:

Je m'explique:

Je souhaite réaliser une DIV ou les coins sont arondis, plus le haut de la div est en dégradé avec un contour.

J'ai donc ces deux images:

http://s2.noelshack.com/uploads/images/3966247925541_haut.png


http://s2.noelshack.com/uploads/images/15867571634145_bas.png

Mon but est donc le les rejoindre par un rectangle blanc (woaaaw), mais que je puisse aussi remplir le haut de texte.

J'ai tenté l'architecture suivante:

Div fond blanc
-> Div bas
--> Div haut
---> Contenu

Le problème est que le fond blanc dépasse et cache donc les coins arondis blancs.
Et malheureusement, le fond derrière est bleu avec différentes teintes (nuages), et le contenu peut allez d'une ligne à un bon millier. Donc pas de sprites a priori.

Donc, pour resumer, je souhaiterais savoir comment je peut simplement monter l'image haut quelques pixels au dessus du fond et de baisser l'image bas afin de cacher les coins carrés.

Oui, c'est tordu, mais si quelqu'un a une autre technique, je suis prenneur Smiley lol

Merci beaucoup!

T.
Salut,

Il te suffit tout simplement de ne pas utiliser de fond blanc pour ton conteneur, mais d'allonger l'image du pied avec une hauteur remplie de blanc suffisante pour la longueur du contenu, et même plus en cas d'agrandissement de ce contenu. L'image sera grande en taille, mais avec une seule information de couleur elle ne pèsera pas bien lourd.

Sinon tu as tout simplement la possibilité de Créer des coins arrondis en CSS et sans images, il ne restera plus qu'à disposer l'image du dégradé en haut du bloc. Smiley smile
Hello et bienvenue,

en fait je ne vois pas bien le problème. Apriori ton conteneur doit être stylé comme ceci :
#conteneur { 
    width: 900px;  
    margin: 0 auto;
    background: #fff url(image_du_haut.png) no-repeat; 
}
et pour l'image du bas soit tu l'affectes en background au dernier élément, soit du rajoute un élément...


Edit: Oups ! Grillé ! Smiley biggrin
Modifié par Heyoan (20 Mar 2010 - 00:49)
Merci a vous deux!

En fait, ca ne va pas, car comme je dis, l'image de bas devrait faire au moins 10 000px de haut pour que cela ne fasse pas de blanc :s

De plus il doit y avoir du texte dans le header.

Pour vous montrer, voici ce que j'ai actuellement: (j'ai volontairement mis un fond gris pour voir les coins)

http://s2.noelshack.com/uploads/images/19128392649432_cadre1.png

Et voici ce que je devrais avoir:

http://s2.noelshack.com/uploads/images/15659101143279_cadre2.png

Sachant que le haut ne contient pas forcement la même chose que sur l'image, ca ne peut pas être une div a part.

Désolé encore une fois si je ne suis pas clair Smiley confus
Je up, en demandant cette fois simplement comment faire dépasser la div intérieure au dessus de la div parent?

Avec des marges négatives, la div s'adapte Smiley bawling
Sujet clos
Aller à