Der festgelegte Div Bereich reagiert nicht auf hinterlegte Backroundcolor

andreas71 · 2. April 2014

Hallo an Alle

Ich habe die Lernvideos von Axel Pratzner gekauft

Und bis jetzt auch fast alles verstanden.

Nur eines nicht.............bei der 2 Spaltengrafik wo auch schon mit den neuen HTML Funktionen Header,Nav,Section und Footer gearbeitet wurde, wurde noch zusätzlich ein Div bereich zwischen Header / Nav und Section / Footer eingesetzt. Der Div bereich bekam noch eine ID und in css.style wurde der Div ID mit einer Hintergrundfarbe belegt.

Hab daß nachgebaut und funktioniert nicht..............grübel grübel........weiß nicht was ich faslch gemacht habe..........Kann mir bitte jemand helfen

Bei der css datei ist es doch egal an welcher Stelle ein Befehl steht oder etwa nicht?

hier mein Beispiel Code

html 5

HTML

<!DOCTYPE html>
<html>




<head>
  <title>Aktuelles</title>




  <meta charset="UTF-8"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <meta name="keywords" content=""/>
  <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"/>




  <link href="style.css" type="text/css" rel="stylesheet"/>
</head>




<script>
  document.createElement ("header");
  document.createElement ("nav");
  document.createElement ("section");
  document.createElement ("footer");
</script>




</header>
<div id="test1" >




  <nav>
    <ul>
      <li> <a href="index.html" >Startseite </a> </li>
      <li> <strong>Aktuelles</strong> </li>
      <li> <a href="gaestebuch.html" >Gästebuch </a> </li>
      <li> <a href="Impressum.html" >Impressum </a> </li>
    </ul>
  </nav >




  <section >
    +Hier kannst du immer sehen was es neues gibt.
    text
  </section >




</div>




<footer>

Alles anzeigen

wolf · 2. April 2014

Hallo
-Du machst kein body tag auf/zu .. das gehört sich aber
-der html Tag wird nicht geschlossen
-Wieso arbeitest du mit javascript?!
Und ohne dein css code, kann dir hier niemand sagen, wieso es net geht

Und beim lernen arbeitet es sich wirklich besser wenn du deine Elemente selbst codest..!

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Aktuelles</title>
    <meta charset="UTF-8"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"/>
    <link href="style.css" type="text/css" rel="stylesheet"/>
    <style>
        #test1{
            background-color: #555555;
        }
    </style>
</head>
<body>
    <div id="test1">
        <header>
            <nav>
                <ul>
                    <li> <a href="index.html" >Startseite </a> </li>
                    <li> <strong>Aktuelles</strong> </li>
                    <li> <a href="gaestebuch.html" >Gästebuch </a> </li>
                    <li> <a href="Impressum.html" >Impressum </a> </li>
                </ul>
            </nav >
        </header>
        <section>
            <p>
                Text, Text, Text [...]
            </p>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Alles anzeigen

Ungetestet, aber ich bin mir sicher das es geht

andreas71 · 2. April 2014

erstmal Danke für deine Antwort

wieso meinst Du dass ich keinen Body tag auf und zu mache

habe doch <body> und unten dann wieder </body> oder meinst du da was anderes?

und dass mit ( Wieso arbeitest du mit javascript?! ) verstehe ich auch nicht

ich habe gelernt daß ich HTML5 und UTF-8 für Html codes und CSS für Grafik angelegenheiten anwende

oder gibts da noch was?

ich weiß gar nicht was ein javascript ist )

wolf · 2. April 2014

Ich sehe kein <body> in deinem Code

J(ava)S(cript) ist das hier:

JavaScript

<script>
  document.createElement ("header");
  document.createElement ("nav");
  document.createElement ("section");
  document.createElement ("footer");
</script>

Wenn du mal dein CSS hier rein stellst, werden wir den Fehler finden

Edit:

~~Das kannst du getrost löschen und durch mein Code an den Stellen ersetzen.~~ Es wird damit erreicht, das auch alte Browser wie IE 6, das CSS anwenden können, allerdings würde ich an deiner Stelle Abwägen ob deine Zielgruppe der Seite, anfällig ist, alte Browser zu haben oder ob du davon ausgehen kannst, das, neue Versionen verwendet werden.
Wenn neue Browser --> Zum Lernen Hilft es, wenn du den Code Komplett Selber Schreibst, so wie in meinem Beispiel.

lauras · 3. April 2014

Es macht durchaus schon noch Sinn, die Elemente für die alten IE versionen anzumelden, damit dieser nicht alles zerhaut, allerdings gibt es dafür schon zusammenfassende Skripte, die man einfach einbinden kann (siehe hier).

andreas71 · 3. April 2014

So sieht meine CSS Seite aus und heßt style.css

CSS

* {
  margin: 0px;
  padding: 0px;
}




#test1{
  background-color: #FF00FF;
}




header, nav, section, footer {
  display: block;
}




header {
  font-size: 20px;
}




nav {
  font-size: 30px;
  float: left;
  font-size: 1.5em;
  background-color: #000000;
  width: 300px;
}




nav strong, a {
  text-decoration: none;
  border-top: 1px solid black;
  display: block;
  padding: 6px 6px 6px 4px
}




nav strong {
  background-color: #FF00FF;
  color: white;
}




  nav a:hover {
  background-color: #0000FF;
  color: white;
}




nav ul {
  border-bottom: 1px solid black
}




section {
  font-size: 80px;
  float: left;
  margin-left: 50px;
  background-color: #008000;
}




footer {
  font-size: 3px;
  margin-top: 20em;

Alles anzeigen

@ Wolf.......Du hast mir geschrieben daß ich deinen Script Code für den Headbereich haben kann oder hab ich daß falsch verstanden....denn ich habe keinen Code von Dir gelesen oder würdest du Mir den bei Bedarf aufschrei9ben.
daß wäre sehr nett von Dir und Danke schon mal im vorraus:)

The Scout · 3. April 2014

So, melde ich mich hier auch mal
Und am Anfang zwei Tipps
1) Zum Forum: Über dem Eingabefeld, zweite Zeile, ganz rechts, viele dunkelgraue Buttons, auf einem steht "CSS". Bitte nutzen
2) Zum Code: Dieser wird wesentlich übersichtlicher, wenn man ordentlich einrückt. Hier mal dein Code, anders eingerückt, im BB Code und mit Kommentaren:

CSS

* {
    margin: 0px;
    padding: 0px;
}




#test1 {
    background-color: #FF00FF;
}




header {
    font-size: 20px; /* Relative Angaben, wie % oder em, sind meist besser */
}




nav {
    font-size: 30px;
    float: left;
    font-size: 1.5em; /* Warum zwei Font-sizes? Das hier ist übrigens die gültige. */
    background-color: #000000;
    width: 300px;
}




nav strong {
    background-color: #FF00FF;
    color: white;
}




nav strong, a {
    text-decoration: none;
    border-top: 1px solid black;
    display: block;
    padding: 6px 6px 6px 4px; /* Semikolon fehlte, zwar optional da Ende, aber trotzdem besser */
}




nav a:hover {
    background-color: #0000FF;
    color: white;
}




nav ul {
    border-bottom: 1px solid black; /* Semikolon fehlte */
}




section {
    font-size: 80px; /* Das ist extrem groß... */
    float: left;
    margin-left: 50px;
    background-color: #008000;
}




footer {
    font-size: 3px; /* Wieder, relativ ist besser, außerdem sind 3px ziemlich klein */
    margin-top: 20em;
} /* Schlussklammer eingefügt */

Alles anzeigen

Meine Vermutung: Dein Footer sollte lila sein, dein Header mit Nav weiß, bis auf den aktuellen Link, und deine Section dunkelgrün. Hab ich recht? Oder zumindest die Farbaufteilung sollte so sein, die Farben garantiere ich nicht
Warum vermute ich das? Dein HTML Code ist schichtenweise aufgebaut. Zuunterst hast du deine div Schicht "test1", welche lila BG hat. Dann kommt oben dein Header drüber. Der überschreibt noch nix. Im Header ist aber auf der gesamten Fläche das Nav, welches seinen weißen BG über den lila BG des "test1" drüberlegt. Daher weiß. Das selbe Prinzip bei section und footer, aber da footer keine eigene BG Color hat, sieht man die Color des drunterliegenden Bereichs, in diesem Fall dein "test1".

Ein gute Möglichkeit das zu visualisieren bietet der Firefox: [Umschalt] + [F2] und dann tilt open eingeben und per Enter bestätigen.
Schließen dementsprechend mit tilt close

wolf · 3. April 2014

Also lauras, mein IE 1.5 mach das mit den html5 Tags einwandfrei....

andreas71 · 3. April 2014

Danke Scout für Deine Antwort.

Meine Codes werde ich in Zukunft in Quellcode schreiben

Und wegen CSS Code Seite habe ich folgende Frage...........Ist es denn wichtig an welcher Stelle ein CSS Befehl steht.......ich dachte daß es egal sei weil die HTML Seite sich die Infos von jeder Stelle auf der CSS Seite aus zieht.

Werde auf jeden Fall es umändern, sobald ich wieder Zuhause bin.

Vielen Dank an Dich und auch an Alle Anderen

The Scout · 4. April 2014

Jetzt wirds verwirrend

Die CSS Codeblöcke kann man beliebig im CSS File anordnen, da sie ihren Bezug ja immer mitnehmen. Bsp:

CSS

header { }
nav { }




/* Ist gleich wie */




nav { }
header { }

Alles anzeigen

ABER kommt ein Block zweimal vor, passiert das gleiche, wie beim nächsten beschriebenen:

Innerhalb dieser Blöcke darf man das nicht:

CSS

header {
    background: red;
    background: blue;
} /* Hintergrund ist blau */




header {
    background: blue;
    background: red;
} /* Hintergrund ist rot */

Alles anzeigen

Die Befehle werden immer von vorne nach hinten abgearbeitet, d.h., wenn der gleiche Befehl zweimal vorkommt, wird überschrieben. Genauso, wenn zwei Blöcke vorhanden sind.

Im HTML kommt es auf die Schachtelung an. Neue Tags innerhalb von anderen liegen praktisch über den umschließenden Tags, und verdecken damit auch etwaige Hintergrundfarben.

CSS

#block1 {
    background: red;
}




#block2 {
    background: blue;
}

HTML

<!-- Hintergrund ist blau -->
<div id="block1">
  <div id="block2">
  </div>
</div>




<!-- Hintergrund ist rot -->
<div id="block2">
  <div id="block1">
  </div>
</div>

Alles anzeigen

Soweit klar?
Richtig gemein wird es dann mit komprimierten CSS Befehlen (zB anstatt border-style, border-width, border-color einfach nur border) Und Schriftarten/-größen. Letztere zB überschreiben auch über CSS Codeblöcke hinweg. Aber das blicke ich selber manchmal nicht mehr

lauras · 4. April 2014

wolf: Da der IE 1.5 aber 0,0% Marktanteil hat ist er völlig irrelevant (falls du wirklich den originalen hast und keinen Emulator, welche zum Browser-Testen nie benutzt werden sollten). Relevant sind die noch unterstützten und noch in den Statistiken auftauchenden (der niedrigste dort ist momentan glaube 6).

wolf · 4. April 2014

Ja ich habe Original *-*
Ja, aber wei gesagt, die Zielgruppe machts

andreas71 && lauras

Habe hier mal Editiert und geschrieben: Beitrag 4

Zitat von wolf

~~Das kannst du getrost lö***** und durch mein Code an den Stellen ersetzen.~~ Es wird damit erreicht, das auch alte Browser wie IE 6, das CSS anwenden können, allerdings würde ich an deiner Stelle Abwägen ob deine Zielgruppe der Seite, anfällig ist, alte Browser zu haben oder ob du davon ausgehen kannst, das, neue Versionen verwendet werden.
Wenn neue Browser --> Zum Lernen Hilft es, wenn du den Code Komplett Selber Schreibst, so wie in meinem Beispiel.

andreas71 · 4. April 2014

An Wolf....wo steht den Dein Besipiel

An Scout.......was ist denn wenn ich in einem bestimmten Bereich mehrere Hintergrundfarben haben will. Zum beispiel für eine Schrift,den ganzen Bereich und noch eine andere Schrift. kann ich dann nicht shcreiben einmal Section Klammer auf und Zu, dann Section h1 klammer auf und zu, usw. ( aslo in der CSS Datei ?

wolf · 5. April 2014

Naja, im verlinkten Beitrag von mir

Wie meinst du das, mit den verschiedenen Farben?

HTML

<body>
    <h1>Eine Überschrift</h1>
    <section>
        <h2>Noch Eine</h2>
        <p>Seeeeehr viel Text.</p>
    </section>
</body>

CSS

/* Allen Elementen einen padding zuweisen */
*{
    padding: 40px;
}
/* Body standarts setzen */
body{
    background-color: black;
    /* Schriftfarbe weiß */
    color: #FFF;
    font-size: 30px;
}
h1{
    background-color: red;
}
section{
    background-color: yellow;
    font-family: andere_Schrift;
}
h2{
    background-color: blue
}
/* Nur p-Elemente, die in einem section-Tag stehen */
section p{
    background-color: orange;
    /* Schrift Farbe rot */
    color: red;
    font-family: arial sans-serif;
}

Alles anzeigen

Erzeugt ungefähr sowas:

andreas71 · 8. April 2014

Vielen Dank für Dein Beispiel......probier ich gleichmal zuhause aus............vieleicht brauche ich dann den Div Bereich garnicht....lg

wolf · 8. April 2014

Nein, den brauchst du sicher nicht
Du kannst auch z.B. dein body nur 90% Breit machen o.ä.

andreas71 · 10. April 2014

weißt Du wie der Befehl heißt für Body 90% und noch eine andere Frage.......ich habe gesehen daß ich Torch als Browser auf dem Rechner habe und meine HP seiten immer unter Torch gespeichert wurden...kann es sein daß deßwegen Div Bereich nicht angezeigt wird ?

vielen Dank

lg
Andreas71

The Scout · 10. April 2014

Der Befehl ist ganz normales CSS:

CSS

body {
  width: 90%;
}

Und normalerweise werden HTML Dateien auch als .htm oder .html gespeichert und vom Browser nur interpretiert. Die Browser speichern eigentlich nix, allerdings kenne ich Torch nicht.
Wenn dir der div aber nicht angezeigt wird, hat Torch mMn ein akutes Problem bei der Darstellung von Webseiten, da heutzutage jede einzelne Seite irgendwo einen div verbaut hat. Oder doch zumindest 99.999...9%

Wenn allerdings dir von dir erstellten Dateien NICHT die Endung .htm .html oder .css bei Style tragen, dann ist sowieso was falsch (vermutlich dein Editor), dann musst du die Dateien konvertieren.

andreas71 · 11. April 2014

Nee alle meine Daten haben html Endung aber ich werde daß ganze nochmal an einem andren PC probieren und wenn ich dann immer noch daß Problem weiter sehen....weil mein PC sowieso etwas eigenartig ist.......Mauszeiger bewegt sich langsam weg ohne daß ich was mache...Und vielen dank für den Befehl....lg

wolf · 11. April 2014

Könntest du dein Problem evtl bei einem kostenlosen hoster wie z.B. Funpic hochladen?
Oder zu Not bei JSFiddle?
Das macht es uns allen einfacher

Der festgelegte Div Bereich reagiert nicht auf hinterlegte Backroundcolor

Jetzt mitmachen!

Teilen