Zur Überschriften: Sinn und Zweck von ID und Beispiele für die Anwendung der Box-Modells

Freddo · 6. März 2014

Hallo an alle.

Beide Codes funktionieren nicht, obwohl ich es bei dem Box-Models in der design.css Datei gepackt habe und bei dem ID zweck und sinn, habe ich es in head und im design.css geschrieben, wollte es aber nicht ausführen.

Woran kann es liegen ?

MFG

freddo.

PS: Seite 187 bis Seite 189.

PPS: Ich glaube, ich weiss woran es liegen könnte. Nämlich daran, das ich div übernommen hatte und keine Ergänzung z.b "p" oder "h1" schrieb.

PPPS: Kopie meines HTML5-Gerüsts:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Startseite</title>
	<meta charset="UTF-8" />
	<link href="design.css" type="text/css" rel="stylesheet">
	<img src="bilder/grafik-1.gif" width="474" height="66" alt="Diese Seite lebt.Das Copyright liegt beim Seiten ersteller."/>




</head>
<body>
<br>
<div id="navi">
	<ul>
	<li><a href="index.html">Startseite</a></li>
	<li><a href="test-3.html">Test-3</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
	</ul>
</div>
<br>
<h1>Startseite</h1>
<br>
<p>Diese Seite nenne ich Frankenstein, da Sie aufgrund der Veränderungen, die auf dieser Seite stattfinden, leben wird.</p>




	




</body>
</html>

Alles anzeigen

PPPPS: Kopie meines CSS3-Gerüsts:

CSS

h1 { 
	color: red;
	border: blue dotted;

	}




p {
	color: blue;
	border: red dashed;
	}

a {

			}

h2 {
	color: red;
	border: blue dotted;
	}

	margin:20px 35px 15px 30px;

Alles anzeigen

HTML

<style type="txt/css">
<!--
#navi {
background-color:orange;
border: 2px dotted green;
float:left;
}
-->
</style>

Az. · 6. März 2014

1. Was genau ist jetzt das Problem / wird nicht ausgeführt?
2. Du musst in HTML noch das body- und html-tag schließen
3. Eine CSS-Regel darf nicht ohne Selektor stehen da diese Fehler verursachen wird (gemeint ist margin-Regel)

Freddo · 6. März 2014

Hallo und danke für deine Antwort.

Zu 1: Er will keine von den beiden genannten Übungen ausführen, übernehmen, so wieder geben (Im Browser) wie es in E-Book gezeigt wurde. Die Seite bleibt unverändert und sieht aus wie vorher.
Zu 2: Ich habe die <body> und <html> Tags geschlossen und zwar mit </body> und </html>.
Zu 3: margin schrieb ich.

MFG

freddo

PS: Diese Kombination funktioniert auch nicht:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Startseite</title>
	<meta charset="UTF-8" />
	<link href="design.css" type="text/css" rel="stylesheet">
	<img src="bilder/grafik-1.gif" width="474" height="66" alt="Diese Seite lebt.Das Copyright liegt beim Seiten ersteller."/>




</head>
<body>
<br>
<div id="navi">
	<ul>
</div>
	<li><a href="index.html">Startseite</a></li>
<div id="navi">
	<li><a href="test-3.html">Test-3</a></li>
</div>
<div id="nav">
	<li><a href="kontakt.html">Kontakt</a></li>
</div>
<div id="navi">
	</ul>
</div>
<br>
<h1>Startseite</h1>
<br>
<p>Diese Seite nenne ich Frankenstein, da Sie aufgrund der Veränderungen, die auf dieser Seite stattfinden, leben wird.</p>




	




</body>
</html>

Alles anzeigen

Nicht über die desiang.css Datei.

Az. · 6. März 2014

Zitat von Freddo

Zu 1: Er will keine von den beiden genannten Übungen ausführen, übernehmen, so wieder geben (Im Browser) wie es in E-Book gezeigt wurde. Die Seite bleibt unverändert und sieht aus wie vorher.

Hast du die Seite im Browser auch neu geladen?

Zu 2: Ja, tut mir leid das hatte ich übersehen.
Zu 3: Ja, aber nicht für sich alleine ...

Code

margin: 5px;

... sondern so ...

Code

selektor {
margin: 5px;
}

... weil die Datei sonst Fehler wirft.

Freddo · 6. März 2014

Danke.

Das mit dem Selektor wusste ich noch nicht.

Klar lade ich die Seite neu, was sonst.

MFG

freddo

wolf · 7. März 2014

Ich verstehe dein Problem nicht, was fehlt denn, was denkst du sollte da sein?

Und einen Rand wirst du so nicht bekommen:

Zitat von Freddo

border: blue dotted;

Die zusammengefasste Border (border-width, border-color, border-style) besteht aus 3 Anweisungen:

CSS

selektor{
  border: wie_viel | welcher_art | farbe;
  /* also z.B:*/
  border: 1px dotted blue;
  border-left: solid 3px grey;
}

bei dir fehlt die Angabe wie_viel.

capricorne69 · 10. März 2014

Ich hatte mal gelesen , dass eine ID jeweils nur einmal vorkommen kann , im obigen Quelltext steht aber mehrmals

HTML

<div id="navi">

oder habe ich jetzt einen Denkfehler ?

wolf · 10. März 2014

Id's sind dazu da einem Element Eindeutig Eigenschaften zuzuordnen, Klassen dazu, mehreren Elementen die gleichen Eigenschaften zuzuordnen.

Bsp.

HTML

<nav>
    <div class="linker_abstand" id="kasten-1">Kasten</div>
    <div class="linker_abstand" id="kasten-2">Kasten</div>
    <div class="linker_abstand" id="kasten-3">Kasten</div>
    <div class="linker_abstand" id="kasten-4">Kasten</div>
</nav>

CSS

.linker_abstand{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}
#kasten-3{
    background-color: #555;
}

Natürlich könntest du auch hergehen und das hier schreiben:

CSS

#kasten-1{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}
#kasten-2{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}
#kasten-3{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}
#kasten-4{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}

Alles anzeigen

Ist aber halt nicht sehr Ökonomisch und naja, siehst du selber

Und ja, Id's dürfen auf einer Seite nur 1mal vorkommen, <h1> sollte das übrigens auch tun.

Wenn du alle div's die in nav liegen ansprechen willst, ohne extra Klassen zu verteilen kannst du auch;

CSS

nav div{
    margin-left: 30px;
    padding: 50px;
    border: 1px dotted black;
}

hoffe es ist verständlich

Zur Überschriften: Sinn und Zweck von ID und Beispiele für die Anwendung der Box-Modells

Jetzt mitmachen!

Teilen