Problème de mise en forme css : background d'un footer qui s'étire.

Salut !

J'ai un problème en CSS. je désire réaliser un footer dont la largeur est variable.

Ce qui pose problème, c'est que les images qui se trouvent aux extremités peuvent avoir des zones transparentes (dans le cas d'un arrondi par ex).

J'ai fait un petit schéma pour expliquer, j'espère que j'ai été asser clair.
http://www.ispirit.info/perso/schema.jpg

Merci d'avance.
Modifié par BlackFire (01 Feb 2006 - 21:54)

Bon si c'est ce que je crois tu dois mettre ton width en pourcentage biensur.
Ton div bas en position:relative et ton image de droite en
position:absolute; right:0 ou essayer un float:right.
Modifié par Hermann (01 Feb 2006 - 22:00)

Eh bien je n'arrive pas à le faire.

J'ai mis les 2 images d'extremité dans des blocs, que j'ai mis dans un grand bloc.

ensuite, j'ai fait ce CSS (on rigole pas hein, je suis débutant )

.pied_page_cadre_global {
    width: 100%;
    height: 32px;
    background-image: url("/images/pied_page_centre.png");
}

.pied_page_gauche {
    background-image: url("/images/pied_page_gauche.png");
    background-repeat: no-repeat;
    float: left;
    display: inline;
    width: 13px;
    height: 32px;
}

.pied_page_droite {
    background-image: url("/images/pied_page_droite.png");
    background-repeat: no-repeat;
    float: right;
    display: inline;
    width: 14px;
    height: 32px;
}

Pour préciser mon problème, les images des extrémités ont des bords arrondis transparents, l'image background du "grand div" remplit les coins transparents.
Modifié par BlackFire (01 Feb 2006 - 22:03)

Bon on débutes tous un jour ou l'autre
et puis je vois que tu es tout jeune Tu as le temps de progresser...
je te conseille de commencer par aller voir http://css.alsacreations.com/Bases-et-indispensables/
Modifié par Hermann (01 Feb 2006 - 22:27)

Salut !

J'ai tout lu, mais cela ne m'aides pas... désolé mais là je suis complètement dans le vague. Je n'arrive pas à le faire avec des images d'extrémités (celles qui se trouvent à gauche et à droite du footer) comportant des zones transparentes.

Salut,
Essayes avec ça mais je te garantis rien n'ayant pas essayé.
Lis bien les commentaires (apres /*)
Si tes élément 'image et footer sont unique, je te conseillerais plutôt de mettre des ID plutôt que des class sachant que les dieses précedent le nom s'appliques aux ID et pas aux class. (http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id)

#pied_page_cadre_global {
    width: 100%;
    height: 32px;
    background-image: url(/images/pied_page_centre.png);  /*tu avais mis le chemin entre guillements mais il n'y en a pas besoin ici.
}

img#pied_page_gauche  /*images dont l'ID est pied_page_gauche
{}  /*essayes avec rine dans un premier temps

img#pied_page_droite {
    float: right;
}

Pour une meilleurs accessibilité tu ne dois pas oublier de bien spécigier le height et le width des tes images dans le HTMl et non en CSS.

Tu as pas un liens pour voir ce que ça donne?
Modifié par Hermann (02 Feb 2006 - 19:01)

C'est bien comme ça que j'ai fait !

Simplement, si j'ai des images aux extrêmités comportants des zones transparentes (ex : des bords arrondis dont les coins sont transparents), l'image en background du div global "bouchera" les zones transparentes !


Je commence à me demander si c'est possible de faire ça en CSS, parceque je vais peut être dire une atrocité là, mais avec des tableaux c'est facile ! (mais j'ai pas envie de faire avec, évideamment)

bonjour,
oui c'est possible. ,par exemple, reduit la largeur de ton div d'au moins la taille de tes arrondis (partie transparentes) a l'aide d'une marge gauche et droite.
Ensuite repositionne tes images flottante en relative .... avec un left:largeur de l'arrondis; pour le flottant a droite et vice versa pour l'autre.
ou un margin negatif, tout simplement, pour ressortir et faire deborder les images du footer.

a plus
Modifié par gcyrillus (03 Feb 2006 - 00:41)

Ah oui, c'est exactement ce que je voulais ! Merci !