с логотипом, а также верхнюю и нижнюю границу с помощью CSS? [закрыто] ⇐ Html

1 сообщение • Страница 1 из 1

Anonymous

с логотипом, а также верхнюю и нижнюю границу с помощью CSS? [закрыто]

Цитата

Сообщение Anonymous » 25 ноя 2025, 12:28

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода CSS:
h1 {
padding: 10px;
font-size: 2.6em;
font-weight: normal;
color: red;
border-top: 2px solid #989898;
border-bottom: 2px solid #989898
}
.title-wrap {
display: flex;
justify-content: left;
align-items: center;
background-color: #EFEEE6;
padding: 20px;
}
.img-wrap {
border-top: 2px solid #989898;
padding: 10px;
border-bottom: 2px solid #989898;
padding: 10px;
}

И HTML:

XAMPP Apache + MariaDB + PHP + Perl

Что не работает, так это граница сверху и снизу изображения, которая, в зависимости от браузера (я пробовал Chrome, Firefox и Safari), выглядит прерывистой. Это всегда происходит с Firefox и при определенных уровнях масштабирования, например 175 % в Chrome, когда заголовок переносится из-за увеличенного размера шрифта h1 по сравнению с границей заголовка.
Что мне нужно сбросить? Спасибо.
PS
Конечно, достаточно было бы вставить изображение, но без «репутации» это нельзя.
В любом случае код, решающий задачу, следующий:
.title-container {
display: flex;
background-color: #efeee6;
}

.title-wrap {
display: inline-flex;
justify-content: start;
margin: 12px 20px 12px;
padding: 10px;
border-block: 2px solid #989898;
}

.img-wrap {
margin-right: 15px;
}

.title-wrap h1 {
margin: 0;
font-size: 2.6em;
font-weight: normal;
}

Подробнее здесь: https://stackoverflow.com/questions/798 ... r-with-css

1764062893

Anonymous

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода CSS:
h1 {
padding: 10px;
font-size: 2.6em;
font-weight: normal;
color: red;
border-top: 2px solid #989898;
border-bottom: 2px solid #989898
}
.title-wrap {
display: flex;
justify-content: left;
align-items: center;
background-color: #EFEEE6;
padding: 20px;
}
.img-wrap {
border-top: 2px solid #989898;
padding: 10px;
border-bottom: 2px solid #989898;
padding: 10px;
}

И HTML:

[img]./xampp_pics/favicon.png[/img]
[b]XAMPP[/b] Apache + MariaDB + PHP + Perl


Что не работает, так это граница сверху и снизу изображения, которая, в зависимости от браузера (я пробовал Chrome, Firefox и Safari), выглядит прерывистой. Это всегда происходит с Firefox и при определенных уровнях масштабирования, например 175 % в Chrome, когда заголовок переносится из-за увеличенного размера шрифта h1 по сравнению с границей заголовка.
Что мне нужно сбросить? Спасибо.
[b]PS[/b]
Конечно, достаточно было бы вставить изображение, но без «репутации» это нельзя.
В любом случае код, решающий задачу, следующий:
  .title-container {
display: flex;
background-color: #efeee6;
}

.title-wrap {
display: inline-flex;
justify-content: start;
margin: 12px 20px 12px;
padding: 10px;
border-block: 2px solid #989898;
}

.img-wrap {
margin-right: 15px;
}

.title-wrap h1 {
margin: 0;
font-size: 2.6em;
font-weight: normal;
}
 

Подробнее здесь: [url]https://stackoverflow.com/questions/79828106/how-must-i-set-a-title-h1-with-logo-and-top-and-bottom-border-with-css[/url]