С позиционированием изображения CSS и разрешениями экрана, как я могу лучше расположить это изображение? - PullRequest
Новая
       11

С позиционированием изображения CSS и разрешениями экрана, как я могу лучше расположить это изображение?

0 голосов
/ 25 января 2012

У меня есть эффект наведения мыши, когда клиент наводит флаг, на изображении над ним появляется небольшая иконка своей страны и сообщение «Просмотр этого веб-сайта на английском языке» или «Regardez la website en francais» или что-то еще .

Я опробовал свою позицию CSS , используя пиксели и проценты, и все же, если вы используете разрешение экрана 1280 или 1900, изображение может быть слишком плохим. Вот как я хочу, чтобы это выглядело: 

                                                 picture should be here
                                   flag 1 flag2 flag3 flag4 flag5 flag6

Так что, когда они парят, картинка показывает. Treemonkey помог мне попасть туда сегодня раньше, и теперь мне просто нужно отключить CSS. В настоящее время мой CSS это: 

  .map{
  display:none;
  }
  a.flagbutton:hover .map{
  display:block;
  position:fixed;
  top:14%;
  right:20%;
  }

Если бы кто-нибудь мог дать какие-либо рекомендации относительно того, что я могу сделать, чтобы решить эту проблему с различными разрешениями экрана - если это возможно - я был бы очень признателен!

1 Ответ

1 голос
/ 25 января 2012

Вы можете использовать контейнер для всех полей, а другой - для ссылок флага. 

<div class="top_container">

    <div class='map_cont'>map</div>

    <div class='flags_cont'>
        <a href="#" class='flagbutton'>flag 1</a>
        <a href="#" class='flagbutton'>flag 2</a>
        <a href="#" class='flagbutton'>flag 3</a>
        <a href="#" class='flagbutton'>flag 4</a>
    </div>
</div>

Установите для поля верхнего контейнера значение auto, чтобы он сохранял расстояние с каждой стороны, а затем плавали оба элемента 'map_cont.'и контейнеры' flags_cont 'справа, так что они появляются в правой части экрана. 

.top_container { width:90%; margin:auto; }
.map_cont{ float:right; }
.flags_cont { clear:both; float:right }
a.flagbutton { margin-left:5px; }
...