Rahmen um Text funktioniert nicht.

Mitglied

Dabei seit: 16.11.2010

Freitag, 20. Januar 2012, 16:43

Guten Tag,

ich muss für eine Klassenarbeit eine Webseite über den Sport Badminton erstellen.
Momentan sieht das folgendermaßen aus:

Jetzt habe ich aber das Problem, das ich um den Text in der Mitte einen roten gestrichelten Rahmen haben möchten. Ich habe das schon mit outline versucht, ein Rahmen wurde aber noch nie gezeichnet. Ebenso, das der Text einen gewissen Abstand zur Navigation haben soll ist mir bisher noch nicht gelungen.

Meine momentane Index.html sieht so aus:

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
	<head>
		<title>Badminton</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<img src="head.png" alt="Head">
		<br /><br />
		<ul id="Navigation">
			<li><a href="index.html">Startseite</a></li>
			<li><a href="uebermich.html">Über mich</a></li>
			<li><a href="about.html">Was ist Badminton?</a></li>
			<li><a href="medien.html">Bilder | Videos</a></li>
			<li><a href="impressum.html">Impressum</a></li>
		</ul>
		<span id="Inhalt (1)">
			<h2>Herzlich Willkommen</h2>
			<p>Auf dieser von mir erstellten Internetseite, finden Sie einige Informationen über den beliebten Sport Badminton.
			Sie werden mit sicherheit überrascht sein, wie wenig Sie diesen Sport doch kennen.</p>
		</span>
		<p id="Fusszeile">Kontakt können Sie per E-Mail aufnehmen - <a href="mailto:kiessling.andreas@yahoo.de">kiessling.andreas@yahoo.de</a></p>
	</body>
</html>

Und meine CSS-Datei dazu sieht so aus:

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body{
	color: black;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
}
#Navigation {
    font-size: 0.83em;
    float: left; width: 150px;
    margin: 0 0 1.2em; padding: 0;
	background-image: url(navi.png);
}
#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
}
#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
}
#Navigation a:link {
  color: black; background-color: #eee;
}
#Navigation a:visited {
  color: #666; background-color: white;
}
#Navigation a:hover {
  color: black; background-color: #FFEBEB;
}
#Navigation a:active {
  color: white; background-color: gray;
}
#Inhalt (1): {
	outline-width: medium;
	outline-style: dashed;
	outline-color: #B70000;
}
#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #FFEBEB; border: 1px solid silver;
 }

Wie man sieht, habe ich der ID "Inhalt (1)" gesagt, das um dieses ein Rahmen gezeichnet werden soll. Warum aber hat es nicht geklappt ?
Ich würde mich sehr auf eure Hilfe freuen.

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Freitag, 20. Januar 2012, 18:54

Also es liegt am Bezeichner deiner ID.
Zum einen hast du im CSS angegeben "#Inhalt (1):" und im HTML Code ohne den Doppelpunkt aufgerufen, was aber nicht der Fehler ist.

Ein ID-Bezeichner (oder Name) darf keine Leerzeichen und keine Sonderzeichen wie Klammern enthalten.

Erlaubt sind Buchstaben A-Z (klein&groß), Zahlen 0-9 sowie Punkt(.), Doppelpunkt(

, Bindestrich(-) und Unterstrich(_).

Und für den Seitenabstand nach links setzt du im CSS Code der besagten ID entweder margin(Außenabstand) oder padding(Innenabstand) nach links.
Also eines von beidem:

	Cascading Style Sheet
1 2	padding-left: 50px; margin-left:50px;

Anstatt in Pixeln kannst du natürlich auch den Abstand in em angeben. Ich würde px und em aber nicht all zu sehr mischen. Also nicht bei einem Abstand em und beim anderen px.
Könnte komisch enden

Und ich würde ein bisschen mehr mit "div-Containern" arbeiten.
Zuallermindest den Content in der Mitte, damit sowas wie im Impressum nicht passiert (Verschiebung unter der Navi).

MFG Simon

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Deffcon« (20. Januar 2012, 18:54)

flagfox

Mitglied

Dabei seit: 16.11.2010

Beiträge: 34

Freitag, 20. Januar 2012, 19:29

Danke dir erstmal. Aber leider funktioniert noch nicht alles so wie ich es erhofft hatte.
Der Rahmen um den Inhalt wird gezogen, er ist auch rot gestrichelt wie ich es eingestellt habe. Aber das padding-left das ich ebenfalls in die ID "Inhalt" eingefügt habe, wird nicht übernommen. Ebenfalls wird der Rahmen vom linken Seitenbeginn angefangen zu ziehen.

Wie kann ich dies denn ändern ?

PS: Homepage-Seite aktualisiert:

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »flagfox« (20. Januar 2012, 19:29)

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Freitag, 20. Januar 2012, 19:34

Versuch es mal mit margin.

flagfox

Mitglied

Dabei seit: 16.11.2010

Beiträge: 34

Freitag, 20. Januar 2012, 19:40

Perfekt

margin verschiebt den gesamten Inhalt und dazu auch noch den roten Rahmen mit.

Vielen herzlichen Dank

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Freitag, 20. Januar 2012, 20:36

Das ist ja klar, weil es ein Innenabstand ist. Also der Inhalt hat einen Abstand zum Rand (dein roter Rahmen).

Falls du noch fragen hast einfach raus damit

Rahmen um Text funktioniert nicht.

HTML

Cascading Style Sheet

Cascading Style Sheet

Ähnliche Themen