2013-12-01 3 views
-2

У меня возникли проблемы с сноске моего сайта: http://ow.ly/rko2wiPhone Div Фоновое изображение Центрирование?

Как вы можете видеть на Iphone (в Safari) футер изображение не отображается правильно и охватывает ширину сайта.

Это код сноске:

<div class="footer"> 
<div style="width:1100px;height:118px;margin:auto;"> 
    <div id="mc_embed_signup"> 
     <form action="http://SaveWithPride.us7.list-manage.com/subscribe/post?u=0beccc5a2d913b0527a748edc&amp;id=cb6e398bc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
      <input type="email" value="" name="EMAIL" class="email footer-field" id="mce-EMAIL" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" required> 
      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button footer-submit"></div> 
     </form> 
    </div> 
    <div style="width:334px;height:118px;float:right;background:transparent;"><div class="socialtext">save with pride, socially:</div><div class="twitter"></div><div class="facebook"></div><div class="footertext">© 2013 SaveWithPride.com&nbsp&nbspAll Rights Reserved.&nbsp&nbsp<a href="adamdworak.com">Design by A/D</a></div></div> 
</div> 

И CSS:

.footer { 
    width:100%; 
    height:118px; 
    background: #000000 url(../images/footer.png) top center !important; 
    margin:70px auto 0 auto; 
} 

Кто-нибудь знает, что я здесь делаю неправильно? Фон нижнего колонтитула (как он теперь появляется) не растягивается до края броузера на iphone и кажется его не центрированным. Я пытаюсь получить его в центре и на 100% ширину, как это показано на моем компьютере.

+0

Downvote для неприемлемого языка, быть гражданским. – crafter

ответ

0

Итак, элемент нижнего колонтитула не так широк, как экран? Попробуйте добавить это:

.footer { 
    background-size: 100% 100%; /* stretches background */ 
} 
+0

Почувствовав, что получилось, удар пришло, но он по-прежнему немного по правой стороне на iphone. Есть идеи? – user3053693

+0

Попробуйте сделать нижний колонтитул черным, чтобы убедиться, что нижний колонтитул на самом деле составляет 100% ширины. Это также коротко на правой стороне моего iPad. Является ли нижний колонтитул другим элементом, который мог бы держать его коротким? – Bondanr

0

Попробуйте извлекать ширину от .footer CSS

Кроме того, если вы хотите, чтобы соответствовать страницы в пределах экрана iPhone изменить ширину .footer ребенка дел до 940px, как показано ниже

<div class="footer"> 
    <div style="width:940px;height:118px;margin:auto;"> 

Я говорю об изменении ширины, потому что .footer установлен на 100% ширину, которая будет эквивалентна ширине экрана iphone, поэтому изображение будет растягиваться только до ширины экрана. Проблема в том, что дочерний div может иметь ширину больше ширины экрана iPhone, которая потребует от пользователя прокрутки дальше вправо и является причиной, по которой изображение не растягивается.

Смежные вопросы