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

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

Anonymous

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

Цитата

Сообщение Anonymous » 23 ноя 2025, 23:46

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода 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 по сравнению с границей заголовка.
Что мне нужно сбросить? Спасибо.

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

1763930784

Anonymous

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода CSS:
[code]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;
}
[/code]
И HTML:
[code]
[img]./xampp_pics/favicon.png[/img]
[b]XAMPP[/b] Apache + MariaDB + PHP + Perl

[/code]
Что не работает, так это граница сверху и снизу изображения, которая, в зависимости от браузера (я пробовал Chrome, Firefox и Safari), выглядит прерывистой. Это всегда происходит с Firefox и при определенных уровнях масштабирования, например 175 % в Chrome, когда заголовок переносится из-за увеличенного размера шрифта h1 по сравнению с границей заголовка.
Что мне нужно сбросить? Спасибо. 

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