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

@denisov_88 · Регистрация: 12.11.2015

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

есть картинки в виде кнопок, которые являются ссылками, как вписать в них текст типа "Главная", "Разделы" и тд.

Dmitry · 17.06.2017, 19:55

Сделать див, в нем поместить текст, а саму картинку назначить бакграундом

@denisov_88 · 17.06.2017, 20:57 **[ТС]**

то есть прям между тегами <li>можно создать див и в него все вкинуть?

@maketta · 18.06.2017, 00:04

denisov_88, Можно оформить li как кнопку

Добавлено через 2 минуты
denisov_88, Если хотите, покажите пример и попытаюсь сделать

@denisov_88 · 18.06.2017, 01:20 **[ТС]**

HTML5

<div class="header_bottom">
                    <nav class="navigation">
                        <ul class="nav">
                            <li class="button">
                                <div class="button_blue">
                                    <div class="button_text"><a href="#" class="button_link">Главная</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Инвестору</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Условия</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Соглашение</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Помощь</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Новости</a></div>
                                </div>
                            </li>
                            <li class="button">
                                <div class="button_white">
                                    <div class="button_text"><a href="#" class="button_link1">Контакты</a></div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>

вот мой кусок кода,который я по кнопкам сделал и макет

@maketta · 19.06.2017, 03:29

denisov_88, Ну как-то так:

HTML5

<div class="header_bottom">
 
        <nav class="navigation">
 
            <ul class="nav">
 
                <li class="active"><a href="#" title="Главная">Главная</a></li>
                
                <li><a href="#" title="Инвестору">Инвестору</a></li>
                
                <li><a href="#" title="Условия">Условия</a></li>
                
                <li><a href="#" title="Соглашение">Соглашение</a></li>
                
                <li><a href="#" title="Помощь">Помощь</a></li>
                
                <li><a href="#" title="Новости">Новости</a></li>
                
                <li><a href="#" title="Контакты">Контакты</a></li>
 
            </ul>
 
        </nav>
 
    </div>

CSS

.nav {
    padding: 40px 0 0;
    margin: 0;
    list-style-type: none;
    text-align: center;
}
 
.nav li {
    display: inline-block;
    margin: 5px;
}
 
.nav a {
    display: block;
    padding: 12px 25px;
    text-decoration: none;
    color: #9B9B9B;
    background: linear-gradient(to bottom, #FFF, #D8D8D8);
    border-radius: 7px;
}
 
.nav a:hover {
    background: #0067D0;
    color: #fff;
}
 
.nav .active a {
    background: #0067D0;
    color: #fff;
}

@denisov_88 0 / 0 / 0 Регистрация: 12.11.2015 Сообщений: 19
		1
	Текст поверх картинки 17.06.2017, 18:33. Показов 1221. Ответов 5 Метки нет (Все метки) есть картинки в виде кнопок, которые являются ссылками, как вписать в них текст типа "Главная", "Разделы" и тд. 0

Dmitry 13016 / 7407 / 801 Регистрация: 09.09.2009 Сообщений: 28,988
	17.06.2017, 19:55	2
	Сделать див, в нем поместить текст, а саму картинку назначить бакграундом 0

@denisov_88 0 / 0 / 0 Регистрация: 12.11.2015 Сообщений: 19
	17.06.2017, 20:57 [ТС]	3
	то есть прям между тегами <li>можно создать див и в него все вкинуть? 0

@maketta 16 / 16 / 9 Регистрация: 02.04.2016 Сообщений: 143
	18.06.2017, 00:04	4
	denisov_88, Можно оформить li как кнопку Добавлено через 2 минуты denisov_88, Если хотите, покажите пример и попытаюсь сделать 0

	19.06.2017, 03:29