28220 sujets

CSS et mise en forme, CSS3

Pages :
Sous ie...

1 entete
1 bloc conteneur
1 colonne gauche
1 bloc centre
1 bloc droit
1 pied

dans le conteneur:

1 colonne gauche, 1 bloc central, 1 colonne gauche

je veux garder un flux normal, pas de position absolue appliquée aux blocs, simplement le bloc pied qui a
clear: both;


Le bloc central a le plus de contenu, je veux que les colonnes gauche et droite descendent jusqu'en bas à même distance que ce bloc central, même si elles ont moins de contenu...

eh bien que ce soit avec
height: 100%

ou aussi avec l'astuce
table
et
table: cell;

ça marche avec FF mais pas sous IE...

J'ai jeté un coup d'oeil

mais je ne suis pas arriver à faire de même... et au fait sur ce lien là, si on veut rajouter dans l'exemple une colonne centrale, il faudrait, si j'ai bien compris le flux, placer un bloc flottant à gauche, juste sous le premier bloc flottant à gauche ? ben ça marche pas non plus...

??

a+
Modifié par Vajra (13 Mar 2006 - 15:53)
Modérateur,

j'ai toujours pas trouvé... si personne ne peut répondre... enlevez le sujet, il va encombrer... merci

a+
Salut,

eh bien si on suite l'exemple que tu donnes et qu'on allonge le texte du bloc central, effectivement, le pied de page est poussé, mais les colonnes gauche et droite ne suivent pas dans l'élan" la longueur du bloc central. Or , c'est à quoi je veux arriver.

Je voudrais eviter l'astuce des colonnes factices et visiblement si on se conforme au post dont j'ai mis le lien (blog and blues) c'est réalisable... mais sous IE je rencontre un probleme..

a+
Bonsoir.
L'exemple donné par Alsacréations est du html/css "pur" sans artifice d'image pour représenter les colonnes. Il fonctionne très bien si tu te contentes de couleurs d'arrière plan. Dès que tu veux mettre une image pour simuler ces colonnes, pas d'autre moyen que les "colonnes factices". il existe au moins 3 moyens de faire ces colonnes factices. ( un jour, voulant faire simple : j'ai inventé la plus inutile et la plus compliquée, ça t'intérresse ? (*))

Dans ton cas, la hauteur 100% s'adresse au body ? Si oui, cette hauteur est égale à la hauteur d'affichage ( de l'écran et/ou du navigateur ) à l'ouverture de la page, tu peux faire défiler la page verticalement pour te rendre compte qu'il n'y a rien en dessous. Dommage.

ps: j'ai déjà pratiqué cet exemple avec "display: table" avec des grosses erreurs sous IE-Mac. Et des difficultés pour les paddings et les marges partout ailleurs. Le principe est bon mais toutes les propriétés display ( table, cellules, rangées, colonnes, groupes de… etc ) ne semblent pas être trop prises au sérieux par tous navigateurs. Ceci dit, je suis en train de construire un menu déroulant css en display: table... en tout cas pas d'image qui suivent (descendent) pour imiter les arrières plans de colonnes avec cette solution, pour l'instant.

(*) clin d'œil à Olivier.
Modifié par Aureance (17 Aug 2005 - 05:02)
Salut,

Mais comme je l'ai écrit, je veux éviter les colonnes factices, et ce que je veux faire, marche très bien sous FF, et comme je l'ai écrit, c'est avec IE que ça marche pas...

sur le site blog and blues d'ou je prends exemple, apr contre ca marche avec deux colonnes, mais si on j'essaye d'y insérer un bloc central , ben...

a+
Vajra a écrit :
Je voudrais eviter l'astuce des colonnes factices et visiblement si on se conforme au post dont j'ai mis le lien (blog and blues) c'est réalisable... mais sous IE je rencontre un probleme..


La mise en page décrite dans http://blog-and-blues.org/weblog/2004/09/24/304 utilise justement les flottants comme substituts au display:table dans IE Smiley cligne

Ce modèle pourrait en effet être adapté pour 3 colonnes, mais toujours sans utiliser les display:table dans IE.
Salut,

Ok merci, je vais voir cela, mais je vais m'absenter les 3 jours qui suivent, donc ne vous inquiétez pas si je réponds pas, c'est pas que je suis insensible à votre aide, c'est juste que je vais en vacance... Smiley cool


a+
Bon avant de partir je voulais faire un test, j'ai baclé pour mettre en ligne, mais ça marche toujours pas sous IE et sous FF c'est devenu pire! la colonne droite s'est barrée... Smiley lol , euh : Smiley bawling

Bon je laisse le lien si vous voulez jeter un oeil...ICI


Precisions: 1) ce n'est qu'un brouillon,
2) le menu est tiré du menu déroullant de chez Alsa (merci Smiley smile )
3) les couleurs: pas de critiques svp ce n'est qu'un brouillon, Smiley lol
4) les bordures et couleurs de fonds sont là pour visualiser le problème...
5) j'ai pas mis float left à "centre1", car il ya des marges, mais je l'ai qd même mis pour voir, et le résultat est le même...

merci
Modifié par Vajra (17 Aug 2005 - 18:09)
Salut,

Si cela peut t'aider, j'ai fait un peu le même style de mise en page que toi, avec une différence près, c'est que ma colonne centrale est "maître" par rapport au colonne gauche et droite, c'est à dire qu'il faut impérativement que ce soit elle qui est la hauteur la plus grande.
Je te montre mon code au cas où cela t'interesserais.
HTML :

<div class="containerGlobal">
      
      <div class="entete">
        <div class="contenu">
          Le triangle de Sierpinski.
          Chaque mouvement de rotation est une information. En même temps que chaque mouvement
          de rotation est toujours lié à un autre qui le suit ou encore qu'il l'a précédé. Nous
          avons dans cette dernière phrase déjà trois fractales. Le mouvement central, le mouvement
          qui suit et le mouvement qui précède. Prenons un exemple du déroulement de ce phénomène.
          Le lien entre chaque mouvement est d'être à l'origine d'un autre.
        </div>
      </div>
      
      <div class="containerCorps">
        
        <div class="gauche">
          <div class="contenu">
            <br>
            Le triangle de Sierpinski.
            Chaque mouvement de rotation est une information. En même temps que chaque mouvement
            de rotation est toujours lié à un autre qui le suit ou encore qu'il l'a précédé. Nous
            avons dans cette dernière phrase déjà trois fractales. Le mouvement central, le mouvement
            qui suit et le mouvement qui précède. Prenons un exemple du déroulement de ce phénomène.
            Le lien entre chaque mouvement est d'être à l'origine d'un autre. Il soutient le mouvement
            à qui il donne naissance. Le Soleil origine de la Galaxie et est soutenu par elle.
            La Terre origine du Soleil et est soutenue par lui. La Lune origine de la Terre et
            est soutenue par elle. Les atomes de la Lune originent d'elle et sont soutenus par elle.
            Tout se tient, même jusqu'au premier quantum.
            
            
          </div>
        </div>
        
        <div class="droite">
          <div class="contenu">
            <br>
            Le triangle de Sierpinski.
            Chaque mouvement de rotation est une information. En même temps que chaque mouvement
            de rotation est toujours lié à un autre qui le suit ou encore qu'il l'a précédé. Nous
            avons dans cette dernière phrase déjà trois fractales. Le mouvement central, le mouvement
            qui suit et le mouvement qui précède. Prenons un exemple du déroulement de ce phénomène.
            Le lien entre chaque mouvement est d'être à l'origine d'un autre. Il soutient le mouvement
            à qui il donne naissance. Le Soleil origine de la Galaxie et est soutenu par elle.
            La Terre origine du Soleil et est soutenue par lui. La Lune origine de la Terre et
            est soutenue par elle. Les atomes de la Lune originent d'elle et sont soutenus par elle.
            Tout se tient, même jusqu'au premier quantum.
            Chaque mouvement de l'univers est une partie, une fractale de tout autre mouvement.
            Ce phénomène est universel sinon l'univers ne serait pas isotrope. On peut même le
            reconnaître en biologie, en sociologie, etc.
          </div>
        </div>
        
        <div class="centre">
          <div class="contenu">
            <br>
            <br>
            Le triangle de Sierpinski.
            Chaque mouvement de rotation est une information. En même temps
            que chaque mouvement de rotation est toujours lié à un autre qui le suit ou
            encore qu'il l'a précédé. Nous avons dans cette dernière phrase déjà trois fractales.
            Le mouvement central, le mouvement qui suit et le mouvement qui précède. Prenons
            un exemple du déroulement de ce phénomène. Le lien entre chaque mouvement est d'être
            à l'origine d'un autre. Il soutient le mouvement à qui il donne naissance. Le Soleil
            origine de la Galaxie et est soutenu par elle. La Terre origine du Soleil et est
            soutenue par lui. La Lune origine de la Terre et est soutenue par elle. Les atomes
            de la Lune originent d'elle et sont soutenus par elle. Tout se tient, même jusqu'au
            premier quantum.
            Chaque mouvement de l'univers est une partie, une fractale de tout autre mouvement.
            Ce phénomène est universel sinon l'univers ne serait pas isotrope. On peut même le reconnaître
            en biologie, en sociologie, etc.
            IV- On reconnaît les fractales même en biologie
            La biologie ne sera pas un cas rare. Elle n'est pas une science isolée relativement aux fractales.
            Nous verrons plus loin pourquoi le mode fractal va se retrouver complètement partout dans
            l'univers.
            James Gleick :
            [...]Et les biologistes théoriciens commencèrent à soupçonner que l'invariance d'échelle fractale
            était une caractéristique non seulement ordinaire mais aussi universelle de la morphogenèse.
            Ils affirmèrent que la compréhension de l'encodage et de la réalisation de telles structures
            constituait désormais un défi majeur pour la biologie.»
            «[...] certains biologistes théoriciens commencent à découvrir qu'une organisation fractale
            contrôlait les structures à tous les niveaux du corps humain:[...] (Des) impulsions aux muscles
            cardiaques, tout cela se révéla fractal.[...] un labyrinthe de bifurcations autosimilaires sur
            des échelles de plus en plus petites.»
            Gleick, James, La théorie du chaos, Flammarion, 1989, pp. 145 et 146.
            V- Il en est de même en SOCIOLOGIE
            
            Le modèle de la famille se répète pour le village qui se répète pour la ville qui se répète
            pour un État qui se répète pour les Nations Unies.
            
            Nous pourrions continuer ainsi en allant vers des particules de plus en plus petites comme
            nous pourrions aller dans l'autre sens vers l'infiniment grand. Tout est question d'échelle.
            Cela dépend de quel angle nous observons les choses. La Lune observée en elle-même a bien
            ses trois premières dimensions, mais si nous l'observons comme, faisant partie du système
            Terre-Lune, elle change d'échelle et sa quatrième dimension que lui donne son mouvement
            de translation autour de la Terre devient alors les trois premières dimensions du système
            Terre-Lune. Chaque échelle est comme une fractale de l'univers, un niveau différent
            d'état. En faisant le zoom sur un état, on atteint, en changeant d'échelle, l'état
            suivant. On peut aller aussi bien vers l'infiniment petit comme vers l'infiniment
            grand.
            VI- La cosmologie de Laurent Nottale
            Cependant, pour Laurent Nottale, directeur au CNRS, auteur d'une nouvelle théorie de l'univers
            : "Espace-temps fractal", il y aurait une limite absolue vers l'infiniment petit. Selon lui
            tout s'arrête à la dimension de Planck soit une dimension de dix millions de milliards de
            milliards fois plus petite qu'un atome d'hydrogène. Pourquoi donc considérer cette dimension
            comme un autre absolu? Dans un univers infini, il n'y a pas de limite. À l'instant zéro, il
            y a un temps infini, il y a eu le passage à la limite par le grand changement de phase du
            continu au discontinu mais avec cette particularité que ce changement de phase n'était pas
            à sens unique. L'univers est un ÊTRE PARADOXAL par nature ; en même temps qu'il devient
            DISCONTINU, il demeure CONTINU. Il est, en même temps de deux natures : à la fois CONTINU
            et DISCONTINU. Voilà que la lumière ne serait plus seuls à posséder deux natures en
            même temps ce qui contredit le principe d'identité de la logique traditionnelle
            À venir jusqu'ici tout va bien avec Laurent Nottale cependant où je ne suis pas d'accord c'est
            lorsqu'il prétend bâtir une cosmologie à partir des fractales. C'est, cependant, un bon début.
            Il nous fait voir le processus de structuration de l'univers même s'il n'est pas arrivé à
            expliquer pourquoi existent les fractales. En février 1994, la revue Ciel et Espace annonçait
            en pleine page couverture: "Espace-temps fractal" comme la nouvelle théorie de l'univers
            de Laurent Nottale. Il ne peut prétendre faire une cosmologie avec sa théorie des fractales.
            C'est insuffisant et incomplet. Pour bâtir une cosmologie il faut avoir une substance et
            des lois qui la régissent. Le système fractal n'est tout simplement qu'un processus
            d'évolution. Il ne fait connaître ni la substance de l'univers, ni les lois qui le
            régissent. De plus, il n'explique même pas ce qui rend l'univers fractal.
            S'il avait présenté sa théorie comme l'espace/temps fractal, cela eut été déjà plus complet.
            L'espace divisé par le temps constitue la substance même de l'univers en ACTE. Il y a donc
            toute une différence entre espace-temps et espace/temps.
            <br>
            <br>
          </div>
        </div>
        
      </div>
      
      <div class="pied">
        <div class="contenu">
          Le triangle de Sierpinski.
          Chaque mouvement de rotation est une information.
          En même temps que chaque mouvement de rotation est toujours
          lié à un autre qui le suit ou encore qu'il l'a précédé.enue par lui.
        </div>
      </div>
      
    </div>
    
  </body>

CSS :
body{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
}

.containerGlobal{   /* contient tout les elements de la page */
      width: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
}
      
.entete{
      width: 100%;
      height: auto;
      margin: 0;
      background-color: #800080;
      border-bottom: 2px solid #ffff00;
      position: relative;
}



.containerCorps{    /* contient les 3 colonnes */
      width: 100%;
      height: 100%; /* pour IE hauteur de gauche & droite */
      margin: 0;
      padding: 0;
      position: relative;
}

.gauche{
      width: 180px;
      height: 100%;
      top: 0;
      left: 0;
      position : absolute;
      background-color: #0000dd;
      border-right: 2px solid;
      border-color:  #ffff00;
}

.droite{
      width: 180px;
      height: 100%;
      top: 0;
      right: 0;
      position: absolute;
      background-color: #0000dd;
      border-left: 2px solid;
      border-color:  #ffff00;
}

.centre{
      margin-left: 180px;
      margin-right: 180px;
      background-color: #00ffff;
}

.pied{
      width: 100%;
      height: auto;
      background-color: #800080;
      border-bottom: 2px solid #ffff00;
      border-top: 2px solid #ffff00;
      color: #ffffff;
}

.contenu{   /* sera imbriqué dans chaque conteneur principal */
      margin: 0;
      padding: 10px;
      font-size: 1.2em;
      color: white;
}

Cela fonctionne avec mozilla, ie et netscape, opéra : les colonnes droite et gauche ne descendent pas en bas, j'ai toujours pas trouvé.
J'espère t'avoir aider Smiley smile
Modifié par #sylvain# (17 Aug 2005 - 19:29)
Laurent Denis a écrit :
Vite bâclé, voici l'exemple en display:table-cell pour 3 colonnes


Bonsoir

Jaimerais mettre la colonne de gauche en bleu et celle de droite en jaune.
Comment dois-je faire?

Merci
Salut Vajra.
Je te propose une idée simple : page en 3 cols avec display-table qui fonctionne (sauf IE-Mac) je ne sais si ça te conviendra car ça ne fonctionne pas avec les navigateurs antédiluviens... O ! on n'est pas des mammouths.
Seras-tu assez grand pour récupérer la css ?… au cas échéant me contacter par MP ( j'ai pas dit Military Police Smiley langue )
bonnes vacances ( maintenant, c'est moi qui barre X temps )
Modifié par Aureance (18 Aug 2005 - 04:28)
Michel a écrit :
Jaimerais mettre la colonne de gauche en bleu et celle de droite en jaune.
Comment dois-je faire?


Inventer la solution miracle à laquelle personne n'a songé.
Bonsoir à tous… et voir références aux textes précédents.

De toutes les couleurs différentes… Appelez moi Dieu ( c'est un miracle ). bleu à gauche , jaune à droite mais aussi couleur au choix pour centre, tête , pied, et body ?
J'en parlais avec Zeus et notre chère amie Hélène, y'a pas plus tard que ce matin… -"Nous avions prévu que ce ne soit pas faisable", me disaient-ils. Je leur ai répondu qu'en ma qualité de demi dieu ( ben, oui, c'est tout ) je me faisais fort de leur donner déraison. Il m'a fallu cependant cogiter un "maxi-balaize-top-niveau" ce qui m'essouffla un peu ( koff, koff on les sent les cigarettes ) ce code :
body {
	background: purple;}
#cime {
	background: green;}
#gauche {
	background: blue;}
#centre {
	background: white;}
#droite {
	background: yellow;}
#base {
	background: gray;}
Il est vrai qu'avec ça on ne va pas loin… Et je comprend votre jeunesse curieuse : ben oui y'a une astuce !
Ce type de mise en page avec "display: table" est un peu expérimental.
Si tu parles d'IE-Mac, non, on ne peut pas le rendre compatible, ce navigateur est "figé" depuis les années 2000. Pour IE-Win, je ne sais pas, je n'ai pas de PC.
Salut,

Bon je viens de revenir, je vais digérer les posts réponses, mais déjà il semble que si tous les blocs (colonnes) sont fluides, ça semble ingérable sous IE, je vais essayer en mettant le bloc central en fixe, mais c'est pas vraiment ce que je désirai... en tout cas merci pour vos réponses pendant que j'étais absent Smiley jap
Bon visiblemnt j'ai arrangé pour FF et je peux faire mieux... vais voir cela, mais ça marche pas sous IE, c'est là que je comprends pas par rapport aux modeles donnés par vous tous... Aureance, Laurent Denis, Raphaël, Sylvain et les autres... pour voir la correction, le lien que j'avais indiqué plus haut est toujours valide... merci
Modifié par Vajra (22 Aug 2005 - 16:20)
Pages :