Ich kann die anklickbare Bereichsauffüllung nicht auf den Link anwenden, sie gilt nur für den darin enthaltenen Text ⇐ HTML

[Anonymous]

Ich habe Probleme, den Füllbereich zum Öffnen des Blog-Beitrags zu öffnen, aber das gilt nur für den darin enthaltenen Text. Egal, was ich mache, der Abstand scheint den anklickbaren Bereich des Post-Links selbst nicht zu beeinträchtigen. Ich habe versucht, den CSS-Code zu ändern, indem ich Ränder, Abstände und Anzeigeeigenschaften angepasst habe, aber es hat sich nichts geändert. Ich habe auch versucht, die HTML-Struktur des Blog-Beitrags zu optimieren, etwa Elemente in zusätzliche Container einzuschließen oder die Link-Platzierung zu ändern, aber am Ende hat sich dadurch der Auffüllstil auf eine Weise verändert, die ich nicht wollte. Es fühlt sich so an, als ob die Auffüllung nur optisch für den Text funktioniert und den interaktiven Bereich nicht erweitert, und ich bin mir nicht sicher, wie ich das beheben kann, ohne das aktuelle Layout zu beschädigen. Möglicherweise muss ich die Struktur des Blog-Beitrags überdenken oder einen anderen CSS-Ansatz verwenden, aber ich weiß nicht, wie ich am besten dafür sorgen kann, dass der gesamte Beitragsbereich richtig auf Klicks reagiert und gleichzeitig die Auffüllung konsistent bleibt.

Code: Select all

html,

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100%;
overflow-y: auto;
}

footer {
background-color: #1f1f1f;
padding: 0.9rem 3.5rem;
}

body {
font-family: ui-rounded, sans-serif;
background-color: #2e2e2e;
color: #f5f5f5;
line-height: 1.6;
overflow-y: auto;
}

a {
color: #f5f5f5;
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: #ccc;
}

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #1f1f1f;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 1000;
}

main {
margin-top: 80px;
max-width: 800px;
margin: 80px auto 4rem;
padding: 1.5rem 3.5rem;
min-height: calc(100vh - 80px);
/* header height accounted for */
}

.intro {
text-align: center;
margin-bottom: 3rem;
}

.intro h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.blog-post p {
margin-bottom: 1em;
/* Adds space after each paragraph */
line-height: 1.6;
/* Optional: makes text more readable */
}

.recent-posts h2 {
margin-bottom: 1.5rem;
}

.post {
background: #3a3a3a;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
transition: background 0.3s ease;
}

.post:hover {
background: #4a4a4a;
}

.post-list {
list-style: none;
padding: 0;
margin-top: 2rem;
}

.post-list li {
background: #3a3a3a;
margin-bottom: 1rem;
padding: 1rem;
border-radius: 6px;
transition: background 0.3s ease;
}

.post-list li:hover {
background: #4a4a4a;
}

.post-list a {
color: #f5f5f5;
font-weight: bold;
}

.navbar {
display: flex;
align-items: start;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

.logo {
left: 50px;
top: 15px;
font-size: 1.5rem;
font-weight: bolder;
}

.nav-links {
display: flex;
justify-content: flex-start;
gap: 2.5rem;
margin-left: auto;
padding-left: 10px 0;
height: 39px;
align-items: center;
}

.social-links {
font-size: 1.5rem;
display: flex;
margin-left: auto;
gap: 2.5rem;
}

Code: Select all

[url=../index.html]My Name[/url]


[url=blog.html]Blog[/url]

[url=https://x.com/]
[i][/i]
[/url]

[url=https://www.instagram.com/]
[i][/i]
[/url]

[url=https://github.com/]
[i][/i]
[/url]





All Posts
2025
[list]


[*]
[url=v1.0.0post.html]v1.0.0[/url]
January 1, 2025

[/list]