Easy-Design.Net forum




Archives Thèmes » Thèmes PHPBoost V3 - V4 Thème Mobile Theme qui s'adapte automatiquement sur tablettes smartphones et ordinateurs

samghami officielle Membre non connecté

EDN Curieux(se)

Rang

Avatar

Inscrit le : 22/02/2013 à 23h16

Messages: 36

Le 16/03/2013 à 11h21

Reprise du message précédent

Ta une erreur dans tes CSS.

#navigation{
display:none;
}
}


A remplacé par:
#navigation{
display:none;
}




Code CSS :
  1. @media (max-width: 859px) {
  2.     /* votre code ici, pour les écrans de taille < 859 px */
  3. div#links{
  4. display:none;
  5. }
  6. div#right_menu {
  7. display:none;
  8.     }
  9. #navigation{
  10. display:none;
  11. }
  12. #left_menu{
  13. display:none;
  14. }
  15. #sub_header{
  16. display:none;
  17. }
  18. #toph{
  19. display:none;
  20. }
  21. div#global {
  22. width:99%;
  23. max-width:859px;
  24.  margin:auto;
  25. }
  26. }
  27. @media (min-width: 860px) and (max-width: 999px) {
  28.     /* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */
  29. div#global {
  30. width:97%;
  31. max-width:999px;
  32.  margin:auto;
  33. }
  34. div#right_menu {
  35. display:none;
  36.     }
  37. ul.menu_link{ 
  38. top:145px;
  39. left:10px;
  40. position: absolute;
  41. }
  42. ul.menu_link li{
  43. display: inline;
  44. border-bottom:2px solid #353535;
  45.     -webkit-transition: border 1s ease-out;
  46.     -moz-transition: border 1s ease-out;
  47.     -o-transition: border 1s ease-out;
  48.     transition: border 1s ease-out;
  49. }
  50. ul.menu_link li a{
  51. height: 15px;
  52. }
  53. ul.menu_link li a.title{
  54. color:#cccccc;
  55. font-size:17px;
  56. font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
  57. text-decoration:none;
  58. font-weight: normal;
  59. }
  60.  ul.menu_link li a.title:hover{ 
  61. color:#FFFFFF;
  62. transition: color 0.3s ease-out;
  63.     -webkit-transition: color 0.3s ease-out;
  64.     -moz-transition: color 0.3s ease-out;
  65.     -o-transition: color 0.3s ease-out;
  66. }
  67.  ul.menu_link li.current,  ul.menu_link li.current:hover{ border-bottom:2px solid #8f0000; }
  68.  ul.menu_link li.current a{ color:#ebebeb; }
  69. ul.menu_link li:hover{ 
  70. border-bottom:2px solid #336397;
  71.     -webkit-transition: border 0.3s ease-out;
  72.     -moz-transition: border 0.3s ease-out;
  73.     -o-transition: border 0.3s ease-out;
  74.     transition: border 0.3s ease-out;
  75. }
  76. #sub_header{
  77. display:none;
  78. }
  79. }
  80. @media (min-width: 1000px) and (max-width: 1229px) {
  81.     /* votre code ici, pour les écrans de taille comprise entre 1000 et 1229 px */
  82. div#global {
  83. width:99%;
  84. max-width:100%;
  85.  margin:auto;
  86. }
  87. }
  88. @media (min-width: 1230px) and (max-width: 1399px) {
  89.     /* votre code ici, pour les écrans de taille supérieure à 1230 et inf a 1399 px */
  90. div#global {
  91. width:89%;
  92. max-width:90;
  93.  margin:auto;
  94. }
  95. }
  96. @media (min-width: 1400px) {
  97.     /* votre code ici, pour les écrans de taille supérieure à 1400 px */
  98. div#global {
  99. width:69%;
  100. max-width:70;
  101.  margin:auto;
  102. }
  103. }

Version Phpboost : V4
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 16/03/2013 à 11h49
Non les doubles crochet sont normaux.. c'est pour la prise en compte du @ media, mais il faut indenter correctement pour le voir quand on a pas la tête dans le code ^^

Code CSS :
 
@media (max-width: 859px) {
    /* votre code ici, pour les écrans de taille < 859 px */
    div#links{
    display:none;
    }
 
    div#right_menu {
    display:none;
    }
 
    #navigation{
    display:none;
    }
 
    #left_menu{
    display:none;
    }
 
    #sub_header{
    display:none;
    }
 
    #toph{
    display:none;
    }
 
    div#global {
    width:99%;
    max-width:859px;
    margin:auto;
    }
}
 
@media (min-width: 860px) and (max-width: 999px) {
/* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */
    div#global {
    width:97%;
    max-width:999px;
    margin:auto;
    }
 
    div#right_menu {
    display:none;
    }
 
    ul.menu_link{
    top:145px;
    left:10px;
    position: absolute;
    }
 
    ul.menu_link li{
    display: inline;
    border-bottom:2px solid #353535;
    -webkit-transition: border 1s ease-out;
    -moz-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    transition: border 1s ease-out;
    }
 
    ul.menu_link li a{
    height: 15px;
    }
 
    ul.menu_link li a.title{
    color:#cccccc;
    font-size:17px;
    font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
    text-decoration:none;
    font-weight: normal;
    }
 
    ul.menu_link li a.title:hover{
    color:#FFFFFF;
    transition: color 0.3s ease-out;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    }
 
    ul.menu_link li.current, ul.menu_link li.current:hover{ border-bottom:2px solid #8f0000; }
    ul.menu_link li.current a{ color:#ebebeb; }
    ul.menu_link li:hover{
    border-bottom:2px solid #336397;
    -webkit-transition: border 0.3s ease-out;
    -moz-transition: border 0.3s ease-out;
    -o-transition: border 0.3s ease-out;
    transition: border 0.3s ease-out;
    }
 
    div#sub_header{
    display:none;
    }
}
 
@media (min-width: 1000px) and (max-width: 1229px) {
/* votre code ici, pour les écrans de taille comprise entre 1000 et 1229 px */
div#global {
width:99%;
max-width:100%;
margin:auto;
}
}
 
@media (min-width: 1230px) and (max-width: 1399px) {
/* votre code ici, pour les écrans de taille supérieure à 1230 et inf a 1399 px */
div#global {
width:89%;
max-width:90;
margin:auto;
}
}
 
@media (min-width: 1400px) {
/* votre code ici, pour les écrans de taille supérieure à 1400 px */
    div#global {
    width:69%;
    max-width:70;
    margin:auto;
    }
}
 


Voilà ^^

swan_signature

Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie