Вадос Пёс
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Вадос Пёс
-
-
7 минут назад, Джулия сказал:
перенесла ваш код,вставила картинку-логотип))
можно навести и выделить номер и адрес
у вас картинка оказалась сзади меню (это кстати надо будет пофиксить))). Я хочу что бы лого было поверх темного фона, а класс mapandphone поверх лого.
-
Доброго времени суток.
Столкнулся с проблемой при верстке сайта ресторана. По центру расположен логотип ресторана и немного залезает на контейнер с адресом и номером телефона. Проблема в том что из-за логотипа нельзя навести и выделить номер или адрес, тк картинка прозрачным полем на них заходит.
Пробовал баловаться с z-index-ом, но ничего дельного не получилось.
html
Скрытый текст<div class="container header"> <img src="img/logo.png" class="logo" alt="Логотип гастробара Discovery"> </div> <div class="container main"> <div class="navigation"> <div class="mapandphone"><table><tr> <td>Большая пушкарская д.30<img src="img/mapico.png" alt=""></td> <td><img src="img/phoneico.png" alt="">904<span>22</span>89</td> </tr></table></div> <table class="content"><tr><td><ul> <a href="#"><li>что мы<br>предлагаем</li></a> <a href="#"><li>что у нас<br>происходит</li></a></ul></td><td><ul> <a href="#"><li>что о нас<br>говорят</li></a> <a href="#"><li>как до нас<br>добраться</li></a> </ul></td></tr></table> </div> <!-- остатки хеда --> </div>
css
Скрытый текст.header { background-image: url(img/mountain.jpg); padding-bottom:14%; } .content { padding: 5vw 10%; } .container { background-size:100%; } .logo { position:absolute; width:40%; left:30%; } .main { background-image:url(img/boards.png); color:#FFFFFF; position:relative; } .navigation { background-color:rgba(0, 0, 0, 0.6); } .mapandphone { font-size:2.5vw; } .mapandphone a{ font-weight:normal; text-decoration:none; } .mapandphone img { width:8%; vertical-align: middle; } .mapandphone span { padding-left:2%; padding-right:2%; } .navigation table { padding-top:0; padding-bottom:0; width:100%; border:none; } .navigation td { margin:0; width:50%; } .navigation td:nth-of-type(1) { text-align:right; padding-right:7%; } .navigation td:nth-of-type(2) { text-align:left; padding-left:7%; } .navigation ul { list-style: none; margin:0; padding:0; text-align:justify; line-height: 0; } .navigation ul:after { content: ""; display: inline-block; width: 100%; } .main li { display: inline-block; text-align:center; padding:1vw 5%; line-height: normal; } .main li:hover { background-color:rgba(255, 255, 255, 0.1); } .main li:active { top: .2em; left: .2em; } .main a { font-size:2vw; color:#FFFFFF; }
-
18 часов назад, by chris сказал:
Две картинки никак не могут быть легче , чем одна.
Спасибо, ничего не остается кроме как согласиться)
- 1
-
В 27.06.2016 в 20:38, by chris сказал:
Зачем аналоги плохо качества вне видимости экрана? Пусть картинки подгружаются при прокрутке. Для главной картинки вроде как прелоадер хорошая практика. Подгружать два разных изображения, плохую и хорошую - лишнее.
По гугл аналитикс большинство моих посетителей - мобильные приложения, хочу максимально облегчить сайт.
-
Здравствуйте,
Заранее извиняюсь, если тема обсуждалась, или слишком глупа.
Я создаю сайт лендинг пейдж, где много фоновых картинок-фотографий. Боюсь что сайт будет много весить и грузиться долго. В интернете нашел скрипт, в котором картинки заменяются на аналоги плохого качества если находятся вне видимости экрана. Но у скрипта два минуса: 1) он не предназначен для фоновых изображений, тк те подгружаются из css, 2) не работает для изображений на первой странице, тк скрипт начинает работать только при скролинге.
С первой проблемой думаю можно справиться если картинки делать не фоном, а при помощи img position.
И собственно мой вопрос по второй проблеме: как сделать что бы сначала загрузилась "плохая" картинка, а потом после загрузки нормальной, она заменяла "плохую"?
Ну и второй вопрос: Ваше мнение насколько этот способ правильный? Может Вы можете посоветовать варианты получше?
Текст поверх картинки
in HTML Coding
Posted
Нашел решение, почитав повнимательнее о z-index.
классу mapandphone добавил
а классу logo добавил
z-index:998;
Как оказалось z-index не подходит для элементов static, который указывается у блоков по умолчанию.