Я пытаюсь расположить элемент списка поверх встроенного изображения, а не фонового изображения.
Я обнаружил, что при попытке использовать фоновое изображение оно не масштабируется в настольном браузере, как другие изображения, и это затрудняет его тестирование.
Само изображение представляет собой белое поле, в котором будут находиться несколько кнопок с флагами, и в данный момент список появляется под изображением, а не внутри него.
Раньше у меня почти было это, но я использовал absolute позиционирование в списке и проценты для значений top и left, и на некоторых устройствах это выглядело нормально, тогда как на других это был беспорядок, поэтому я просто ищет метод, который должен быть одинаковым на мобильных устройствах.
HTML
<div id="wrapper">
<div id="top_header"><img alt="top banner" src="/img/banner_home_page.png" /></div>
<div id="international">
<span id="flag-container">
<img src="../img/flag-home.png" />
<span class="flag_buttons_container">
<ul class="flag_buttons">
<li><a href="www.uk-site.co.uk"><img src='./img/buttons/flag_uk.png'/></a></li>
<li><a href="http://www.ie-site.ie"><img src='./img/buttons/flag_ie.png' /></a></li>
<li><a href="http://www.us-site.us" ><img src='./img/buttons/flag_us.png' /></a></li>
<li><a href="http://www.german-site.de" ><img src='./img/buttons/flag_de.png' /> </a></li>
</ul>
</span>
</span>
</div>
</div>
CSS
#international{float: left; width: 100%; height: auto; margin: 0px; padding: 10px 5px 10px 5px;}
#international img{width: 92%;}
#flag-container {
position: relative;
top: 5px;
left: 5px;
}
.flag_button_span {
position: absolute;
margin:0;
padding: 0px 0;
}
.flag_buttons li {
list-style-type: none;
position: relative;
display: block;
margin-left: 12%;
width: 85%;
overflow:auto;
}
.flag_buttons img {
float: left;
}
Размеры изображения
Размер изображения баннера 480 px x 108px
Фоновое изображение размером 400px x 456px
Каждая кнопка флага имеет размер 164px x 30 px, и их 7, я только что показал несколько разметок выше.
Я читал в Интернете, что для того, чтобы элемент был сверху изображения, он должен быть в промежутке, поэтому разметка такая, какая есть, но не стесняйтесь менять ее на то, что работает.
Любая помощь приветствуется.
Спасибо.