Discussion :

[Invité]

Bonjour,

Pour présenter certains objets de hauteur différente je crée une "boîte" avec un attribut height: auto;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#boiteAuto {
    position: absolute;
    top: 250px;
    left: 0px;
    width: 100%;
    height: auto;
    background-color: #c0c0c0;
}

Dans cette boîte j'insère une seconde boîte avec du texte par exemple. Cette deuxième boîte a une hauteur inconnue, je dois donc la définir à height: auto; également.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#boiteTexte {
    position: absolute;
    top: 10px;
    left: 200px;
    width: auto;
    height: auto;
}

L'affichage se fait comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="boiteAuto">
   <div id="boiteTexte">
          Texte à insérer
   </div>
</div>

Le problème se présente à l'affichage car le texte n'apparaît pas à l'écran, je suis obligé de fixer la valeur height de boiteTexte (par ex. 100px) pour que la première boîte s'adapte à cette dimension!

N'y a-t-il pas un truc pour pouvoir conserver les propriétés height à auto sans obtenir ce bug? Je ne peux pas fixer les hauteurs car le contenu est issu d'une bdd et n'est donc pas d'une hauteur constante.

Merci!

webrider

[buzeeg]

salut,

je ne suis pas sûr d'avoir bien compris ton problème, mais tu peux essayer d'utiliser la propriété min-height.

[Invité]

En fait il y a deux boîtes avec la propriété height fixée à auto qui sont imbriquées et cela provoque un bug d'affichage.

La propriété min-height n'est pas reconnue par IE me semble-t-il?

[Candygirl]

En fait il y a deux boîtes avec la propriété height fixée à auto qui sont imbriquées et cela provoque un bug d'affichage.

Ton problème d'affichage est probablement la conséquence du positionnement absolu de ton #boiteTexte. pourquoi utiliser le positionnement absolu ici? un

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#boiteTexte { 
  margin-top: 10px;
  margin-left: 200px;
}

ne pourrait-il pas convenir?

La propriété min-height n'est pas reconnue par IE me semble-t-il?

par IE6-; ie7 le prend en charge

[clb56]

Salut,

Le problème se présente à l'affichage car le texte n'apparaît pas à l'écran

Tu es sur ? Parce que pour ce que j'en voie le texte apparait bien, ce qui n'apparait pas c'est la couleur de fond de #boiteAuto. Et ça c'est tout à fait normal.

Comme l'a dit Candygirl tout vient du fait que tu as positionné #boiteTexte en absolute, de ce fait elle est hors du flux pour #boiteAuto qui se retrouve donc vide en quelque sorte et donc n'a strictement aucune hauteur.

Auto est la valeur par défaut de la propriété height, inutile donc de l'indiquer sinon pour corriger une déclaration antécédente dans la feuille de style.

La solution présentée par Candygirl est bonne bien sur. S'il s'agit de centrer verticalement le texte à insérer par rapport à la couleur background alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#boiteTexte {
margin-left: 200px;
padding:10px 0;
}

Devrait y suffire

[Invité]

Merci pour vos réponses. Malheureusement j'ai d'autres éléments (que boiteTexte) à positionner dans boiteAuto et le positionnement "absolute" est pour moi le seul moyen de le faire précisément. Afficher ces éléments dans le flux va perturber l'affichage complet de ma page (testé).

Je m'étais dit qu'il existait peut-être une parade à cela mais on dirait bien que non... va falloir que je modifie mon approche de cette présentation.

Encore merci @++!

webrider

[Candygirl]

Malheureusement j'ai d'autres éléments (que boiteTexte) à positionner dans boiteAuto et le positionnement "absolute" est pour moi le seul moyen de le faire précisément.

Le positionnement absolu est à éviter pour un élément contenant du texte car sa hauteur dépend de la taille de la police sur laquelle on n'a pas la maîtrise. Il devrait être réservé à quelques utilisations pour lesquels on maîtrise correctement ce problème.

Peut-être pourrais-tu décrire un peu mieux la strcture de ta page qu'on puisse te donner d'autres idées de montage?

[Invité]

Merci pour ton aide mais la présentation que je fais est trop difficile à expliquer sur un forum : il y a plein de tableaux et boites en tout genre...

Je vais finir par y arriver comme d'hab! lol

PS. tu es de quel coin de Suisse? J'y étais la semaine dernière en vacances (région de montreux)

[clb56]

la présentation que je fais est trop difficile à expliquer sur un forum

Ben un petit exemple en ligne alors

[Invité]

Oui ce serait une idée sauf que le site est sur un serveur test, ce n'est pas moi qui met en prod.

Je vais me débrouiller comme je l'ai toujours fait, on comptera ça dans les petits contre-temps! LOL

Merci à vous deux pour votre aide en tous cas!