положение изображений в разных браузерах, html

0

Я хочу поместить изображение в два цвета в качестве фона, а затем 3 изображения над этим фоном. Это код, который я сделал:

<div  style="position: fixed; z-index:100" height="5px"><img  src="http://i44.tinypic.com/257g1nl.jpg" border="0" style="position: fixed; width:100%" ></div>

<div  style="position: fixed; z-index:500"><a href="http://www.hopesheffield.org/hope"><img src="http://i40.tinypic.com/70b4wk.jpg" width="435px" border="0" style="position:fixed; left:1050px;top:120px" ></a></div>

<div style="position: fixed; z-index:500"><img src="http://i42.tinypic.com/11k84mu.jpg"   border="0" width:"435px" style="position:fixed; left:550px;top:120px"> </div> 

<div style="position: fixed; z-index:500"><img src="http://i43.tinypic.com/2sax8nt.png" border="0" width:"535px" style="position:fixed; left:650px; top:550px"></div> 



<head>{{ head_content }}   

<style type="text/css">
  html {
  overflow:hidden;
  }
 </style>

</head>

Кроме того, я не хочу прокручивать. В момент работы он работает в Internet Explorer, но когда я открываю страницу из Safari, изображения над фоном сдвигаются. Есть идеи?

Это веб-страница: http://www.hopesheffield.org/

Благодарю!!

  • 0
    Прежде всего исправьте ваш HTML - добавление объявления Doctype является первым шагом к получению похожих результатов в разных браузерах (и не полагаясь на их механизм исправления ошибок, который, скорее всего, приведет к разным результатам). validator.w3.org/check?uri=http://www.hopesheffield.org
Теги:
background
image

2 ответа

1

Попробуйте позиционировать с относительными значениями для свойства "left" вместо количества пикселей.

Как и в: left:25%; и left:60%; для ваших изображений.

Для более гибкого использования на мобильных устройствах старайтесь не устанавливать фиксированный размер для изображений, а скорее применяйте те же относительные значения в атрибутах css, а не html.

Также, возможно, вам придется подумать об использовании запросов css media, если ваша проблема не исчезнет.

Поделиться
  • 0
    спасибо, хотя я думаю, что сайт, который вы видели, был старой версией, так как у новой были некоторые проблемы! :)
  • 0
    Ну тогда вы можете опубликовать ссылку на новую версию, и я постараюсь помочь :)
Показать ещё 2 комментария
0

измените свой HTML следующим образом:

<div class="cover">
    <img  src="http://i44.tinypic.com/257g1nl.jpg"/>
</div>

<div class="right">
<a href="http://www.hopesheffield.org/hope">
    <img src="http://i40.tinypic.com/70b4wk.jpg" width="435px"/></a>
</div>

<div class="left">
<img src="http://i42.tinypic.com/11k84mu.jpg" />
</div>

<div class="bottom">
<img src="http://i43.tinypic.com/2sax8nt.png" />
</div>

и вот CSS:

.cover{
    position:fixed;
    z-index:1;
    top:0;
    left:0;
}

.right{
    position:fixed;
    z-index:2;
    right:25%;
    margin-right:-217px;
    top:120px;
}
.left{
    position:fixed;
    z-index:2;
    left:25%;
    margin-left:-194px;
    top:120px;
}
.bottom{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-382px;
    z-index:2;
}

DEMO

Поделиться
  • 0
    Огромное спасибо!! Это было очень полезно! Единственное, что мне нужно было добавить, это style = "position: fixed; width: 100%" в теге фонового изображения. Теперь он выглядит хорошо в iPad, когда он находится в горизонтальном положении. Однако, когда я помещаю его по вертикали, последнее изображение падает, и между изображениями + фон и этим последним изображением появляется пробел ... есть какие-нибудь предложения, пожалуйста?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню