Jump to content

gekas

Newbie
  • Posts

    8
  • Joined

  • Last visited

gekas's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Да, фейковая картинка сработала. Спасибо большое zenw, SelenIT
  2. Здравствуйте! Есть блок, в котором находится фоновая картинка(фоновую картинку вставил с помощью img, так как надо, что бы высота блока регулировалась по её пропорциям, если можно это сделать через backgound - буду ооочень благодарен, когда поделитесь методом, как это делается). Картинка спозиционирована relative и z-index: 1; Так же в блоке есть множество элементов с классом .m-pointer, которые принимают position:absolute, z-index:999. Проблема в работе псведокласса hover в ie8. Элементы .m-pointer визуально находятся сверху над главной фоновой картинкой, НО hover в ie8 не работает. Подскажите, как решить эту проблему.. Бьюсь уже несколько часов. .............. <img src="img/house.jpg" class="main-img" alt="main"> <span class="m-pointer p1" id="p1"></span> <div class="m-pointer p2" id="p2"></div> <div class="m-pointer p3" id="p3"></div> <div class="m-pointer p4" id="p4"></div> <div class="m-pointer p5" id="p5"></div> <div class="m-pointer p6" id="p6"></div> <div class="m-pointer p7" id="p7"></div> <div class="m-pointer p8" id="p8"></div> <div class="m-pointer p9" id="p9"></div>.......................main-img{ position: relative; display: block; width: 100%;z-index: 1;}.m-pointer{ position: absolute; cursor: pointer; width: 43px; height: 53px; z-index: 999; outline: 2px solid red;}.m-pointer:hover{ outline: 5px solid grey;}Сам пример: _http://gekas.e3w.ru/gidrosbor/
  3. Пробовал - не работает. Когда поднимаем через z-index .m-pointer и добавляем ему outline, то видим, что m-pointer находится визуально уровнем выше, НО если прописать .m-pointer:hover{ outline: 5px solid grey;}В ie8 опять таки ничего не происходит. У меня скрипт прописан с использованием события mouseover для .m-pointer, который тоже не работает в ie8-9. Не могу определить причину. При чем если картинку .main-img сделать в пол ширины(что бы не все .m-pointer ы были над ней), то m-pointer ы, под которыми нет картинки - откликаются на наведение нормально
  4. В ie8-9 Элементы с классом m-pointer находятся уровнем ниже main-img. Z-index не помогает при том, что элементы позиционированные. ...... <div class="m-pointer p1" id="p1"></div> <div class="m-pointer p2" id="p2"></div> <div class="m-pointer p3" id="p3"></div> <div class="m-pointer p4" id="p4"></div> <div class="m-pointer p5" id="p5"></div> <div class="m-pointer p6" id="p6"></div> <div class="m-pointer p7" id="p7"></div> <div class="m-pointer p8" id="p8"></div> <div class="m-pointer p9" id="p9"></div> <img src="img/house.jpg" class="main-img">........ .content{ position: relative;} .main-img{ display: block; width: 100%;} .m-pointer{ position: absolute; cursor: pointer; width: 43px; height: 53px;} Демо: gekas. e3w. ru /gidrosbor/ Как решить проблему?
  5. Каким образом переводят цвет из формата rgb, в следующий: Код CSS 1 2 background: rgba(255, 255, 255, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); Подозреваю, что во втором случае цвет задан в hex. Где указывается прозрачность? И в целом каким образом переводится? Как, например, перевести: Код CSS 1 background: rgba(37,108,178,0.8);
  6. Стоит задача: сверстать модуль "Отели" таким образом, как показано на изображении. Требования к верстке: 1) все блоки имеют равную высоту (определяется по самому высокому блоку) 2) при ширине окна > 1260 должно отображатся 4 блока на одном уровне, при < 1260 - три. Испробовал много различных подходов, и остановился-таки на таблицах.Но теперь возникла следующая проблема: таблица имеет специфику, что все ячейки адаптируются на ширину 100% и не получается выполнить перенос (например, задав 50% ширину каждому блоку) блоки адаптируются под ширину внешнего контейнера (display: table). Возможно ли исправить эту проблему в таблицах или следует использовать другой метод? <main id="mainO"><div> <img src="images/img1.png"> <p> <a href="#">Локейшн на Адмиралтейском</a> <span>Санкт-Петербург</span> </p> </div> <div> <img src="images/img2.png"> <p> <a href="#">Бест Вестерн Премьер МОНА Бутик</a> <span>Шерементьево</span> </p> </div> <div> <img src="images/img3.png"> <p> <a href="#">Приморье Spa</a> <span>Геленджик</span> </p> </div> <div> <img src="images/img1.png"> <p> <a href="#">Локейшн на Адмиралтейском</a> <span>Санкт-Петербург</span> </p> </div> </main>#mainO { display: table; table-layout:fixed; width: 100%; border-spacing: 20px; background: #ccc;}#mainO > div{ display: table-cell; background: rgb(89, 89, 89); width:50%; word-break: break-all;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy