Wie muss ich mit CSS einen Titel

mit Logo und oberem und unterem Rand festlegen? ⇐ HTML

HTML-Programmierer
Post Reply Previous topicNext topic
Anonymous
 Wie muss ich mit CSS einen Titel

mit Logo und oberem und unterem Rand festlegen?

Post by Anonymous »

Mein Ziel ist es, einen Abschnitt mit einem Titel, einem linksbündigen Logo und einem farbigen Hintergrund zu erstellen. Das Logo und der Hintergrund müssen außerdem von einem Rahmen umgeben sein. Etwa so:
Die korrekte Ausrichtung wird mit diesem CSS- und HTML-Code erreicht:

Code: Select all

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: Select all

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


Was nicht funktioniert, ist der Rand über und unter dem Bild, der je nach Browser (ich habe Chrome, Firefox und Safari ausprobiert) diskontinuierlich erscheint. Dies geschieht bei Firefox immer und bei bestimmten Zoomstufen, z. B. 175 % bei Chrome, wenn der Titel aufgrund der im Vergleich zum Titelrand vergrößerten H1-Schriftgröße umbrochen wird.
Was muss ich zurücksetzen? Danke.
PS
Natürlich hätte es gereicht, ein Bild einzufügen, aber ohne „Reputationen“ ist das nicht erlaubt.
Der Code, der das Problem löst, ist jedenfalls folgender:

Code: Select all

.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: Select all

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

Top
Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML”