Перейти к содержимому



Css, я его обожаю ;-;

#1 geneziz
geneziz
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 08 Ноябрь 2019 - 17:17

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

#2 Artos
Artos
  • Пользователь
  • 116 сообщений
  • Репутация: 14

Отправлено 08 Ноябрь 2019 - 18:05

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

</a>

<br>
<span

 

Есть и другие способы


  • 0

#3 geneziz
geneziz
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 08 Ноябрь 2019 - 18:08

@Artos,

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 но текст где то внизу не в вверху


  • 0

#4 Artos
Artos
  • Пользователь
  • 116 сообщений
  • Репутация: 14

Отправлено 08 Ноябрь 2019 - 20:42

А ещё у вас блочный элемент <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 Ноябрь 2019 - 19:05

  • 0

#5 geneziz
geneziz
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 09 Ноябрь 2019 - 14:39

@Artos, Итог
https://jsfiddle.net/2rn013mL/1/
текст должен быть снизу


  • 0

#6 MattCutts
MattCutts
  • Пользователь
  • 268 сообщений
  • Репутация: 19

Отправлено 09 Ноябрь 2019 - 15:54

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

 

http://htmlbook.ru/f...pod-fotografiey

https://webformyself...-pod-kartinkoj/


  • 0

#7 Artos
Artos
  • Пользователь
  • 116 сообщений
  • Репутация: 14

Отправлено 09 Ноябрь 2019 - 16:48

@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%;
}

  • 0

#8 Loyrenc
Loyrenc
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 09 Ноябрь 2019 - 17:20

@Artos,спс я знаю что там много лишнего я просто эксперементировал ))


  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85

Пользователь месяца
NataliaAntalia NataliaAntalia 1-й за Октябрь
Очков активности: 480 2 темы, 58 сообщений, 5 баллов репутации
Сайт: zdorovemedicina.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 448.5 0 тем, 23 сообщения, 13 баллов репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 283.5 0 тем, 21 сообщение, 9 баллов репутации

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 270 3 темы, 27 сообщений, 5 баллов репутации

  • Фотография Totti
    #4

    Totti
    Очков активности: 231 1 тема, 19 сообщений, 7 баллов репутации

  • Фотография MattCutts
    #5

    MattCutts (dmitrylee.ru)
    Очков активности: 166.5 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #6

    Megoydagi (24ho.ru)
    Очков активности: 162 6 тем, 18 сообщений, 3 балла репутации

  • Фотография NataliaAntalia
    #7

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 138 Вне конкурса за определение пользователя месяца

  • Фотография miketomlin
    #8

    miketomlin
    Очков активности: 78 0 тем, 13 сообщений, 4 балла репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 39 3 темы, 4 сообщения, 2 балла репутации

  • Фотография kolver
    #10

    kolver
    Очков активности: 24 3 темы, 7 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.10.2019
  • Яндекс выдача: 17.11.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru