TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 107655 visiteurs

 1 visiteur en ligne

  • Fichier tabstyle.css
    • Spécifications pour tablettes et smartphones
  • Résolution horizontale de moins de 980px
    • @media screen and (max-width: 980px) {
          
      body { margin: 0;padding:0; }
      fond du site
      div#page { width: 100%; } largeur de la page
      div.banner { display: none; } bannières enlevées
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } position du logo
      div.quote, div.quote span.labelcitadiv.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats  { display: none; } liens ADMIN et STATS enlevés
      .ariane { font: 0.7em arial, helvetica, sans-serif;} taille des caractères du fil d'Ariane
      #footer { font: 0.5em arial, helvetica, sans-serif;} taille des caractères dans le pied de page
      .timer { display: none; } temps de chargement des pages enlevé

  • Résolution horizontale de moins de 650px
    • @media screen and (max-width: 650px) and (device-pixel-ratio: 1.5){
          
       body { margin: 0;padding: 0; }
      fond du site
      div#page { width: 100%; }   largeur de la page
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } position du logo
      div.banner { display: none; } bannières enlevées
      #TopBoxes { margin: 0; } marges des boîtes de l'entête
      #LeftBoxes, #RightBoxes { display:none; } boîtes latérales enlevées
      #MainContent { margin:0; } Premier onglet quand il est fermé
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download { display: none; } liens ADMIN, STATS, FAQ et TÉLÉCHARGEMENTS enlevés
      .ariane { font: 0.7em arial, helvetica, sans-serif; } taille des caractères du fil d'Ariane
      div.titre { font: 0.9em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif;} taille des caractères du pied-de-page
      .timer { display: none; } temps de chargement des pages enlevé

  • Ordinateurs : résolution horizontale de moins de 555px - Smartphones : largeur paysage de 480px
    • @media screen and (max-width: 555px), screen and (max-device-width: 480px) and (device-pixel-ratio: 2) {
          
       body { margin: 0;padding: 0; }
      fond du site
      #header { display:none; } header enlevé
      .boxprint { display:none; } boîte d'impression enlevée
      div#page { width: 98%;padding: 0; } largeur de la page
      div#page { width: 98%;padding: 0; } confused pourquoi 2 fois ?
      .T0row3 { display: none; } 3ème ligne de l'entête enlevée
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } largeur du logo
      div.banner { display: none; } bannière enlevée
      #TopBoxes { margin: 0; } marges de l'entête
      #LeftBoxes, #RightBoxes { display:none; } colonnes latérales enlevées
      #BlogLeftBoxes, #BlogRightBoxes { display:none; } colonnes latérales du blog enlevées
      #MainContent { margin:0; } marges du corps principal
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download { display: none; } ADMIN, STATS, FAQ et TÉLÉCHARGEMENTS enlevés
      .ariane { display: none; } fil d'Ariane enlevé
      div.titre { font: bold 1em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      div.titrebox, div.tblbox  { display: none; } boîtes latérales enlevées
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif; } taille des caractères du pied de page
      .timer { display: none; } temps de chargement de page enlevé

  • Appareils avec moins de 320px de large
    • @media screen and (max-width: 320px) and (device-pixel-ratio: 3) {
          
       body { margin: 0;padding: 0; }
      fond du site
      #header { display:none; } header enlevé
      .boxprint { display:none; } boîte d'impression enlevée
      div#page { width: 94%;padding: 0; } largeur de la page
      .T0row2 { display: none; } 2ème ligne de l'entête enlevée
      .T0row3 { display: none; } 3ème ligne de l'entête enlevée
      div.logo img{ text-align: left;max-width: 50px;margin-right: 50px; } taille du logo
      div.banner { display: none; } bannières enlevées
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      #TopBoxes { margin: 0;border-radius: 0; } marges de l'entête
      #LeftBoxes, #RightBoxes { display:none; } colonnes latérales enlevées
      #MainContent { margin:0; } marges du corps principal
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download, div.menuIcons ul li.menu_forum  { display: none; } liens ADMIN, STATS, FAQ, TÉLÉCHARGEMENTS et FORUM enlevés
      .boxnet { margin-top: 10px; } marges boîte réseaux sociaux
      .ariane { display: none; } fil d'Ariane enlevé
      div.titre { font: bold 1em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      div.titrebox, div.tblbox  { display: none; } boîtes latérales enlevées
      #BlogLeftBoxes, #BlogRightBoxes { display:none; } colonnes du blog enlevées
      .top img { display: none; } image du haut du site enlevée
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif; } taille des caractères du pied-de-page
      #footer img { width: 50%;height: auto;max-width:320px; } taille de l'image du pied-de-page
      .timer { display: none; } temps de chargement des pages enlevé

Date de création : 28/06/2013 12:38
Page lue 3019 fois


Vous êtes ici :   Accueil » tabstyle.css