Правильное постоянное расположение текста поверх картинки (пункты меню, bootstrap)

@HellNHeaven · Регистрация: 26.11.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте! Товарищи, подскажите, пожалуйста, как будет более разумно с точки зрения кроссбраузерности и адаптивности сверстать меню, которое состоит из картинки и пунктов поверх неё.
Два моих варианта прилагаются. Второй как-то при уменьшении экрана выглядит стабильнее, вплоть до 768px, без @media всё равно не обойтись, но всё же... Буду признателен за ваши советы!

@mrBobrillo · 30.11.2015, 10:31

Вот смотрите как можете реализовать, это один конечно из вариантов. На каждую из своих ячеек кидаете фоном 1 медаль.
Но чтоб поставить на фон разные медали, нужно задать списку разные классы и на отдельный класс делать свой background

HTML5

<div class="row">
    <div class="menu">
        <ul>
            <li class="medal"><a href="#">О тренере</a></li>
            <li class="medal1"><a href="#">Ученики</a></li>
            <li class="meda2l"><a href="#">Зал</a></li>
            <li class="meda3l"><a href="#">Медиа</a></li>
        </ul>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
 
.row {
    max-width: 780px;
    margin: 0 auto;
}
 
.menu ul {
    width: 100%;
    list-style: none;
    display: table;
    padding: 0;
    margin: 0;
}
 
.menu ul li {
    width: 25%;
    display: table-cell;
    vertical-align: top;
    text-align: center;
}
 
.menu ul li a {
    padding: 4rem 1rem 1rem 1rem;
    display: block;
    border: 1px red solid;
    text-decoration: none;
}

@HellNHeaven · 30.11.2015, 15:54 **[ТС]**

Попробовал таким образом, получилось вот что.
Полагаю нужно внутри каждого элемента меню создать блок, отцентрировать его по горизонтали, прижать к нижней части и туда вписывать текст.

HTML5

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="boxer.ico">
 
    <title>Boxer</title>
 
    <!-- Стиль Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- Стиль страницы -->
    <link href="style.css" rel="stylesheet">
  </head>
 
  <body>
 
    <div class="container">
 
      <!-- Верхний блок-->
      <div class="Navbar.html navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="row">
            
 
            <div class="col-lg-6">
                
                <!-- Меню -->
 
    <div class="menu col-lg-6">
        <ul>
            <li class="medal1"><a href="#">О тренере</a></li>
            <li class="medal2"><a href="#">Ученики</a></li>
            <li class="medal3"><a href="#">Зал</a></li>
            <li class="medal4"><a href="#">Медиа</a></li>
        </ul>
    </div>
 
                      <!-- /Меню -->          
 
                 <!-- Девиз -->
                <div class="container-fluid">
                <div class="row-fluid">
            <div class="centering">
                <div class="col-lg-12" id="deviz">
                    Философия <br />
                    Дисциплина <br />
                    Трудолюбие
                </div>
            </div>
            </div>
                </div> 
                <!-- /Девиз -->
 
            </div>   
            
            <!-- Фото шапки -->
            <div class="col-lg-6">
                
                <div class="col-lg-12 nav navbar-nav navbar-right">
                    <img src="images/bg-header.png" />
                </div>
 
            </div>
            <!-- /Фото шапки -->
 
        </div>
      </div>
    </div>
    <!-- /Верхний блок -->
 
  </div>
 
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  
</body>
</html>

CSS

* {
    box-sizing: border-box;
}
 
.row {
    max-width: 780px;
    margin: 0 auto;
}
 
.menu ul {
    width: 100%;
    list-style: none;
    display: table;
    padding: 0;
    margin: 0;
}
 
.menu ul li {
    width: 25%;
    display: table-cell;
    vertical-align: top;
    text-align: center;
}
 
.menu ul li a {
    padding:  5rem 1rem 1rem 1rem;
    display: block;
    border: 1px red solid;
    text-decoration: none;
}
 
.medal1 {
  background: url(images/medal1.png) no-repeat;
}
 
.medal2 {
  background: url(images/medal1.png) no-repeat;
}
 
.medal3 {
  background: url(images/medal1.png) no-repeat;
}
 
.medal4 {
  background: url(images/medal1.png) no-repeat;
}
 
#deviz {
    font: bold italic 2.5em Verdana bold;
    color: #9f0d0d;
    position: relative;
}
 
/*Выравнивание по центру вертикально и горизонтально*/
.container-fluid{
  height: 200px;
  display: table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {
  height: 100%; 
  display: table-cell; 
  vertical-align: middle;
  text-align: center;
}
 
.centering {
  float:none;
  margin:0 auto;
}
/*Выравнивание по центру вертикально и горизонтально*/

@mrBobrillo · 30.11.2015, 16:01

Ну в первую очередь, высоту ячеек нужно задать на высоту медалей, которые вы отображаете как фон. Во вторую очередь, вы должны указать background-position: top center; тогда медали на фоне станут посередине.
То что у вас на первом скрине сжатое меню, скорее всего или блок, в котором оно лежит слишком короткий или сжимается с правой стороны паддингом.

@HellNHeaven · 30.11.2015, 17:50 **[ТС]**

Благодарю, это, пожалуй, оптимальный и довольно простой вариант. Я предполагал, что будет правильнее вырезать медальку фоном для каждого элемента. Да и с rem работать проще ведь, тем более что совместимость с IE 8- можно решить двумя способами. Что-то у меня совсем туго с мыслью, тяжелая ночка выдалась... Ой, max-width только на 100% поменяю, что бы "О Тренере" растянулось нормально при высоком разрешении

@mrBobrillo · 30.11.2015, 18:10

Я использую em, rem уже по привычке, так что вы поступайте как вам будет лучше. 25% ширины поставил чтоб было все равномерно. Можно не ставить такую ширину, а в ссылках, поставить паддинги по бокам по 24px, посмотрите что получится, не понравится, вернете %

Правильное постоянное расположение текста поверх картинки (пункты меню, bootstrap)

Решение

Решение

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	30.11.2015, 16:01	4
	Сообщение было отмечено HellNHeaven как решение Решение Ну в первую очередь, высоту ячеек нужно задать на высоту медалей, которые вы отображаете как фон. Во вторую очередь, вы должны указать background-position: top center; тогда медали на фоне станут посередине. То что у вас на первом скрине сжатое меню, скорее всего или блок, в котором оно лежит слишком короткий или сжимается с правой стороны паддингом. 1

@HellNHeaven 0 / 0 / 2 Регистрация: 26.11.2015 Сообщений: 33
	30.11.2015, 17:50 [ТС]	5
	Благодарю, это, пожалуй, оптимальный и довольно простой вариант. Я предполагал, что будет правильнее вырезать медальку фоном для каждого элемента. Да и с rem работать проще ведь, тем более что совместимость с IE 8- можно решить двумя способами. Что-то у меня совсем туго с мыслью, тяжелая ночка выдалась... Ой, max-width только на 100% поменяю, что бы "О Тренере" растянулось нормально при высоком разрешении Миниатюры 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	30.11.2015, 18:10	6
	Я использую em, rem уже по привычке, так что вы поступайте как вам будет лучше. 25% ширины поставил чтоб было все равномерно. Можно не ставить такую ширину, а в ссылках, поставить паддинги по бокам по 24px, посмотрите что получится, не понравится, вернете % 0