Как изменить положение текста - PullRequest
Новая
       0

Как изменить положение текста

0 голосов
/ 14 апреля 2020

Я новичок в программировании, особенно в CSS / html. Кто-нибудь из вас знает, как изменить положение текста или как сделать другую коробку / таблицу со всей этой информацией рядом с карточкой с изображением актера?

Нужно ли мне делать новый div или что-то еще? Добавьте что-нибудь к css?

enter image description here

Мой CSS: 

body {
  background: url('/static/images/backkk.jpg');
}

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

.card{
  display: inline-table ;
  justify-content: space-evenly;
  grid-template-columns: 300px;
  grid-template-rows: 330px 300px 40px;
  grid-template-areas: "image" "text" "stats";
  border-radius: 7px;
  background: url('/static/images/back.jpg');
  box-shadow: 7px 7px 7px rgba(252, 135, 2, 0.9);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  border:3px solid rgb(255, 189, 7);
}

/*height card*/
.card-text        
{
  grid-area: text;
  margin: 25px;
}

/*  pilot*/
.card-text p {
  color: rgb(16, 207, 144);
  font-family: 'Times New Roman', Times, serif;
  font-size:17px;
  font-weight: 300;
  border:"3px solid #73AD21";
  text-align: center
}

.card-text h2 {
  margin-top:20px;
  font-size:23px;
}

/* lenght of card*/
.card {
  transition: 0.5s ease;
  cursor: pointer;
  margin-top:-200px;
  right: -30%;
  width: 300px;
  height: 35rem;
}

И мой HTML: 

<!DOCTYPE html>
<html>
  <body>
    <div class="card" >
        <div class="card-image">
          <img src="{{ actor.picture }}" alt="No poster in datebase"    width="289" height="345">
        </div>
    <div class="card-text">
      <h2>
        <a href="/actors/actor_detail/{{actor.id }}">{{ actor.name }}</a>  
      </h2>
    </div>
    <div class="card-text"> 
        <p>Age: {{ actor.age}} </p>
        <p>Net-worth: {{actor.net_worth}}</p>
        <p>Date-of-birth: {{actor.date_of_birth}}</p>
        <p>Children: {{actor.children}}</p>
        <p>Marital-status: {{actor.marital_status}}</p>  
    </div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Вам нужно создать еще один div, чтобы поместить информацию об актере внутрь. Чтобы изменить положение текста после, вам, очевидно, нужно создать стиль текста в CSS. Для этого используйте атрибуты: position:relative; top:0px; left:0px; margin-left:0px; margin-right:0px; (выберите количество пикселей, которое вы предпочитаете).

Я не уверен, что понимаю ваши сомнения, но, насколько я понимаю, вы хотите поместить ту же информацию, что и под актером с правой стороны ... Я прав?

Это поле с красной рамкой на изображении, которое вы показываете, должно быть новым div, а информация внутри него должна быть текстовыми элементами или другим элементом, в который вы можете поместить информацию.

Надеюсь, это помогло ты, это мой первый ответ в переполнении стека.

0 голосов
/ 14 апреля 2020

Должен ли я создать новый html только с таблицей, а затем использовать {% extends 'table. html'%}?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...