Изображение в заголовке div кнопки сброса (мобильный jquery) - PullRequest
Новая
       0

Изображение в заголовке div кнопки сброса (мобильный jquery)

0 голосов
/ 20 июля 2011

решено - не было ссылки на самый последний выпуск js-файлов jQuery. Глупый я!

Я знаю, что вызывает эту проблему, но я не знаю, как ее исправить или почему она это делает.

На моем мобильном сайте m.incrediblebats.com У меня есть изображение в шапке. Проблема заключается в том, что когда я использую собственный браузер Android (еще не пробовал в других приложениях браузера), кнопка, к которой я прикасаюсь, переходит на нужную страницу, но выделение, которое должно быть вокруг кнопки при ее нажатии, находится на кнопка под ним.

Вот методы, которые я пробовал с тем же результатом:

  • img в заголовке div
  • div упакованный заголовок img div
  • div со стилями background-img и height, примененными в файле css

Для последнего метода, если я установлю высоту, которая будет меньше размера моего изображения, например 10px, у меня нет этой проблемы.

Я думаю, что заголовок div может быть только таким большим? Может быть, ему не нравится, когда высота превышает определенный размер?

В любом случае, вот мой текущий код раздела тела. 

<body>
    <div data-role="page" data-theme="a">
        <div data-role="header">
            <img src="images/header.jpg" alt="Incredible Bats" />
        </div>
        <div data-role="content"> <a href="about.html" data-role="button" data-theme="a" data-transition="fade">About Us</a>
 <a href="batshows.html" data-role="button" data-theme="a">Live Bat Shows</a>
 <a href="ourbats.html" data-role="button" data-theme="a">Our Bats</a>
 <a href="contact.html" data-role="button" data-theme="a">Contact Information</a>   
            <img src="images/bg.gif" id="bg-img" alt="bats emerging" />
        </div>
        <div class="footer">
            <p>Copyright © 1998-2011 AFTAGC | <a href="www.incrediblebats.com/">Full Site</a>
            </p>
        </div>
    </div>
</body>

1 Ответ

0 голосов
/ 20 июля 2011

IMO Я бы не стал загружать изображение, если вы можете сделать это с текстом для мобильного сайта. Это всего лишь пример того, что вы могли бы сделать

Live Пример:

HTML: 

<div id="image">
    <img src="http://m.incrediblebats.com/images/header.jpg" alt="Incredible Bats"/>
</div>
<br />
<div id="css">
    <div id="ib">INCREDIBLE BATS</div>
</div>

CSS: 

#ib {
    font-size:30px;
    font-weight:bolder;
    font-family:"Times New Roman",Georgia,Serif;
    font:arial, helvetica;
    color: #7b8ec9;
    background-color:#000;
    text-align: center;

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); 
}
...