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



 

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

2 страниц V   1 2 >
Открыть тему
Добавить ответ в эту тему
> Css, я его обожаю ;-;
geneziz
geneziz
Topic Starter сообщение 8.11.2019, 18:17; Ответить: geneziz
Сообщение #1


Здравствуйте у меня есть проблема
я никак не могу написать css чтобы текст появлялся снизу картинки и выглядило это норм

<html>
<div class="test">
                        <a target="_blank">
     <img src="images/55551556.jpg" width="200" height="200">
   </a>
   <span class="desc"<p>55551556</p><span>
</div>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 8.11.2019, 19:05; Ответить: Artos_mw
Сообщение #2


Между </a> и <span впишите <br>, примерно так:
</a>
<br>
<span

Есть и другие способы
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
geneziz
geneziz
Topic Starter сообщение 8.11.2019, 19:08; Ответить: geneziz
Сообщение #3


Artos_mw,

css
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
  height: 200px;
  position: relative;
  line-height: 200px;
}
div.gallery:hover {
  border: 1px solid #000;
}
div.gallery img {
  width: 100%;
  height: auto;
  vertical-align: up;
}
span.desc {
  left: 0;
  top: 0;
  text-align: bottom;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


я плохо шарю в css
я задаю параметр bottom но текст где то внизу не в вверху
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 8.11.2019, 21:42; Ответить: Artos_mw
Сообщение #4


А ещё у вас блочный элемент <p>...</p> вставлен в строковый <span...>...<span>, а это не логично.Ещё span оба открывающие, а закрывающего нету. Без элементарных понятий в верстке вы не сможете понятно задать вопрос, а мы не сможем правильно вам помочь.

Пробуйте так:

<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<br>
<span class="desc">55551556</span>
</div>
</html>

или так

<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<p><span class="desc">55551556</span></p>
</div>
</html>

Вариантов много в зависимости от задачи.


Сообщение отредактировал Sosnovskij - 11.11.2019, 20:05
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
geneziz
geneziz
Topic Starter сообщение 9.11.2019, 15:39; Ответить: geneziz
Сообщение #5


Artos_mw, Итог
https://jsfiddle.net/2rn013mL/1/
текст должен быть снизу
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MattCutts_mw
MattCutts_mw
сообщение 9.11.2019, 16:54; Ответить: MattCutts_mw
Сообщение #6


что-то с Google нет так:

http://htmlbook.ru/faq/kak-dobavit-podpis-pod-fotografiey
https://webformyself.com/kak-sdelat-v-html-...-pod-kartinkoj/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 9.11.2019, 17:48; Ответить: Artos_mw
Сообщение #7


geneziz, в песочнице посмотрел код, там много ненужного можно выкинуть, имхо. Вот что получится:

вёрстка

<html>
<div class="gallery">
<img src="тут data или адрес" width="200" height="200">
</div>
<p>55551556</p>
</html>

и стиль

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  width: 200px;
}
div.gallery:hover {
  border: 1px solid #000;
}
div.gallery img {
  width: 100%;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Loyrenc
Loyrenc
сообщение 9.11.2019, 18:20; Ответить: Loyrenc
Сообщение #8


Artos_mw,спс я знаю что там много лишнего я просто эксперементировал ))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Исо
Исо
сообщение 17.9.2020, 21:50; Ответить: Исо
Сообщение #9


Строка с ошибкой, поэтому коряво получилось =) 
"<p><span class="desc">55551556</span></p>"


Сообщение отредактировал Исо - 17.9.2020, 21:51
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Antoncheg87
Antoncheg87
сообщение 15.10.2020, 17:40; Ответить: Antoncheg87
Сообщение #10


Ошибка в отсутствии закрытия начинающего тега <span> (>) после "desc"

<html>
<div class="test">
                        <a target="_blank">
     <img src="images/55551556.jpg" width="200" height="200">
   </a>
   <span class="desc"<p>55551556</p><span>
</div>
</html>

Чтобы текст был снизу или сверху в HTML5 как вариант воспользоваться упрощенным тегом <figure>:

  <figure>
   <img src="картинка.jpg" width="200" height="200" alt="">
   <figcaption>Подпись снизу</figcaption>
  </figure>
  <figure>
   <figcaption>Подпись сверху</figcaption>
   <img src="картинка.jpg" width="200" height="200" alt="">
  </figure>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как Изменить цвет картинки под фон сайта через css?
 13 HITMAN84 1110 6.1.2021, 23:27
автор: buypushplatform
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
 2 zaiko 451 29.12.2020, 23:49
автор: zaiko
Открытая тема (нет новых ответов) Оцените за сколько можно сейчас его продать
Нужны срочно до 25 декабря деньги и нуждаюсь в помощи от знающих
 25 zorrx 1138 21.12.2020, 1:25
автор: Tatyana_S
Открытая тема (нет новых ответов) Создал сайт с переводами текстов песен, прошу его оценить
 8 icefog 745 27.11.2020, 21:36
автор: nideo
Горячая тема (нет новых ответов) Здравствуйте. Создал сайт дачной тематики, прошу его оценить.
 29 murowets 3276 17.11.2020, 18:10
автор: ViktoriaFE


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 27.1.2021, 0:18

Дизайн

 
Форум IP.Board © 2021  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet