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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


Привет гуру 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


Частый гость
**

Группа: User
Сообщений: 50
Регистрация: 6.4.2015
Из: Украина
Поблагодарили: 13 раз
Репутация:   4  


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


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


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


Частый гость
**

Группа: User
Сообщений: 50
Регистрация: 6.4.2015
Из: Украина
Поблагодарили: 13 раз
Репутация:   4  


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

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


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


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


Pult,

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

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


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


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

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


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


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


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

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


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Главная страница сайта.Больше текста или фото?
98 PROK777 16570 Вчера, 15:57
автор: vsemmoney
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСъезжает изображение
0 Whitedeni 370 6.12.2017, 13:40
автор: Whitedeni
Открытая тема (нет новых ответов) Вопрос по уникальности текста уже не существуешего сайта
11 Raptor-Ice 2108 28.10.2017, 17:18
автор: Raptor-Ice
Открытая тема (нет новых ответов) Нужна консультация по генерации текста
платная или бесплатная
0 bluestorm 404 14.10.2017, 20:31
автор: bluestorm
Открытая тема (нет новых ответов) Нужно заменить все текста на сайте
Сами тексты есть, заменить все русское на английское
2 Ksardas777 475 21.8.2017, 17:09
автор: Anatoos


 



RSS Текстовая версия Сейчас: 12.12.2017, 4:44
Дизайн