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)
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Reprise du message précédent
Ta une erreur dans tes CSS.#navigation{
display:none;
}
}
A remplacé par:
#navigation{
display:none;
}
display:none;
}
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; } #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; } }
Version Phpboost : V4
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 ^^
Voilà ^^
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à ^^
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie