Mirra Bell
Тогда извиняйте

kolobdur74
Супер! Теперь все получается, спасибо. ) Предлагаю выложить это в скрипты для пользователей.

Ребзи подсобите 😱 где-то тупанул (и не могу найти косяк)
Короче:
HTML в сообщениях (html) вставляется не на всю ширину поста, а на половину.
Надо всю ширину, а высоту авто

Пример:
[html]<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> Крутой форум</p>
  <p>HTML CSS это основа основ.</p>
</div>

<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span >Светлана Flex.</span> CEO разработка</p>
  <p>Класный раздел HTML CSS.</p>
</div>
<style>
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
    content: "";
    clear: both;
    display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
    font-size: 20px;
    margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: auto) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
</style>
[/html]
Собственно код:

<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> Крутой форум</p>
  <p>HTML CSS это основа основ.</p>
</div>

<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span >Светлана Flex.</span> CEO разработка</p>
  <p>Класный раздел HTML CSS.</p>
</div>
<style>
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
    content: "";
    clear: both;
    display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
    font-size: 20px;
    margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 100%) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
</style>

Отредактировано МАЧОнаДАЧЕ (Вс, 17 Апр 2022 08:14:03)

kolobdur74
Это я понял.... Пасиб.
А вот как изночально поставить ширину "avto"? (дабы ширина была 100%//////если не указана в html или в скрипте ////именно в посте)
Это же не бодю ктмл?

kolobdur74
Пасиб 👍 Понял

touareg

Такие пойдут?
- есть новые посты
- нет новых постов
- тема закрыта

- важная тема есть новые посты
- важная тема нет новых постов
- важная тема закрыта

И продолжайте писать в этой теме, та совсем не про это.

Отредактировано Mirra Bell (Чт, 28 Апр 2022 08:22:26)

Нормалёк. А как их встроить?

На всякий случай уточню автору вопроса, что сейчас общие скорость интернета и мощности железа допускают использование картинок большего размера, чем нужно контейнеру (в пределах разумного, конечно).
Просто в стилях нужно использовать параметр background-size: contain, тогда картинки можно не подгонять вручную в редакторе совсем пиксель в пиксель.

Что-то поставить иконки сообщений на форуме http://ecumene.forumrpg.ru/ оказалось нетривиальной задачей: вроде всё вписала, но я их не вижу не только на главной, но и в коде страницы. Раньше они формировались символами, не картинками. Это я закомментировала, поставила картинки, но они куда-то деваются.

Ну, и полный набор для иконок:

/* Старое сообщение */
.icon {
  background: url(своя картинка);
  background-repeat: no-repeat;
  background-position:  center center;
  }
  
/* Новое сообщение */
.inew .icon {
  background: url(своя картинка);
  }
  
/* Закрытая тема */
.iclosed .icon {
  background: url(своя картинка);
  }
 
/* Важная тема */
.isticky .icon {
  background: url(своя картинка);
  }
  
/* Важная закрытая тема */
.iclosed.isticky .icon {
  background: url(своя картинка);
  }
 
/* Закрытая тема новое сообщение */
.inew.iclosed .icon {
  background: url(своя картинка);
  }
 
/* Важная тема новое сообщение */
.inew.isticky .icon {
  background: url(своя картинка);
  }
  
/* Важная закрытая тема новое сообщение */
.inew.iclosed.isticky .icon {
  background: url(своя картинка);
  }
  
/* Перенесенная тема */
.iredirect .icon {
  background: url(своя картинка);
  }

Можно еще и для форумов с подфорумами..