thème lorem, version mobile

samghami Membre non connecté

Booster Bazooka

Le 16/03/2013 à 11h41

Bonjour à toutes et à tous.
Je suis actuellement en train de créer un site pour mobile. J'ai donc refais les CSS de mon thème principal qui est "lorem".

J'ai utilisé la méthode via "Media Query".
J'ai donc essayer sous plusieurs résolution.

-Sur mon ordinateur avec une résolution de 1280 par 800: Fonctionnement niquel
-Sur l'ordinateur de mon frère ayant une résolution supérieur a 1400(de large): Fonctionnement niquel
-Sur tablette "Acer Iconia Tab A210" 1280 x 800(en mode paysage) : Fonctionnement niquel
Toujours sur la tablette mais en mode portrait cette fois(résolution plus basse): Fonctionnement niquel

-Sur mon iPhone 4S: Fonctionnement a problème.

Je m'explique, j'ai créer un menu visible que avec une résolution inférieur à <859px, car le menu normal été bien trop gros pour être visible dans cette résolution. Mais le menue s'affiche trés mal. "Je vais joindre une screen shot avec mon iphone"

Voici le code de mon menu:
design.css

Code CSS :

#memumobile{
display:inherit;
width:99%;
text-align:center;
color:#FFFFFF;
}

header.tpl

Code TPL :

<div id="memumobile" align="center" style="width:99%">
  <p>
    <div align="center" style="background-color:#009900; width:50%; border-radius:5px; font-size:16px;"><img 
 
src="http://samghami.fr.nf/templates/lorem/images/admin/admin_mini.png" class="valign_middle" alt="" /> <a 
 
href="{PATH_TO_ROOT}/">Accueil</a>&nbsp;&nbsp;      <img src="http://samghami.fr.nf/articles/articles_mini.png" 
 
class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/articles/">Tutoriel</a>&nbsp;&nbsp;<img 
 
src="http://samghami.fr.nf/contact/contact_mini.png" class="valign_middle" alt="" /> <a 
 
href="{PATH_TO_ROOT}/contact">Contact</a>&nbsp;&nbsp;<img src="http://samghami.fr.nf/forum/forum_mini.png" 
 
class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/forum/">Forum</a> </div><p>
 
  </div>