X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Наложение текста на изображение
Frakiec
Frakiec
Topic Starter сообщение 2.5.2015, 21:28; Ответить: Frakiec
Сообщение #1


Привет гуру CSS, возникла загвозка, не накладывается тест на изображения в таком коде:
Код
<div class="container">
<div class="texthead">
<img class="two-columns" src="/bg.png">
<span>Текст</span>
</div>
<div class="texthead">
<img class="two-columns" src="/bd.png">
<span>Текст</span>
</div></div>


сами стили:
Код
.container {
  position: relative;
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}  
.two-columns {
  width: 48%;
  display: inline-block;
}    
.texthead {
    display:inline-block;  
    position:relative;
}
.texthead span {
    display:inline-block;
    position:absolute;
    top:30px;  
    left:0px;
}

Может я, что-то не то делаю <_<
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Pult
Pult
сообщение 2.5.2015, 21:50; Ответить: Pult
Сообщение #2


Frakiec, Как-то так:

Html:
Код
<div class="container">
    <div class="texthead">
        <span>Текст</span>
        <img src="images/bg/slbg.jpg">
    </div>
    <div class="texthead">
        <span>Текст</span>
        <img src="images/bg/slbg.jpg">
    </div>
    <div class="clear"></div>
</div>


CSS:
Код
.container {
    width: 96%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}  
  
.texthead {
    position:relative;
    width: 48%;
    float: left;
}

.texthead img {
    display: block;
    width: 100%;
}

.texthead span {
    display: block;
    width: 100%;
    position:absolute;
    color: #fff;
    margin-top:30px;
}

.clear {clear:both;}


--------------------
Дизайн, верстка и поддержка сайтов (качественно и по демократичным ценам)
ICQ 692616097
Лучше, чтоб над тобой смеялись, чем плакали...


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frakiec
Frakiec
Topic Starter сообщение 2.5.2015, 23:25; Ответить: Frakiec
Сообщение #3


Pult, спасибо, но что не хочет работать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Pult
Pult
сообщение 3.5.2015, 13:42; Ответить: Pult
Сообщение #4


Цитата(Frakiec @ 2.5.2015, 23:25) *
что не хочет работать

В смысле не хочет работать? Не корректно отображается?


--------------------
Дизайн, верстка и поддержка сайтов (качественно и по демократичным ценам)
ICQ 692616097
Лучше, чтоб над тобой смеялись, чем плакали...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frakiec
Frakiec
Topic Starter сообщение 3.5.2015, 16:50; Ответить: Frakiec
Сообщение #5


Pult,

код странички https://yadi.sk/d/UuHqr20MgQ63Y
стили https://yadi.sk/d/3LlLSPMUgQ66H

Сегодня заработало :facepalm: А вообще нужно, чтоб расположение изображений было как в пункте "без текста", а текст на изображениях был как в пункте "C тестом" и вот не могу понять, где ошибка.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 3.5.2015, 18:03; Ответить: falken
Сообщение #6


Frakiec, width применяйте не к изображениям, а к самому блоку, в котором расположены и span, и img. Уберите класс breakpoint/two-columns с изображений и манипулируйте блоком texthead.
Развернуть/Свернуть

Задача адаптивить изображения? Если да, то Вы изначально не совсем верный способ выбрали.


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frakiec
Frakiec
Topic Starter сообщение 3.5.2015, 18:47; Ответить: Frakiec
Сообщение #7


falken, Спасибо большое, работает. ;)
Цитата(falken @ 3.5.2015, 18:03) *
Задача адаптивить изображения? Если да, то Вы изначально не совсем верный способ выбрали.

это ж почему? :blush:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 3.5.2015, 19:12; Ответить: falken
Сообщение #8


Цитата(Frakiec @ 3.5.2015, 18:47) *
это ж почему?

Ну почитайте как правильно адаптивятся изображения, на просторах достаточно статей. А задавать разные значения width в определенных диапазонах @media, как у Вас, не самый удачный подход.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Перевод текста в речь нейросетями - сервис Zvukogram
13 Zvukogram 7138 19.2.2024, 18:16
автор: freon_mr777
Открытая тема (нет новых ответов) 📌 Рандомизация видео/аудио/фото/текста с минимальным участием - 𝓓𝓮𝓵𝓽𝓪𝓣𝓸𝓸𝓵𝓼
Мы предлагаем комплексное решение для рандомизации всех видов офера
2 leviathan 1340 29.1.2024, 21:29
автор: leviathan
Открытая тема (нет новых ответов) Нужен перевод текста с RU на UZ
0 REGNET 743 22.2.2023, 15:17
автор: REGNET
Открытая тема (нет новых ответов) Наполнение сайта Автотематики (написание текста с размещением)
Ищу человека для длительного сотрудничества
2 NYLesha 1808 1.8.2022, 23:22
автор: NYLesha
Открытая тема (нет новых ответов) Рерайт на постоянку (2-3 текста в неделю)
Авто тематика
2 k62 1787 4.6.2021, 21:20
автор: mark2013


 



RSS Текстовая версия Сейчас: 29.3.2024, 9:11
Дизайн