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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3337 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3295 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыТы умеешь лить траф с FB? Мы монетизируем его через Телеграм на ИНДИИ.
0 Sirbet 493 14.2.2023, 21:39
автор: Sirbet
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110


 



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