28172 sujets

CSS et mise en forme, CSS3

Hauteur div dynamique (adaptée à la hauteur dynamique d'une autre div

Bonjour,

J'ai un contenu dynamique dans une div. La taille de cette div s'adapte bien au contenu quand il change.

J'ai une autre div à gauche de ce contenu, qui me sert en quelque sorte de "bordure". Je veux afficher des images dans cette div pour me servir de bordure.

Ca ressemblerai à qqchose comme ça (oui je sais c'est très moche ) :
http://tooliphone.net/temp/pb_div_dynamique.jpg

C = mon contenu dynamique en hauteur
1 = En haut à gauche : une première image de taille FIXE
2 = une image de 1px de haut, pour "combler" dynamiquement le reste de la bordure (avec un "repeat-y"
3 = En bas à gauche : une seconde image de taille FIXE


// Contient 1+2+3
#borderLeft{
  width: 50px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  float:left;
  display:block;
}
// 1
#borderLeftTop{
  width: 50px;
  height: 373px;
  background: url(<chemin-vers-image>/border-left-top.png);
  margin: 0px;
  padding: 0px;
  border: 0px;
  display:block;
}
// 2
#borderLeftMiddle{
  width: 50px;
  height: 100%;
  background: url(<chemin-vers-image>/border-left-middle.png) repeat-y;
  margin: 0px;
  padding: 0px;
  border: 0px;
  display:block;
}
// 3
#borderLeftBottom{
  width: 50px;
  height: 335px;
  background: url(<chemin-vers-image>/border-left-bottom.png);
  margin: 0px;
  padding: 0px;
  border: 0px;
  display:block;
}
// C (contenu)
#theContent{
  width:473px;
  float:left;
  display:block;
}


Tout se jour donc dans #borderLeftMiddle, mais je sais pas quoi mettre en height pour gérer ça correctement.

100% :ça me fait 100% de la taille de ma div parente. Ca aurait été ok si ma bordure avait juste eu l'image à répéter sur toute le hauteur.
Mais là à cause de mes parties 1 et 3 (fixes), je peux pas mettre 100% !

Voilou... merci pour votre aide, en espérant que c'est un minimum clair ! (pas facile à expliquer) ;-p
Modifié par tooliphone (11 Jun 2010 - 11:17)
Bonjour,

Première remarque: la syntaxe de commentaires utilisée est invalide en CSS. À corriger si tu l'as vraiment utilisée dans ton code CSS.

Quant au problème lui-même: tu es parti sur une mauvaise structure. Je ne peux pas trop m'avancer sans voir le design réel (pas juste un schéma), mais à priori tu devrais pouvoir te contenter d'un padding-left:50px sur ton conteneur, et lui attribuer l'image à répéter en hauteur comme image de fond. Pour les coins en haut à gauche et en bas à gauche, tu devrais pouvoir placer deux éléments en absolu (de simples SPAN, par exemple).

En CSS3, si le support de IE n'est pas essentiel (affichage dans IE8 et inférieurs traité en dégradation élégante), tu peux regarder du côté de border-image ou des backgrounds multiples.

tooliphone a écrit :
100% :ça me fait 100% de la taille de ma div parente.

Pas forcément. Et même, le plus souvent, pas du tout. Le 100% ne marche que si tu as déclaré une hauteur fixe pour la DIV parente, et je doute que ce soit le cas ici.
pour info j'ai abandonné ce design et je me suis contenté d'une bordure avec la même image à répéter sur toute la hauteur (sur mon schéma, j'ai donc supprimé 1 et 3 et conservé uniquement 2)

... c'est bien plus simple, même si c'est pas exactement ce que je voulais faire !

A+
tooliphone a écrit :
... c'est bien plus simple, même si c'est pas exactement ce que je voulais faire !

Ce que tu souhaitais faire reste relativement simple, ceci dit. Mettons qu'on veut un bloc de 500px de large, avec une décoration de 50px de large de chaque côté sur toute la hauteur (images en repeat-y), et des décorations de même largeur dans les coins:
<div id="test">
  <span class="deco1"></span><span class="deco2"></span>
  <span class="deco3"></span><span class="deco4"></span>
  <!-- Contenu du bloc -->
</div><!--#test-->

#test {
  position: relative;
  width: 380px; /* Pas nécessaire s'il y a déjà un conteneur de 500px de large en amont. */
  padding: 10px 60px;
  background: url(test-fond-gauche-droite.png) repeat-y; /* Image de 500px de large */
}
#test .deco1, #test .deco2, #test .deco3, #test .deco4 {
  position: absolute;
  width: 50px; height: 50px;
  background: url(test-fond-coins.png) no-repeat; /* Image 200x200 avec les 4 coins formant une sorte de cercle. */
}
#test .deco1 {left:0; top:0; background-position: left top;}
#test .deco2 {right:0; top:0; background-position: right top;}
#test .deco3 {left:0; bottom:0; background-position: left bottom;}
#test .deco4 {right:0; bottom:0; background-position: right bottom;}

Moins élégant que des backgrounds multiples mais ça permet d'être compatible IE, et d'utiliser un sprite CSS (test-fond-coins.png) au lieu de 4 images séparées. À noter que border-image (CSS3 aussi) permet d'utiliser une seule image, du moins si mon souvenir est bon.
Sujet clos
Aller à