IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise En Page FLuide


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    314
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 314
    Points : 118
    Points
    118
    Par défaut Mise En Page FLuide
    Bonjour,
    Je m'initie à la fluidité des sites.
    Dans un ouvrage, j'ai cet exemple:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<title>Les images fluides</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta charset="UTF-8" />
    	<style>
                    h1, h2, h4, p, figure, img {
                            margin: 0;
                    }
                    #container {
                            width: 80%;
                            max-width: 1200px;
                            margin: 2% auto;
                    }
                    header, footer {
                            background-color: #000;
                            color: #fff;
                            text-align: center;
                    }
                    main {
                            background-color: #f9f9f9;
                    }
                    article, aside {
                            display: table-cell;
                            padding: 1.0416666667%; /* (10x100)/960=1,0416666667% */
                    }
                    article {
                            width: 37.3958333333%; /* (359x100)/960=37,3958333333% */
                            border-right: 1px solid #000;
                    }
                    aside {
                            width: 18.75%; /*(180x100)/960=18,75% */
                            background-color: #ddd;
                    }
                    figure {
                            width: 100%;
                    }
                    figure img {
                            max-width: 100%;
                    }
                    p ~ p, h4 ~ h4 {
                            margin-top: 20px;
                    }
            </style>
    </head>
    <body>
    <div id="container">
    	<header>
    		<h1>Lorem ipsum dolor sit amet, consectetur adipisici elit amari</h1>
    	</header>
    	<main>
    		<article>
    			<h2>Prima luce cum quibus</h2>
    			<figure><img src="loutre.jpg" alt="Une loutre" /></figure>
    			<p>Magna pars studiorum, prodita quaerimus. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Pellentesque habitant morbi tristique senectus et netus. Nec dubitamus multa iter quae et nos invenerat. Cum sociis natoque penatibus et magnis dis parturient. Gallia est omnis divisa in partes tres, quarum. Curabitur blandit tempus ardua ridiculus sed magna. Prima luce, cum quibus mons aliud  consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent.</p>
    			<p>Etiam habebis sem dicantur magna mollis euismod. At nos hinc posthac, sitientis piros Afros. Curabitur blandit tempus ardua ridiculus sed magna. Phasellus laoreet lorem vel dolor tempus vehicula. Fictum,  deserunt mollit anim laborum astutumque! Quid securi etiam tamquam eu fugiat nulla pariatur.</p>
    		</article>
    		<article>
    			<h2>Mons aliud consensu</h2>
    			<figure><img src="tigre.jpg" alt="Un tigre" /></figure>
    			<p>Curabitur blandit tempus ardua ridiculus sed magna. Gallia est omnis divisa in partes tres, quarum. Contra legem facit qui id facit quod lex prohibet. Plura mihi bona sunt, inclinet, amari petere vellent. Fabio vel iudice vincam, sunt in culpa qui officia. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Quo usque tandem abutere, Catilina, patientia nostra? Quid securi etiam tamquam eu fugiat nulla pariatur. Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani, tertiam.</p>
    		</article>
    		<aside>
    			<h4>At nos hinc posthac</h4>
    			<p>Gallia est omnis divisa in partes tres, quarum. Curabitur blandit tempus ardua ridiculus sed magna. Prima luce, cum quibus mons aliud  consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent. Etiam habebis sem dicantur magna mollis euismod.</p>
    			<h4>Plura mihi bona sunt</h4>
    			<p>Curabitur blandit tempus ardua ridiculus sed magna. Phasellus laoreet lorem vel dolor tempus vehicula. Fictum,  deserunt mollit anim laborum astutumque! Quid securi etiam tamquam eu fugiat nulla pariatur.</p>
    		</aside>
    	</main>
    	<footer>
    		<p>Curabitur est gravida et libero vitae dictum.</p>
    	</footer>
    </div>
    </body>
    </html>

    Il réagit très bien sur Firefox et Chrome, mais pas sur IE.
    J'ai cherché, mais n'ai pas trouvé pourquoi cela ne fonctionnait pas.

    Merci pour votre aide et ma compréhension.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Dis-nous :
    • Ce qui "ne fonctionne pas" précisément
    • Sur quelle version d'IE.


    N.B. Il n'est pas nécessaire de faire des calculs savants pour les pourcentages !
    Et le padding peut se mettre en px, sans souci.

    D'autre part, remplace <article> par <section> (une section pourra alors contenir plusieurs articles) :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    section,
    aside {
      display: table-cell;
      padding: 20px;
    }
    section {
      width: 40%;
      border-right: 1px solid #000;
    }
    aside {
      width: 20%;
      background-color: #ddd;
    }}
    Dernière modification par Invité ; 01/04/2018 à 11h42.

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    314
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 314
    Points : 118
    Points
    118
    Par défaut
    IE11
    Je joins les 2 images
    Nom : loutre.jpg
Affichages : 143
Taille : 99,8 Ko
    Nom : tigre.jpg
Affichages : 145
Taille : 176,4 Ko
    Voilà ce que j'obtiens:
    Nom : Capture.JPG
Affichages : 143
Taille : 231,9 Ko

  4. #4
    Invité
    Invité(e)
    Par défaut
    Ajoute :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    main { display:table; width:100%; }
    img { max-width:100%; }

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Février 2008
    Messages
    314
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 314
    Points : 118
    Points
    118
    Par défaut
    J'ai rajouté:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    main { display:table; width:100%; }
    Quant à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    img { max-width:100%; }
    je l'avais déjà avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    figure img { max-width: 100%; }
    Toujours le même affichage

Discussions similaires

  1. Mise en page fluide et débordements
    Par <div>kowa</div> dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 21/12/2008, 15h33
  2. [CR.NET][VS.NET] mise en page et sections
    Par guignol dans le forum SDK
    Réponses: 8
    Dernier message: 06/08/2004, 16h07
  3. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 17h31
  4. [CR] Mise en page
    Par akolyto dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 14/10/2003, 13h22
  5. [mise en page] pour bien indenter son code
    Par bihorece dans le forum C++Builder
    Réponses: 4
    Dernier message: 06/08/2003, 17h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo