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



 

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

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


Новичок
*

Группа: User
Сообщений: 5
Регистрация: 8.11.2019
Поблагодарили: 0 раз
Репутация:   0  


Здравствуйте у меня есть проблема
я никак не могу написать 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


Участник
***

Группа: User
Сообщений: 163
Регистрация: 1.2.2019
Поблагодарили: 0 раз
Репутация:   19  


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

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


Новичок
*

Группа: User
Сообщений: 5
Регистрация: 8.11.2019
Поблагодарили: 0 раз
Репутация:   0  


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


Участник
***

Группа: User
Сообщений: 163
Регистрация: 1.2.2019
Поблагодарили: 0 раз
Репутация:   19  


А ещё у вас блочный элемент <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


Новичок
*

Группа: User
Сообщений: 5
Регистрация: 8.11.2019
Поблагодарили: 0 раз
Репутация:   0  


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


Бывалый
****

Группа: User
Сообщений: 463
Регистрация: 18.6.2013
Поблагодарили: 0 раз
Репутация:   37  


что-то с 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


Участник
***

Группа: User
Сообщений: 163
Регистрация: 1.2.2019
Поблагодарили: 0 раз
Репутация:   19  


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


Новичок
*

Группа: User
Сообщений: 8
Регистрация: 6.11.2019
Поблагодарили: 0 раз
Репутация:   0  


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


Бывалый
****

Группа: User
Сообщений: 251
Регистрация: 26.9.2012
Из: Москва
Поблагодарили: 0 раз
Репутация:   16  


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


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


Завсегдатай
*****

Группа: Active User
Сообщений: 533
Регистрация: 23.1.2015
Из: Спб
Поблагодарили: 59 раз
Репутация:   104  


Ошибка в отсутствии закрытия начинающего тега <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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Здравствуйте. Создал сайт дачной тематики, прошу его оценить.
 28 murowets 2410 23.9.2020, 20:45
автор: CPAIKON
Открытая тема (нет новых ответов) Подключение шрифта в css
 2 Artos_mw 448 9.8.2020, 22:23
автор: Artos_mw
Открытая тема (нет новых ответов) Верстка, программирование и создание сайтов (css,html, js, jq, php)
 2 Alex_phoenix_Voit 1251 15.6.2020, 18:50
автор: Alex_phoenix_Voit
Открытая тема (нет новых ответов) Ищу прогонщика с возможностью выборки Domain Rating (DR) по его базе.
 0 regem 432 25.5.2020, 3:12
автор: regem
Открытая тема (нет новых ответов) Нужен сайт + услуги по его продвижению
Ищу специалистов (грамотных)
 11 Zoya83 1844 13.4.2020, 20:15
автор: aleks17101984


 

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

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

RSS Текстовая версия Сейчас: 29.10.2020, 9:07

Дизайн

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