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

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

<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/

Спасибо !!

источник

2013-12-03 Natalia Molinero Mingorance

Прежде всего пойти исправить ваш HTML - добавление декларации DOCTYPE является первым шагом получать аналогичные результаты в разных браузерах (и не полагаться на механизм коррекции ошибок, что, скорее всего, приведет к разным результатам). http://validator.w3.org/check?uri=http://www.hopesheffield.org/ – CBroe

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

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

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

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

источник

2013-12-03 10:58:39 Bobby5193

спасибо, хотя я думаю, что веб-сайт, который вы видели, был старой версией, так как у новой проблемы были проблемы! :) –

Ну, тогда вы можете опубликовать ссылку на новую версию, и я постараюсь помочь :) – Bobby5193

да, теперь новая версия загружена! :) Я думаю, что теперь работает правильно во всех браузерах, но в iPad выглядит странно, когда он находится в вертикальном положении, так как нижнее изображение падает, а между тремя и тремя - белое пространство. благодаря!!! –

изменить 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

источник

2013-12-03 11:11:29

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

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

ответ

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