Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 2214 Просмотров
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Все началось с того "Как написать текст поверх изображения".
Проблемная страница: http://crimson-land.ru/games/top-down.html
С помощью этой статьи http://www.css-tricks.ru/articles/Details/TextBlocksOverImage
привел категорию к желаемому виду - поверх изображения отображается текст "скачать" с красным фоном.
Код
<div class="notice-red"><span>Скачать</span></div>
Код: css
.notice-red  {
position: absolute;
top: 180px;
left: 0;
width: 100%;}

.notice-red span {
color: white;
font-size:16px;
font-weight: bold;
background: rgb(255, 0, 0);
background: rgba(255, 0, 0, 0.8);
padding: 6px;}


Все замечательно до тех пор, пока не понадобилось добавить второй текст. Видно как один текст "Demo" накладывается на другой "Steam" (ну вроде логично, ведь для второго применен аналогичный стиль, но с другим фоном):



В попытках отобразить оба текста в одну строку рядом друг с другом, отредактировал CSS до следующего вида, изменив атрибут "position" и добавив "display: inline;":
Код: css
.notice-red  {
position: relative;
bottom: 40px;
left: 0;
width: 100%;
display: inline;}

И вроде бы все хорошо, но вдруг высота блока/изображения над которым есть такие таксты стала больше, чем высоба блока, где таких текстов нет:



Далее так и не понял, в чем моя ошибка и в чем секрет "position".
На данный момент в CSS использованы стили, которые указаны в начале топика.
Благодарю за помощь.
« Последнее редактирование: 07.10.2013, 18:46:48 от slepoy »
Помог? Поставь(те) плюс в репутацию.
*

Рэм

  • Осваиваюсь на форуме
  • 18
  • 1 / 0
Пробовали сделать блок с картинкой не img, а div с бакграундом этой картинки? тогда вопрос с position отпадет, так как кнопки можно поместить внутрь этого блока и уже спозиционировать как надо.
Второй вариант - тоже без position. Кнопки будут relative со сдвигом на картинку наверх top:-40px, например.
Третий вариант - js скрипт, где позиция кнопок будет зависеть от их ширины.
Четвертый - если текст на кнопках будет не динамичный, то почему бы и не выровнять с помощью margin?
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Посмотрел по ссылке - проблем не увидел
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Пробовали сделать блок с картинкой не img, а div с бакграундом этой картинки? тогда вопрос с position отпадет, так как кнопки можно поместить внутрь этого блока и уже спозиционировать как надо.
К сожалению данный вариант не подходит т.к. изображение должно быть кликабельным (оно создается не com_content компонентом и глобально менять в нем вывод изображений не желателен).
Второй вариант - тоже без position. Кнопки будут relative со сдвигом на картинку наверх top:-40px, например.
Да, так работает (как писал ниже) Но появляется отступ
Код: css
.notice-red  {
position: relative;
bottom: 40px;
left: 0;
width: 100%;
display: inline;}


Третий вариант - js скрипт, где позиция кнопок будет зависеть от их ширины.
Не подходит.
Четвертый - если текст на кнопках будет не динамичный, то почему бы и не выровнять с помощью margin?
К сожалению где-то одна кнопка, а где-то две-три и хочется, чтобы всегда они были по центру.

Спасибо.
Помог? Поставь(те) плюс в репутацию.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Добавилось несколько статей к категории, но результат можно увидеть, если пощелкать по поганиции 1, 2, 3... http://crimson-land.ru/games/top-down.html
Возникает проблема в отступах

Помог? Поставь(те) плюс в репутацию.
*

Рэм

  • Осваиваюсь на форуме
  • 18
  • 1 / 0
С помощью мазонри выкрутились, как посмотрю)
что если кнопки поместить в отдельный div , у которого будет position: absolute, сам div будет поверх изображения, а кнопки внутри него display:inline-block?
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Спасибо большое - сработало :~]
Помог? Поставь(те) плюс в репутацию.
*

Рэм

  • Осваиваюсь на форуме
  • 18
  • 1 / 0
Незачто.
Мазонри вырубить не забудь)
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
MacOS
Safari 6 - нет проблем
Firefox 23 - нет проблем
Chrome 30 - нет проблем

Причем в Chrome было, но при обновлении страницы исчезло .... видимо вы исправили

Ишак меня нюхал ...
Если помог - плюсуйте в карму.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 2183
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
[Решено] Слетает правый сайдбар на шаблоне protostar

Автор Mick_20

Ответов: 4
Просмотров: 2341
Последний ответ 28.05.2020, 15:45:06
от Muzzy
Позиция фонового изображения

Автор Forgiving

Ответов: 2
Просмотров: 1147
Последний ответ 30.03.2020, 10:58:49
от beliyadm
Несколько вопросов про шаблон (Joomla! 3.9.1)

Автор int31

Ответов: 6
Просмотров: 1407
Последний ответ 09.02.2020, 20:28:49
от AlexB
Как выровнять блоки в модуле?

Автор arkady

Ответов: 4
Просмотров: 1299
Последний ответ 14.10.2019, 23:24:14
от AlekVolsk