Jquery Mobile: en-Tête Personnalisé w/ image de fond + barre de navigation

Mal mal avec cela toute la journée et j'ai le sentiment que quelqu'un avec plus de connaissances sur le sujet pourrait me faire gagner beaucoup de chagrin...

J'ai créé un site web à l'aide de Jquery Mobile et je veux utiliser une image personnalisée/le logo de l'en-tête standard sur toutes mes pages. Ce qui le rend légèrement plus compliqué, c'est que je suis aussi à l'aide d'une barre de navigation juste sous l'en-tête personnalisé/image pour la navigation. Voir l'image ci-dessous pour de quoi je parle:

http://postimage.org/image/ywh1wajjr/

Voici donc où j'en suis en cours d'exécution dans des questions... La mise à l'échelle de l'image personnalisée/en-tête est de me donner des cauchemars. À une certaine résolution (e.g le 480x800 preset dans Dreamweaver) tout semble parfait. Cependant, je commence à rencontrer des problèmes lorsque la résolution augmente:

Tout d'abord, la hauteur de l'image ne cesse de s'agrandir, rendant l'ensemble de l'en-tête (image et de la barre de navigation) beaucoup plus grand que je le veux. Deuxièmement, si vous utilisez une très haute résolution d'affichage qui dépasse la largeur totale de l'image, l'image s'arrête juste à sa largeur maximale, tandis que la barre de navigation (et le reste de la page) continue à augmenter à 100% de la largeur de la page - qui, évidemment, a l'air très bizarre.

Je suis en utilisant les fichiers suivants/installation:

jquery-1.8.2.min.js, jquery.mobile.structure-1.2.0.css, jquery.mobile.thème-1.2.0.css, jquery-1.8.2.min.js, jquery.mobile-1.2.0.js et Dreamweaver cs6.

J'ai essayé un million de différentes variations de la CSS dans les fichiers ci-dessus avec le code html dans la page avec pas de chance. J'ai le sentiment que sa va impliquer des requêtes de média, avec 3 ou 4 versions différentes de l'image, mais malgré tous mes efforts, je havnt été en mesure de trouver la meilleure façon de le faire.

Mon scénario idéal - liés image de fond + barre de navigation combo (ou quelque chose de similaire) qui fonctionne bien sur tous les appareils mobiles populaires dans les deux modes portrait et paysage.

Tout conseil serait apprécié...

Pourriez-vous lien de l'image du logo?
Assurez-vous. Il devrait y avoir fait que dans le message d'origine:
imageshack.us/g/521/manutdheaderlogotablet.jpg 3 tailles différentes/les variations du logo dans le lien. Laissez-moi savoir si vous avez besoin de rien d'autre. Merci.
Toute chance vous pourriez diviser le logo? Exemple serait d'utiliser seulement la crête: albionroad.com/images/stories/logos/... et ensuite ajouter des couleurs de fond et de texte

OriginalL'auteur user1797173 | 2012-11-03

Ce n'est pas à 100%, mais nous espérons que cela vous donne une idée de ce que CSS peut faire, juste en utilisant le logo de l'image et non le fond:

Jquery Mobile: en-Tête Personnalisé w/image de fond + barre de navigation

et puis, à l'aide de CSS pour rendre le haut et le bas des couches

Exemple:

http://jsfiddle.net/PMhXe/

CSS:

.bgimg {
    background-image: url(http://dummyimage.com/5x5/a80c10/ffffff.png), url(http://dummyimage.com/5x5/a80c10/ffffff.png);
    background-repeat:repeat-x;
    background-position:100% 120px, 100% -120px;
    background-size:100% 180px;
}
.logo-font {
    font-size:x-large;
    font-weight:bold;
}

HTML:

<div data-role="page" class="type-home">
    <div data-role="header" class="bgimg">
        <h1><img src="http://www.albionroad.com/images/stories/logos/manchester-united-logo-1.png" alt="logo" /><br /><div class="logo-font">MANCHESTER UNITED<br />&lt;&nbsp;&middot;&nbsp;&gt;</div></h1> 
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
</div>

OriginalL'auteur Phill Pafford

Vous avez quelque chose comme ça pour votre jquery mobile application en-tête, Où votre image de logo sera afficher:

<div data-id="header" data-position="fixed" data-theme="c" data-role="header" role="banner" class="header-manU ui-header ui-bar-c ui-header-fixed slidedown">
  <h1 class="manU-logo ui-title" role="heading" aria-level="1">
    <a href="#" class="ui-link">
      <img src="css/themes/default/images/logo_header.png">
    </a>
  </h1>
</div>

il suffit d'appliquer ce css:

.ui-mobile .header-manU a img {
  width: 100%;
 }

Espère que cette aide

OriginalL'auteur wandarkaf

Vous devez vous connecter pour publier un commentaire.