Changeset 88577 in spip-zone


Ignore:
Timestamp:
Apr 11, 2015, 8:58:59 PM (4 years ago)
Author:
chankalan@…
Message:

proposition pour rompre la largeur fixe et adapter l'affichage jusqu'à 640px

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _galaxie_/www.spip-contrib.net/themes/2009/habillage.css

    r87635 r88577  
    7070/*  Disposition a l'ecran des blocs principaux
    7171/*  ------------------------------------------ */
    72 body { background: #FFF;margin: 0; padding: 0; text-align: center;      width: 100%;    height: 100%; }
    73 .ombre {background:transparent url(img/background.png) repeat-y top center;width:980px;margin:0 auto;padding:0;}
     72body { background: #FFF;margin: 0; padding: 0; text-align: center;width: 100%; min-width:640px; height: 100%;}
     73.ombre {/*background:transparent url(img/background.png) repeat-y top center;*//*width:980px;*/
     74        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.6);
     75        -webkit-box-shadow: 0px 0px 10px 0px  rgba(50, 50, 50, 0.6);
     76        box-shadow: 0px 0px 10px 0px  rgba(50, 50, 50, 0.6);
     77        /* Alas, box-shadow is not fully supported by IE < 9 */
     78        margin:0 auto;padding:0; max-width:965px;
     79}
     80#topnav-wrapper .ombre {
     81        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.8);
     82        -webkit-box-shadow: 0px 0px 10px 0px  rgba(50, 50, 50, 0.8);
     83        box-shadow: 0px 0px 10px 0px  rgb(30, 30, 30);
     84        /* Alas, box-shadow is not fully supported by IE < 9 */
     85}
    7486
    7587#page { position: relative; width: 100%; margin: 0; padding-top: 40px; text-align: center; background: #FFF; }
     
    7890#entete { background: #83d3dc url(img/bg-top.png) repeat-x bottom left; margin: 0 auto; padding-top: 0px; border-bottom: 1px solid #333; }
    7991
    80 #top {width:962px;margin-left:auto;margin-right:auto;text-align:left;}
     92#top {margin-left:auto;margin-right:auto;text-align:left;}
    8193#entetelogos {margin:0 auto;position:relative;padding:0 20px;}
    8294#top a img.spip_logos { float:left; line-height: 1em; }
     
    125137
    126138#topnav-wrapper{clear:left;margin:0 auto;background:#414040;}
    127 #topnav {width:962px;margin:0 auto;text-align:left;}
     139#topnav {margin:0 auto;text-align:left;}
    128140
    129141#topnav ul {clear:left;list-style:none;margin:0 20px;padding:0;}
     
    138150
    139151
    140 #body {width:962px;text-align:left;margin:0 auto;background: #FFF url(img/bg-nav.png) repeat-y top right;}
     152#body {text-align:left;margin:0 auto;background: #FFF url(img/bg-nav.png) repeat-y top right;}
    141153.page_sommaire #body {background: #FFF url(img/bg-right.png) repeat-y top right; }
    142154/*.page_auteurs #body {background: #FFF url(img/bg-nav.png) repeat-y top right; }*/
    143155
    144156#conteneur { float: left;width: 100%; margin:0;  }
    145 #contenu { margin:0; margin-right:470px;margin-left:20px;margin-top: 1em;}
     157#contenu { margin:0; margin-right:470px;margin-left:20px;margin-top: 1em; overflow:hidden;}
    146158.page_auteurs #contenu { margin-right: 250px; }
    147159
     
    157169.page_auteurs #extra {display:none;}
    158170
    159 #more {width:962px;text-align:left;margin:0 auto;background: #e1f0f1;display:none;}
     171#more {text-align:left;margin:0 auto;background: #e1f0f1;display:none;}
    160172.page_article #more {display:block; overflow:hidden;position:relative;}
    161173
     
    610622div#page, div#conteneur, div#navigation, div#extra { width: auto; }
    611623}*/
     624
     625@media (max-width:840px) {
     626        #body { background:#FFF; }
     627        #conteneur { width:67%; }
     628        #contenu { width:auto; margin-right:0; }
     629        #extra, #navigation { float:right; width:28%; margin:0; background:#e1f0f1; }
     630        #extra { background:#fff; }
     631        /* dans le pied */
     632        #articles-actifs li { width:50%; float:left; }
     633        #articles-actifs li .box,
     634        #articles-actifs li .resume { height:auto; }
     635}
     636/* pour aller sous 640px de large il faudrait prendre en charge aussi les forum/thread/etc... en plus de cette proposition (mettre valeur 320px par exemple au min-width de body) : */
     637/*@media (max-width:639px) {
     638        #conteneur { width:100%; }
     639        #contenu { margin:1em 20px 0; }
     640        #extra, #navigation { width:49%; margin:3em 0 0; }
     641        #extra { float:left; border-top:1px dotted #eee; padding-top:0.5em; }
     642        #navigation {float:right; }
     643        #more #tout_afficher { top:auto; left:20px; position:relative; }
     644        #more .comment-form { padding:30px 20px; }
     645        #more .formulaire_forum form { padding:10px; }
     646        #more .formulaire_forum fieldset.qui { float:none; margin:0; }
     647        #articles-actifs li { width:100%; }
     648}*/
Note: See TracChangeset for help on using the changeset viewer.