Forums Développement Multimédia

Aller au contenu

adapter hauteur div en fonction d'une background image variable en hauteur

CODE HTML CSS

7 réponses à ce sujet

#1 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 30 March 2011 - 06:32 AM

bonjour a tous (pas d'accents sur mon clavier),

apres plusieurs recherches infructueuses, je me tourne vers vous et votre experience.

j'ai donc une div (dans wordpress, c'est d'ailleurs headerimage pour la citer) que j'aimerais voir changer de hauteur en fonction d'une image de fond qui change.
cette image de fond a une largeur fixe mais sa hauteur peux varier.
donc je ne veux pas specifier sa hauteur dans la feuille de style.
le probleme est que si je ne specifie pas de hauteur, l'image n'apparait plus du tout.

j'ai bien essaye:

height:auto;

ca ne fonctionne pas.
ou alors:

height:100%;

ca ne fonctionne pas non plus.

j'ai aussi essaye de supprimer le parametre height, mais rien n'y fait...

une idee?

merci a tous.

#2 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 30 March 2011 - 10:22 AM

Bonjour!

Je viens de faire quelques tests sur un vieux projet et ma question va te sembler toute bête, mais... es-tu obligé de mettre cette image dans une div?

A priori, il n'y a pas besoin de div pour afficher une image. :oops: De fait, quelque soit l'image que tu chercheras à afficher, elle se redimensionnera automatiquement. Tu n'as plus qu'à créer une classe (ou un ID par image si besoin) pour indiquer que l'image doit s'afficher à tel ou tel endroit. :oops:

Sinon, la solution serait de considérer la div comme un "conteneur" de quelque chose. Pour ma part, j'utilise très souvent cette classe dans mon code (à appliquer à la div):


.contenant_invisible {
        width:auto;
        height:auto;
        float:left;
        border:none;
}

Pripoko

#3 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 30 March 2011 - 14:07 PM

si c est vraiment une "bgImage" ( et non une "image"!) je ne pense pas que cela soit posssible, vut que par definition une bgimage n as pas vraiment de taille...

faut mettre l image directement dans le div et non comme bg...

#4 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 31 March 2011 - 04:23 AM

bonjour a tous les deux et merci pour le coup de pouce.

pripoko, oui je suis oblige de mettre cette image dans une div, je n'ai pas le choix c'est comme ca que la page est faite. je rappelle que dans le cas present je suis sous wordpress et precisemment sur la div headerimage. cette div ne vous dira probablement pas grand chose, en fait elle est generee sous themeframe qui est un framework pour creer des themes wordpress. a l'origine, dans la div il y a un script jquery pour animer une toute petite galerie d'images. j'ai jete le script et y ai insere une simple image. cette div fait partie de lentete de page et l'image qu'elle contient change de hauteur selon certaines conditions, j'ai donc besoin que la div change (adapte) aussi sa hauteur en fontion de celle de l'image qu'elle contient.

et pour l'instant ca pose toujours probleme.

matt_murdock, en fait j'ai precisemment ca dans mon style.css:

div.headerimage {
        clear:both;
        padding-top: 3px;padding-right: 3px;padding-bottom: 2px;
        background: transparent url("images/main-panel2.png") no-repeat scroll -20px ;
        width:1007px;
        height:329px;
}

je vais donc supprimer l'attribut background et essayer d'inserer ma fameuse image en tant qu'image, comme tu le suggeres, et non en tant que background et peut etre que la magie va operer...

je vous tiens au courant.

p.s: desole pour le decalage des reponses mais je suis a plus 10.000 km de la france et 6 heures de plus...

#5 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 31 March 2011 - 08:54 AM

non... cela vas pas marcher, car en CSS tu juste definir une bgimage... faut l implementer dans le code source HTML

#6 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 31 March 2011 - 09:06 AM

Voir le messagematt_murdock, le 31 March 2011 - 08:54 AM, dit :

non... cela vas pas marcher, car en CSS tu juste definir une bgimage... faut l implementer dans le code source HTML
exactement ca matt, je l'ai implemente dans le code html et ca marche... sauf que j ai mon menu qui est en dessous de mon image maintenant.

j ai essaye de changer les z-index mais sans succes... je vais me creuser la tete et bien finir par trouver.

en tous les cas merci beaucoup et bonne journee.

a bientot.

#7 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 31 March 2011 - 11:32 AM

Bonjour flyeric,

pour que ton z-index fonctionne correctement il te faut ajouter le positionnement relatif et le z-index au div qui contient l'image.

exemple :
CSS
z-index:5000;
position:relative;

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#8 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 31 March 2011 - 12:04 PM

merci beaucoup pour le conseil.

bonne journee a toi.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP