Текст поверх картинки

[Вадос Пёс]

 

Доброго времени суток.

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

Пробовал баловаться с 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;
}

 

Edited July 5, 2016 by Вадос Пёс

[Вадос Пёс]

Нашел решение, почитав повнимательнее о z-index.

классу mapandphone добавил 

	position:relative;
	z-index:999;

а классу logo добавил 

	z-index:998;

Как оказалось z-index не подходит для элементов static, который указывается у блоков по умолчанию.

[Джулия]

34 минуты назад, Вадос Пёс сказал:

 

Доброго времени суток.

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

Пробовал баловаться с 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;
}

 

перенесла ваш код,вставила картинку-логотип))

можно навести и выделить номер и адрес

http://codepen.io/JuliJulia/pen/XKgBOO

[Вадос Пёс]

7 минут назад, Джулия сказал:

перенесла ваш код,вставила картинку-логотип))

можно навести и выделить номер и адрес

http://codepen.io/JuliJulia/pen/XKgBOO

у вас картинка оказалась сзади меню (это кстати надо будет пофиксить))). Я хочу что бы лого было поверх темного фона, а класс mapandphone поверх лого.

[Vlad_P]

для картинки с прозрачным полем pointer-ivents:none; если не сильно заботитесь о старых браузерах