Arawn: Rand bei DIV-Container entfernen funktioniert nicht

Hallo an alle,

ich schreibe nun zum ersten Mal seit 13 Jahren eine Webseite selbst und fühle mich wie ein Anfänger. 😱 Das Problem seht ihr unten am Bild. Ich habe als Hintergrund des Bodys die Papiermusterung (Lizenzen der Bilder kaufe ich erst am Ende, da sich immer mal wieder was ändert). Mein Logo ist transparent und ich möchte, dass der Hintergrund farbig ist und mein Logo mit einem abgerissenen Papierrand vom Body getrennt ist. Ich wollte erst mit p style den Hintergrund einfärben beim Logo einfärben, aber da tat sich nichts, also einen DIV-Container kreiert mit CSS-Attribut. An sich tut es, was es soll, aber da ist so ein hässlicher Streifen. Ich habe schon margin, padding und border auf 0 gesetzt, aber keine Änderung. Ich sitze da nun geschlagene 2 Stunden daran und denke, es ist was ganz Simples.

Da die Seiten noch nicht im Netz sind, packe ich unter das Bild den betreffenden HTML- und CSS-Text.

Ich hoffe, ihr könnt mir helfen. 🙂

LG

Arawn

Lücke DIV und body

<body>
<div class="logofarbe"><center><img src="https://abload.de/img/bannercwj21.png"></center><br />
<img src="https://abload.de/img/papierrand26kd3.png"></div>
<br /><p><a href="ueber-mich.html">Über mich</a> <a href="veroeffentlichungen.html">Veröffentlichungen</a> <a href="preise.html">Preise</a> <a href="kontakt.html">Kontakt</a> <a href="https://dragon-writing.blogspot.com/">Blog</a></p>
.logofarbe {
	background-color:#cc99ff;
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: 0px;
}
~~~🙂
  1. Servus!

    Das Problem seht ihr unten am Bild.

    Ich habe als Hintergrund des Bodys die Papiermusterung (Lizenzen der Bilder kaufe ich erst am Ende, da sich immer mal wieder was ändert). Mein Logo ist transparent und ich möchte, dass der Hintergrund farbig ist und mein Logo mit einem abgerissenen Papierrand vom Body getrennt ist.

    An sich tut es, was es soll, aber da ist so ein hässlicher Streifen. Ich habe schon margin, padding und border auf 0 gesetzt, aber keine Änderung.

    Ich sitze da nun geschlagene 2 Stunden daran und denke, es ist was ganz Simples.

    Ja und nein.

    Dein Bild ist ein Inline-Element, das auf der Grundlinie positioniert ist.

    Da es potentiell Unterlängen (im nicht vorhandenen Text) geben könnte, existiert der Raum dafür.

    Du kannst

    • vertical-align verändern, z.B. zu bottom
    • display auf block ändern, damit es nicht mehr inline ist.

    Übrigens: Ich würde diese Grafik als background-image einbinden und mein HTML überprüfen und modernisieren. <center> gibt's nicht mehr und dein <div class="logofarbe"> will wohl ein header sein.

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo Matthias,

      vielen Dank für deine Antwort. Leider hat keine der Lösungsvorschläge funktioniert 😕

      Im Header hatte ich es erst, aber änderte ich da die Hintergrundfarbe, hat das der Header einfach ignoriert und es war nur der Hintergrund des Bodys zu sehen. 🙄

      Danke für den Hinweis, ich schau mal, was jetzt statt center zur Anwendung kommt. Wie gesagt: das ist nun schon 13 Jahre her, als ich das gelernt habe 🙊

    2. Hallo Matthias,

      nun geht es mit display block plötzlich. Wer weiß, vielleicht hat es einfach gedauert, bis die Info beim Browser ankam. 🤷 Vielen Dank für deine Hilfe!

      Liebe Grüße

      Arawn