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

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

Anonymous

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

Цитата

Сообщение Anonymous » 21 дек 2025, 22:13

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода CSS и HTML:

Код: Выделить всё

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;
}

Код: Выделить всё

[img]./xampp_pics/favicon.png[/img]
[b]XAMPP[/b] 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;
}

Код: Выделить всё

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

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

1766344419

Anonymous

Моя цель — создать раздел с заголовком, логотипом, выровненным по левому краю, и цветным фоном. Логотип и фон также должны быть заключены в рамку. Примерно так:
Правильное выравнивание достигается с помощью этого кода CSS и HTML:


[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]
[code]
[img]./xampp_pics/favicon.png[/img]
[b]XAMPP[/b] Apache + MariaDB + PHP + Perl
[/code]



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


[code].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;
}[/code]
[code]
[img]./xampp_pics/favicon.png[/img]
[b]XAMPP[/b] Apache + MariaDB + PHP + Perl
[/code]




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