• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Container werden nicht angezeigt, finde den Fehler nicht.

J

Jellicious

Neues Mitglied
Heyho, ich lerne jetzt seit ca. 3 Wochen (schulisch & zu Hause) HTML/CSS & komme beim Lernen auch relativ gut voran, jedoch habe ich momentan ein kleines Problem.

Ich bin aktiver World of Warcraft-Spieler und Leiter einer Gilde, und wollte gerne alles Organisatorische über HTML-Dateien zusammenfassen & illustrieren.
Dabei habe ich momentan zwei Seiten, in denen ich einige Aufzählungen per <div> in eine einen Container mit dem flex-Attribut eingebaut habe, weil ich nicht alle absoluten oder relativen Daten eintragen wollte.

Anfangs wurde noch alles gut angezeigt, aber gestern Abend habe ich festgestellt, dass die Container auf der einen Seite nicht mehr angezeigt werden, obwohl ich am Code der Seite nichts verändert habe & der Code sich nicht von dem auf der anderen Seite unterscheidet (Der, für die Container).

Ich suche jetzt also schon den ganzen Morgen nach meinem Fehler und kann ihn nicht finden. Wäre schön, wenn mir jemand auf die Sprünge helfen könnte, wo mein Fehler liegt :^)

Hier der Code:

<!DOCTYPE html>

<html>

<title>
Raidkader
</title>

<meta charset="UTF-8">

<head>

<style>
.Warlock {color:purple}
.DK {color:firebrick}
.Mage {color:lightskyblue}
.Hunter {color:darkolivegreen}
.Pala {color:hotpink}
.Dudu {color:darkorange}
.Shaman {color:blue}
.Warrior {color:darkgoldenrod}
.Monk {color:mediumspringgreen}
.Rogue {color:yellow}
.Priest {color:white}


#BRLogo {position:relative;left:400px}

#Background {
background-image: url(img/Parchment_Background.jpg);
background-color:burlywood;
width:2000;
height:1000;
border: 5px solid black;
padding:0px;
}

#header {
background-image: url(img/Header_Background.png);
background-color:black;
width:200;
height200;
}

#Panda {
position:absolute;
left:700px;
top:1200px

#Infoseite {
font-family:Verdana;
font-weight:bold;
}


<!--FLEXBOXEN, KADERUNTERTEILUNG-->

#Kader {
width:1300px;
height:3000px;
display:flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
}

#DDs {
background:wheat;
width:400px;
border:3px solid black;
border-radius:15px;
}

#Heiler {
background:wheat;
width:400px;
border:3px solid black;
border-radius:15px;
}

#Tanks {
background:wheat;
width:400px;
border:2px solid black;
border-radius:15px;
}

</style>

<div id="header"><img src="img/BetreutesRaiden.png" id="BRLogo" width="650" height="280" alt="Betreutes Raiden"/></div>

</head>

<body>
<div id="Background">

<p id="Infoseite"><h2>Betreutes Raiden Infoseite</h2></p>

<hr />
<a href="subsite/Token-Verteilung.html" id="Token-Link"><h3><strong>Token-Verteilung</strong></h3></a>



<p>
<h2><u>Name - Klasse/Rüstung/Token</u></h2>
</p>

<img src="img/pandaren_dance.gif" alt="Pandaren" id="Panda">


<div id="Kader">

<div id="DDs">

<h2><u>DDs</u></h2>



<ul>

<h3>
<li class="Warlock">1.Guldahn - Hexer/Stoff/Conq</li>
<li class="DK">2.Cariana - DK/Platte/Vanq</li>
<li class="DK">3.Vergeben - DK/Platte/Vanq</li>
<li class="Mage">4.Carryanne - Mage/Stoff/Vanq</li>
<li>5.</li>
<li>6.</li>
<li>7.</li>
<li class="Hunter">(8.Kanasus - Hunter/Kette/Prot)</li>
<li class="Pala">(9.Lelliya - Pala/Platte/Conq)</li>
</h3>

</ul>

</div> <!--DDs END-->


<div id="Heiler">
<h2><u>Heiler</u></h2>




<ul>

<h3>
<li class="Dudu">1.Puntaroha - Dudu/Leder/Vanq</li>
<li class="Shaman">2.(Methalim - Schami/Kette/Prot)</li>
<li>3.</li>
<li>(4.)</li>
</h3>

</ul>


</div> <!--Heiler END-->

<div id="Tanks">
<h2><u>Tanks</u></h2>



<ul>

<h3>
<li class="Monk">1.Jellicious - Monk/Leder/Prot</li>
<li class="Dudu">2.Dududruide - Dudu/Leder/Vanq</li></h3>
</h3>

</ul>
</div>

</div> <!--Kader END-->

</body>

</html>
 
Werbung:
Ein Link zur Seite wäre sehr hilfreich und du könntest deinen Code auch als Code schreiben ([HTML ] Hier ist der Code lesbar [/HTML ] ohne Leerzeichen) da das Lesen sonst ziemlich schwer ist. Zwei Fehler habe Ich schon mal gefunden, auch wenn Sie wahrscheinlich nicht mit deinem Problem zusammenhängen: 1. <title> und <meta> gehören auch in den <head>. 2. Direktes KIndelement einer <ul> sollen nur <lI> Elemente sein, du setzt aber auch eine Überschrift.
 
Die Seite kann ich leider nicht verlinken, da es nur eine HTML-Datei ist, also noch nicht online. Die beiden Fehler habe ich jetzt beseitigt, hat leider nicht mein Hauptproblem gelöst :^(

Hier ist jetzt .rar-Datei mit allen dazugehörigen Daten (Bildern, etc), die bis jetzt drin sind. steckt noch sehr in den Kinderschuhen:
(Raidkader.html ist die Datei, in der die Backgrounds der Container nicht angezeigt werden)
http://www.mediafire.com/download/kb9420ir45igx1n/Raidkader_HTML.rar
 
Werbung:
Hallo,

Heyho, ich lerne jetzt seit ca. 3 Wochen (schulisch & zu Hause) HTML/CSS & komme beim Lernen auch relativ gut voran, jedoch habe ich momentan ein kleines Problem.
Zum Vergrößern anklicken....

Nein, du hast leider viele Probleme. Du verwendest teils veraltetes HTML / CSS, verstößt gegen die zumeist ungeschriebenen aber bewährten Regeln (Best Practices) und machst zudem noch sachliche Fehler.

Die Best Practices sind Regeln, die nicht immer befolgt werden müssen, deren Anwendung sich aber als Problemvermeidend und Zeit-/Arbeitsparend bewährt haben.

Gegen veraltetes HTML / CSS helfen nur aktuelle Lehrbücher / -kurse, die dann auch mal etwas Geld kosten.

Anfangs wurde noch alles gut angezeigt,
Zum Vergrößern anklicken....

Die Browser sind so eingestellt, dass sie auch grob fehlerhafte Seiten anzeigen. Webseitenersteller unterliegen dann leider häufig der Ansicht, ihr Quelltext sei fehlerfrei und ihre Seite werde gut angezeigt - wie in deinem Fall.

dass die Container auf der einen Seite nicht mehr angezeigt werden
Zum Vergrößern anklicken....

An deiner Fragestellung ist bereits ein großes Problem von dir erkennbar: Du arbeitest nicht strukturiert und deshalb ungenau. Offensichtlich werden die Container angezeigt, aber deren Formatierung (z. B. die Hintergrundfarbe) fehlt. Das ist etwas ganz anderes.

Wäre schön, wenn mir jemand auf die Sprünge helfen könnte, wo mein Fehler liegt
Zum Vergrößern anklicken....

Dann mal ans eingemachte. Die meisten folgenden Beispiele gelten natürlich für den gesamten Quelltext.

Code: 
.Warlock {color:purple}

und

Code: 
#Background  {
  background-image: url(img/Parchment_Background.jpg);
  ...
  }

Best Practices: id-, class, Pfad- und Dateinamen sollten nur aus Buchstaben des englischen Alphabetes, Zahlen und dem Unterstrich bestehen und niemals mit einer Zahl beginnen. Am besten werden zudem nur Kleinbuchstaben verwendet.

Code: 
.Warlock {color:purple}

Best Practices: Schreibe die CSS-Eigenschaften jeweils in eine separate Zeile und beende sie mit einem Semikolon.

Wenn die CSS-Eigenschaften in einer separaten Zeile stehen (auch einzelne) sind sie übersichtlicher und lassen sich besser bearbeiten, löschen, umsortieren und kopieren.

Das Semikolonsparen bei einer einzelnen oder der letzten Eigenschaft führt immer wieder dazu, dass die Semikolon auch an falscher Stelle vergessen werden.

Eine durchgehende Schreibweise des CSS vermeidet Fehler und hilft später bei der Fehlersuche.

Besser wäre also

Code: 
.warlock {
  color: purple;
}

Im body-Bereich müssen die Namen dann natürlich auch angepasst werden.

Code: 
<title>
Raidkader
</title>

<meta charset="UTF-8">

<head>

title und meta gehören in den head Bereich. Warum hast du das noch nicht korrigiert, obwohl du die gepackte Datei erst nach der ersten Antwort bereitgestellt hast?

Code: 
#Background {
  background-image: url(img/Parchment_Background.jpg);
  background-color:burlywood;
...
}

Best Practices: Verwende nur eine Schreibweise. In diesem Fall: Entweder durchgehend ein Leerzeichen hinter dem Doppelpunkt und oder keinen. Auch das macht den Quelltext übersichtlicher und hilft bei der Fehlersuche.

Code: 
#Background {
  ...
  height:1000;
}

Auf height-Angaben sollte so weit irgendmöglich verzichtet werden - im gesamen Quelltext. Die Höhe bestimmt sich durch den Inhalt und kann vom Browser selbst am besten bestimmt werden. Unnötige feste Vorgaben führen immer wieder zu Problemen und vertuschen wie in deinem Fall zusätzlich vorhandene Fehler.

Code: 
#header {
  ...
  height200;
}

Der Doppelpunkt hinter der eigentlich komplett überflüssigen height-Angabe fehlt.

Code: 
#Panda {
  position:absolute;

"position: absolute;" sollte nur in begründeten Ausnahmefällen verwendet werden. So ein Fall liegt hier nicht vor.

Code: 
#Panda {
  ...
  top: 1200px

Ist dir der hohe Wert nicht bereits bei der Eingabe seltsam vorgekommen? Damit überspielst du Fehler an anderer Stelle.

Code: 
#Panda {
  position:absolute;
  left:700px;
  top:1200px
#Infoseite {

Hier fehlt eine schließende Klammer.

Code: 
<!--FLEXBOXEN, KADERUNTERTEILUNG-->

Das ist ein Kommentar für HTML, nicht für CSS.

Code: 
#Kader {
  ...
  display:flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
}

Wenn Prefixe dann durchgehend. Wobei bei Flexbox auf Prefixe inzwischen auch verzichtet werden kann. Zumindest sollten sie erst bei einer fertigen, fehlerfreien Seite hinzugefügt werden und dann in erster Linie für den IE. Es gibt Webseiten die das automatisch in einem Rutsch erledigen.

Wobei Flexbox in diesem Zusammenhang eigentlich überflüssig ist.

Code: 
#Kader {
  ...
  height:3000px;
  ...
}

Wieder so eine überflüssige Höhenangabe. Aber auch hier sollte dir der hohe Wert im Vergleich zur Browserdarstellung zu Denken geben. Damit überspielst du mal wieder Fehler an anderer Stelle.

Code: 
#Infoseite {
  font-family:Verdana;
  font-weight:bold;
}

Best Practices: Font-Anweisungen sollten nur den Elementen zugewiesen werden, die direkt für die Fonts gedacht sind, also p, h1 bis h6, li, dt, dd u.s.w.

Code: 
</style>
  <div id="header"><img src="img/BetreutesRaiden.png" id="BRLogo" width="650" height="280" alt="Betreutes Raiden"/></div>
  </head>

div gehören in den body-Bereich.

Code: 
<img src="img/BetreutesRaiden.png" id="BRLogo" width="650" height="280" ...

Bei Bildern / Grafiken sollte auf Breiten- und Höhenangaben im Quelltext im body-Bereich verzichtet werden. Dafür gibt es CSS.

Code: 
<p id="Infoseite"><h2>Betreutes Raiden Infoseite</h2></p>

h-Elemente gehören nicht in p-Elemente und umgekehrt.

Zudem mißbrauchst du offensichtlich Elemente für die Darstellung. Das ist sachlich falsch. Bei HTML5 hat jedes Element eine Bedeutung, für die es auch nur eingesetzt werden sollte. Das Aussehen wird dann über CSS bestimmt. Stichwort zu den Thema: Semantik.

Code: 
<hr />

Dito. Das hr-Elemlent hat eine Bedeutung, die hier eher nicht gegeben ist.

Code: 
<a href="subsite/Token-Verteilung.html" id="Token-Link"><h3><strong>Token-Verteilung</strong></h3></a>

Best Practice: Das inline-Element a sollte innerhalb des Block-Elements h3-stehen.

Das strong-Element wird offensichtlich für das Aussehen verwendet - das ist falsch. Das Aussehen wird mit CSS angepasst.

Code: 
<p>
<h2><u>Name - Klasse/R&uuml;stung/Token</u></h2>
</p>

h2 in p - siehe oben

u zur Gestaltung - siehe oben

Bei UTF-8 ist eine Maskierung der Umlaute und Sonderzeichen nicht erforderlich und eher albern.

Code: 
<h3>
  <ul>
  ...
  </ul>
</h3>

Eine Liste gehört nicht in ein h-Element. Wahrscheinlich wieder ein Mißbrauch von Elementen zur Gestaltung. Das gilt natürlich auch für die folgenden Listen.

Code: 
<h3>
<ul>
<li class="Monk">1.Jellicious - Monk/Leder/Prot</li>
<li class="Dudu">2.Dududruide - Dudu/Leder/Vanq</li></h3>
</ul>
</h3>

Hier bist du mit den öffnenden und schließenden h3-Elementen durcheinander gekommen.

Code: 
<div>
  ...
</div>

Zähle mal die öffnenden und schließenden div-Elemente in deinem Quelltext. Die sollten übereinstimmen - tun sie aber nicht.

Viel Spass beim Korrigieren und weiterem Lernen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du solltest deinen CSS Code in eine eigene Datei bauen dadurch wird deine Seite schneller, da das css Script nur einmal geladen wird und bei allen Seiten verwendet wird an denen es verlinkt ist und muss nicht immer wieder neu geladen werden.

Relativ gut voran?
Setzte dich mal richtig damit auseinander, denn was du da gemacht hast ( nicht beleidigend verstehen) ist misst !

Und du solltest bedenken das jede Website die du ins Internetseite stellst, dass du eine Domain brauchst die Geld kostet und einen Webserver / rootserver der zwar wenig (da du nicht so vielspeicher brauchst)jedoch auch Geld kostet und zwar monatlich.
 
Werbung:
Ich bedanke mich für die (umfangreichen!) Antworten ^^ Oha, wie's aussieht muss ich wohl noch sehr dran feilen ;) Ich nehm's mir auf jeden Fall zu Herzen.
 
Besonderer Dank geht an MrMurphy, der mir meine dusseligen Fehler vor Augen geführt hat, von denen einige auf Grund dessen entstanden sind, dass ich viele Sachen entfernt habe und Überbleibsel übersehen habe ;D
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben