Decaler le background, ou une div child

Auteur
Thedeejay	# 19 Mar 2010 - 23:58:41
3 Posts	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: 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 Merci beaucoup! T.
3 Posts
Mikachu	# 20 Mar 2010 - 00:44:02
C'est quand les vacances ? Modérateur 5136 Posts	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. Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
C'est quand les vacances ? Modérateur 5136 Posts
Heyoan	# 20 Mar 2010 - 00:48:36
Modérateur 8101 Posts	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é ! Modifié par Heyoan (20 Mar 2010 - 00:49) Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Thedeejay	# 20 Mar 2010 - 13:49:08
3 Posts	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) Et voici ce que je devrais avoir: 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
3 Posts
Thedeejay	# 20 Mar 2010 - 18:46:27
3 Posts	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
3 Posts