En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION

BOÎTES

SERVICES

JQUERY

EN VRAC

EXEMPLES

En ce moment...

 123773 visiteurs

 3 visiteurs en ligne

tabstyle.css

  • 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 3643 fois
Précédent  
Prévisualiser... Prévisualiser...   Imprimer... Imprimer...

Vous êtes ici :   Accueil » tabstyle.css