suleiman1: brauch Hilfe beim formatieren von Text

Beitrag lesen

hey,

ich bekomme einen bestimmten Text nicht formatiert. Ich würde gerne einen Hintergrund für einen bestimmten Text bestimmen und entsprechend den Ausenabstand (margin) oder Innenabstand (padding) anpassen, damit ich einen schönen großen Hintergrund habe.

Ich schaff es aber nicht den Abstand zwischen den Texten zu vergrößern und die Hintergründe überlappen sich dann. Selbst höhe (height) funktioniert nicht bei mir. Was ich verändern kann mit margin ist der Abstand von links und rechts, aber nicht von oben und unten.

Ich muß noch dazu sagen das ich in der Lernphase bin. Hoffe ihr könnt mir helfen. Es geht um den Abschnitt "<strong>".

Hier mal meine CSS-Datei.

/* Normalisierung */

body {
	background: gray;
	font-family:Arial;
}

h1, h2, h3, p, span, strong { color: #404040; }

strong {
	padding: 1em;
	margin: 1em 1em;
	color: red;
	background: rgba(0, 0, 0, 0.3);
	text-shadow: 1px 1px 0 DarkRed, 1px -1px 0 DarkRed, -1px 1px 0 DarkRed, -1px -1px 0 DarkRed;	
	text-decoration:underline;
}

a[href] { color: blue; }

table, th, tr, td {
	padding: 0;
	margin: 0;
	border-style: dotted;
}

ul, ol, li, dl, dt, dd {
	display: block;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
 
li {
	display: list-item; 
	margin-left: 2em;
}

@media print {
	body { background: white; }
	h1, h2, h3, p, span, strong { color: black; }
	a[href] {
		color: black;
		text-decoration: none;
	}
}

Und hier meine HTML.

<!doctype html>

<html>

<head>

<!-- HTML-Type -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- CSS -->
<link href="main.css" rel="stylesheet" type="text/css" />

<!-- Titel, Beschreibung und Stickwörter-->
<title>Suleiman's Heimat 2.0</title>
<meta name="description" content="Privater Server welcher zum Lernen benutzt wird.">
<meta name="keywords" content="suleiman, Suleiman, SULEIMAN">

<!-- Den Inhalt nicht an Suchmaschienen übermitteln
und die Suchmaschienen dürfen nicht Hyper-Links folgen -->
<meta name="robots" content="noindex,nofollow"> 

</head>

<body>

<section id="menubar"><ul>
	<li><a class="menubutton" href="#menu"><img src="menu.png"></a></li>
</ul></section>

<header><ul>
	<li><h1>Heimat 2.0</h1></li>
</ul><header>

<nav class="nav"><ul>
	<li><a href="index.html" class="active">Übersicht</a></li>
	<li><a href="#">Blog's</a></li>
	<li><a href="#">rubbel die Katz</a></li>
	<li><a href="../test02/">Test02</a></li>
	<li><a href="#">Allgemeine Info's</a></li>
</ul></nav>

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

<footer><ul>
	<li>Suleiman &copy; 2017</li>
	<li><a href="#">Datenschutz</a></li>
	<li><a href="#">Impressum</a></li>
</ul></footer>

</body>

</html>