Как подвинуть текст внутри div?

Question

[Alexandriski]

Не могу понять как установить надпись "02", также как на примере выше. Можете подсказать?
Выходит, только так:

И вообще правильно ли я сверстал данный элемент?

<div class="card">
<img class="top-img" src="img\fon.png"  width="480" height="180" >  
    <h2>Базовый HTML</h2>
<ul>
    <li>Базовые теги</li>
    <li>Теги картинок и ссылок</li>
    <li>Теги таблиц</li>
    <li>Служебные теги</li>
    <li>Кодстайл HTML</li>
    <p align="right">02</p>
</ul>
    </div>

CSS

.card {
background-color: white;
width: 480px;
height: 500px;
box-shadow: 2px 4px 9px -4px #000000;
}

Спасибо за помощь!

Comments

[Николай Демидов]

Если мой вариант вам подходит, отметьте его как решение, пожалуйста

[Ankhena]

И вообще правильно ли я сверстал данный элемент?

Неа

0. Для начала, знакомьтесь, это валидатор html https://validator.w3.org/nu/
Он расскажет о том, что атрибут align устарел.

1. 02 это псевдоэлемент.

Т.е. либо у вас где-то должен быть нумерованный список, у него скрыта нативная нумерация, а затем добавлены псевдоэлементы и стилизованы. Если эта нумерация нужна не как украшение, а именно для восприятия.

Либо это просто номер страниц или глав (секций) или типа того. И тогда это просто псевдоэлемент. Если это только украшения.

Этот псевдоэлемент позиционируете с помощью гридов или абсолютом.

2. Картинка, которую вы даже называете словом fon.png должна быть сделана фоном. Она ведь не содержит никакого смысла, а является только украшением.
И слеши в путях пишутся в другую сторону, так /

3. Высоту в верстке задают очень редко (например, когда надо картинку вписать в блок). Мы почти никогда не знаем сколько будет контента на реальном сайте, какого размера шрифт у пользователя и т.д. Поэтому высота блока сама подстраивается по контенту. Если очень нужно, можно задать минимальную или максимальную высоту.

Answer 1

[Николай Демидов]

Здравствуйте, как вариант использовать свойство position.

HTML

<div class="card">
      <img class="top-img" src="img\fon.png" width="480" height="180" />
      <h2>Базовый HTML</h2>
      <ul>
        <li>Базовые теги</li>
        <li>Теги картинок и ссылок</li>
        <li>Теги таблиц</li>
        <li>Служебные теги</li>
        <li>Кодстайл HTML</li>
        <p class="some-text">02</p>
      </ul>
    </div>

CSS

.card {
  background-color: white;
  width: 480px;
  height: 500px;
  box-shadow: 2px 4px 9px -4px #000000;
  position: relative;
}

.some-text {
  position: absolute;
  right: 0;
  bottom: 0;
}

Answer 2

[seritx]

думаю так лучше

<div class="card">
<img class="top-img" src="img\fon.png"  width="100%" height="180" >
    <h2>Базовый HTML</h2>
<ul>
    <li>Базовые теги</li>
    <li>Теги картинок и ссылок</li>
    <li>Теги таблиц</li>
    <li>Служебные теги</li>
    <li>Кодстайл HTML</li>
</ul>
<h3>02</h3>
    </div>

.card {
        background-color: white;
        width: 480px;
        height: 500px;
        box-shadow: 2px 4px 9px -4px #000000;
        position:relative;
      }

      .card h3{
        font-size:50px;
        margin:auto 25px 25px auto;
        position:absolute;
        right:0;
        bottom:0;
        opacity:15%;
      }