28172 sujets

CSS et mise en forme, CSS3

Occuper tout la largeur avec des tailles fixes et proportionnelles

Bonjour tout le monde,

J'ai un conteneur avec une taille proportionnelles. Ils contiennent des blocs fixes et des blocs proportionnelles.

Exemple 
<div style="width:70%">
      <div style="width:50%"> </div>
      <div style="width:25%"> </div>
      <div style="width:25%"> </div>
</div>

Si tout les blocs enfants sont proportionnelles, il n'y a pas de soucis.

Malheureusement, c'est rarement le cas. Il y a toujours des blocs enfant ayant une largeur fixe en pixel.
Le cas type sont les bordures de droites et de gauches d'un bouton, d'un tableau .....

Exemple

<div style="width:70%">
      <div style="float:left;width:17px;background-image:url('bordure_gauche.png');"> </div>
      <div style="float:left;width:???;background-image:url('centre.png');"> 
              <!-- contenu du bouton par exemple 
      </div>     
      <div style="float:left;width:17px;background-image:url('bordure_droite.png');"> </div>
</div>


Pour le moment, je calcule la hauteur de mon conteneur/wrappeur en Jquery et je fixe ma largeur en pixel les largeurs qui doivent etre proportionnelles.

Je rencontre cette problématique aussi les sépérateurs, les bordures ayant une taille fixe.
Tu dessines des bordures avec des DIV flottants de 17px de large? Smiley eek
La méthode est peut-être à revoir...
Modifié par Florent V. (21 Apr 2010 - 22:57)
Voici un autre exemple avec un séparateur au centre de 2 pixels

<div style="width:70%">
      <div style="float:left;width:17px;background-image:url('bordure_gauche.png');"> </div>
      <div style="float:left;width:???;background-image:url('centre.png');"> 
              <!-- contenu du bouton par exemple 
      </div>
      <div style="float:left;width:2px;background-image:url('separateur.png');"> </div>
      <div style="float:left;width:???;background-image:url('centre.png');"> 
              <!-- contenu du bouton par exemple 
      </div>
      <div style="float:left;width:17px;background-image:url('bordure_droite.png');"> </div>
</div>



Florent, je n'adopte peut etre pas la bonne méthode.
Si tu es surpris, je pense alors que tu fais allusion à des positions absolu ainsi que top et left pour positionner les éléments ayant une largeur fixe (bordure, séparateur)...
Ma démarche n'est peut etre correct pour assembler brodure, séparateur avec des float:left.

Serait il possible de m'aiguiller vers la bonne méthode ?
Avec mon exemple comment dois m'y prendre ?
alexx a écrit :
Serait il possible de m'aiguiller vers la bonne méthode ?

On utilise plutôt des DIV imbriqués et des background-image sur ces dernières. (À défaut de support de la propriété CSS3 border-image.) Mais la méthode exacte va dépendre du design à réaliser.

alexx a écrit :
Avec mon exemple comment dois m'y prendre ?

Aucune idée, je n'ai pas vu le design de l'élément à intégrer, et je ne connais pas les contraintes (extensibilité en hauteur, en largeur, les deux...).
Florent V. a écrit :

On utilise plutôt des DIV imbriqués et des background-image sur ces dernières. (À défaut de support de la propriété CSS3 border-image.) Mais la méthode exacte va dépendre du design à réaliser.

Justement, pour crée mes élements visuels, j'utilise des div imbriqué avec des background-image


Florent V. a écrit :

Aucune idée, je n'ai pas vu le design de l'élément à intégrer, et je ne connais pas les contraintes (extensibilité en hauteur, en largeur, les deux...).

Mes contraintes :
- extensible en largeur
- support de IE6


Voici une capture pour présenter mes éléments :
http://j.imagehost.org/0773/capture.png


<div id="conteneur">

     <div id="enteteRouge">     
         <div class="bordureGauche"></div>
         <div class="centre"></div>
         <div class="bordureDroite"></div>
     </div>
</div>


Le "conteneur" principal est extensible en largeur. Il contient plusieurs élements enfants empiler verticalement bien aligné.


#conteneur {
   padding-left : 15px;
   padding-right : 15px;
   width : 70%; 
}
#enteteRouge {
   /* aucune toute la largeur du conteneur, donc de parametre with spécifié  */ 
}




Depuis que tu m'as répondu Florent, j'ai trouvé un début de réponse qui est je pense, la bonne méthode. Je positionne non pas en floatant mes bordure mais en position absolue mes bordures.

Mes bordures :
.bordureGauche {
    background-image:url('bordure-gauche.png');
    width: 10px;
    height10px;
    [b]position:absolute;
    top:0px;
    left:0px;[/b]
}
.bordureDroite {
    background-image:url('bordure-gauche.png');
    width: 10px;
    height10px;
    [b]position:absolute;
    top:0px;
    right:0px;[/b]
}



et pour que mes bordures se positionne par rapport à son parent enteteRouge, je rajoute ceci :

#enteteRouge {
    [b]position :relative;[/b]
}


Je me suis inspiré du tuto de de Open Web

Comme les bordures sortent du flux normal. Je spécifie une largeur à 100% pour le centre. Je me dis qu'il y a aura une superposition avec les bordures.

#centre {
   width : 100%;
}



Malheuresement, toute la largeur du #centre (représenté par le cadre noir) n'occupe la totalité avec son conteneur (cadre jaune)
http://j.imagehost.org/t/0280/capture2.jpg

Je pense que je suis sur la bonne voie.

Ou me suis je trompé ?
Modifié par Florent V. (22 Apr 2010 - 13:55)
Enfin de compte cela ne fonctionnait pas parce que j'avais oublié de désactiver mon script Jquery qui déterminer #centre. Il refixé la taille en pixel.


Cela fonctionne maintenant nickel en positionnant #centre à 100%

mais à part que maintenant, je vois la bordure de #centre débordé sur .bordureDroite comme on peux voire.
upload/28494-capture3.png

La solution la plus propre serait donc de positionner le centre en position absolute
[code]#centre {
top : 0px;
left : 11px; /* juste après la bordure gauche */
position : absolute;
}
et comme cela je pourrais jouer avec les z-index. Mettre un plus élevé sur la bordure de droite.
alexx a écrit :
La solution la plus propre serait donc de positionner le centre en position absolute

Houlà, surtout pas! La solution trouvée jusqu'ici était bonne, c'est juste l'exécution qui laissait un peu à désirer. Smiley cligne

Si je reprends cette image http://j.imagehost.org/0773/capture.png et que je veux et que je veux réaliser l'en-tête rouge, en partant du principe qu'il doit aussi contenir l'effet d'ombre en haut, à gauche et à droite, je peux faire:
<div id="entete">
  Ici tout le contenu de l'en-tête. Pas besoin d'un conteneur dédié.
  <span class="deco1"></span><span class="deco2"></span>
</div><!--#entete-->

#entete {
  position: relative;
  overflow: hidden;
  padding: 15px 20px 5px 20px;
  /* Image 20px de large sur 100px de haut (pour prendre large) */
  background: #E06060 url(entete-bg.png) repeat-x center top;
}
#entete .deco1, #entete .deco2 {
  position: absolute;
  top: 0;
  height: 100px;
  width: 20px;
  /* Image 40px de large sur 100px de haut, avec les deux coins côte à côte */
  background: url(entete-corners.png) no-repeat left top;
}
#entete .deco1 {left: 0;}
#entete .deco2 {right: 0; background-position: right top;}

Le principe est que la hauteur de #entete va dépendre de son contenu. Les coins sont des éléments vides avec image de fond, positionnés en absolu, et ayant une hauteur arbitraire (100px pour prévoir un éventuel passage du contenu de l'en-tête sur deux lignes, un agrandissement de la taille du texte, etc.). La partie des «coins» qui dépasse est masqué par le overflow:hidden sur le parent.
Merci de m'avoir aiguillé vers la bonne démarche. Je pense avoir compris l'idée mais j'ai toujours mon dernier problème :
Les 2 coins supérieurs de l'image de fond #entete apparaissent toujours derrière mes images dédié aux coins (#entete .deco1, #entete .deco2).

J'ai oublié de le préciser. Les coins des images (entete-corners.png) sont transparents. Cela a peut être son importance.

Florent V. a écrit :

#entete {
  position: relative;
  overflow: hidden;
  padding: 15px 20px 5px 20px;
  /* Image 20px de large sur 100px de haut (pour prendre large) */
  background: #E06060 url(entete-bg.png) repeat-x center top;
}

A un moment, je pensais qu'en mettant un padding-right et padding-left à 20px (la largeur des images pour les coins), cela permettrait de repousser l'image de fond de #entete de 20px de chaque coté.
Malheureusement ce n'est pas le cas. Le padding ne s'applique pas sur le backrground-image.


#entete .deco1, #entete .deco2 {
  position: absolute;
  top: 0;
  height: 100px;
  width: 20px;
  /* Image 40px de large [b]sur 100px de haut[/b], avec les deux coins côte à côte */
  background: url(entete-corners.png) no-repeat left top;
}

Florent V. a écrit :
Les coins sont des éléments vides avec image de fond, positionnés en absolu, et ayant une hauteur arbitraire (100px pour prévoir un éventuel passage du contenu de l'en-tête sur deux lignes, un agrandissement de la taille du texte, etc.).

Par exemple, si j'ai bien compris.
entete-corners.png fait réellement 70px de hauteur
tu as attribué aux 2 span une hauteur de 100px pour laisser 30px de libre. Cette espace libre se site en dessous.

Florent V. a écrit :
La partie des «coins» qui dépasse est masqué par le overflow:hidden sur le parent.

Malheureusement cela ne fonctionne pas de mon coté. J'ai peut etre oblié quelques choses.
alexx a écrit :
Les coins des images (entete-corners.png) sont transparents. Cela a peut être son importance.

Voilà une contrainte que tu avais oublié de mentionner. Smiley lol
L'exemple que je donnais supposait des coins opaques. Les deux éléments utilisés pour dessiner les coins doivent recouvrir une partie de #entete, sinon ça ne marche pas. Il y a une alternative avec des coins placés en absolu à l'extérieur de #entete, mais ça ne sera pas compatible IE6 (et je ne suis plus sûr pour IE7).

Si on veut vraiment des coins transparents ET un support de IE6/7, il faudra utiliser soit un tableau à trois cellules, soit trois DIV imbriqués, en s'inspirant par exemple de ce qui est démontré ici:
http://covertprestige.info/css/boites-fluides/

Ceci dit, d'après ce que j'ai vu du design on peut tout à fait avoir des coins opaques, ce qui simplifierait tout de même grandement les choses. Est-ce que tu peux avoir un fond texturé, un dégradé ou des couleurs changeantes derrière ton en-tête rouge? Ton image montrait un fond blanc uni.
Sujet clos
Aller à