@@suleiman1
Es geht um den Abschnitt "<strong>".
margin-top
und margin-bottom
wirkt nicht bei display: inline
, d.h. Inline-Elemente haben keinen vertikalen Abstand.
Elemente mit display: inline-block
aber schon.
body { font-family:Arial; }
Nutzer, die kein Arial auf ihrem System haben, bekommen den Text dann in der Defaultschriftart des Browsers zu sehen. Das ist dann oft eine Serifenschriftart wie Times New Roman.
Wenn du das nicht willst, unbedingt die generische Schriftfamilie angeben, hier sans-serif
.
Auf Systemen, die sowohl Arial als auch Helvetica bzw. Neue Helvetica installiert haben, wird man wohl nicht Arial wollen. Die Angabe sollte so aussehen:
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
<!doctype html> <html>
Hier fehlt die Angabe der Sprache des Inhalts (in dem Fall Deutsch). Das sollte so aussehen:
<!DOCTYPE html>
<html lang="de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Das kannst du in HTML5 kürzer haben:
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
Die type
-Angabe ist überflüssig.
<section id="menubar"><ul> <li><a class="menubutton" href="#menu"><img src="menu.png"></a></li> </ul></section>
Dem img
fehlt der Alternativtext. Weder section
noch ul
/li
sind hier gerechtfertigt. Das ist einfach:
<a class="menubutton" href="#menu"><img src="menu.png" alt="zum Menü"></a>
<header><ul> <li><h1>Heimat 2.0</h1></li> </ul><header>
Ebenfalls kein ul
/li
.
<section id="main"> <h2>Überschrift</h2> <p>Hier entsteht ein Text.</p> <strong>Beispiel für einen ... <br>wichtigen Textblock.</strong> <p>Noch mehr ..<br>Textblock.</p> </section>
Für den Hauptinhalt nicht section
, sondern main
verwenden:
<main id="main">
<h2>Überschrift</h2>
<p>Hier entsteht ein Text.</p>
<strong>Beispiel für einen ... <br>wichtigen Textblock.</strong>
<p>Noch mehr ..<br>Textblock.</p>
</main>
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory