HTMLNOOB: Problem mit HTML+ CSS

SELF-Forum

Problem mit HTML+ CSS

HTMLNOOB
– Informationen zu den Bewertungsregeln

Hallo!

Ich versuche seit kurzem selber eine Seite zu erstellen und habe 0 Ahnung vom programmieren.

Ich habe diesen Effekt probiert aber irgendwie ist da was schief gelaufen.

Gestern ging es noch..keine Ahnung vermutlich etwas rausgelöscht oder nicht richtig abgespeichert.

Ich habe nur einen schwarzen Balken oben als Header fürs erste und einen Hintergrund.

Habe versucht so ein Pop-Out Menu mit Java zu erstellen aber wie gesagt..plötzlich funktioniert nichts mehr.

Könnt ihr eventuell die Fehler finden?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-utf-8">
    <title>Pop Out Menu</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

    <link rel="stylesheet" href="menu2.css">
    </head>
    <body>
        <div class="header">
        </div>


<div class="container"onclick="expand()">
    <div class="toggle" id="toggle">
        <i class="material-icons" id="add">
            add
        </i>
        </div>
    </div>

<div class="menu" id="menu">
        <div class="item">
             <a href="#">
                <i class="material-icons">home</i>
                </a>
             </div>
           </div>
    <div class="item">
             <a href="#">
        <i class="material-icons">notifications</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">mail</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">add_a_photo</i>
                </a>
             </div>
    <div class="item">
             <a href="#">
        <i class="material-icons">videocam</i>
        </a>
             </div>
        
    <div class="item">
             <a href="#">
            <i class="material-icons">search</i>
            </a>
    </div>
        
        <script type="text/javascript">
            var j=0;
            var i=document.getElementById("menu").childNodes;
            function expand(){
                if(j==0){
                document.getElementById("add").style.transform = 'rotate(45deg)';
                    document.getElementById("menu").style.transform = 'scale(1)';
                    i[1].style.transform='translateY(-160px)';
                     i[3].style.transform='translate(140px,-80px)';
                     i[5].style.transform='translate(140px,80px)';
                     i[7].style.transform='translateY(160px)';
                     i[9].style.transform='translate(-140px,80px)';
                     i[11].style.transform='translate(-140px,-80px)';
                    j=1;
                }
                
            else{
                document.getElementById("add").style.transform = 'rotate(0deg)';
                document.getElementById("menu").style.transform = 'scale(0.9)';
                    i[1].style.transform='translateY(0)';
                 i[3].style.transform='translate(0)';
                     i[5].style.transform='translate(0)';
                     i[7].style.transform='translateY(0)';
                     i[9].style.transform='translate(0)';
                     i[11].style.transform='translate(0)';
                j=0;
                }
                }

        </script>
    </body>
    </html>


body{
    background-color: #2a3a49;
    background: url(darkhoneycomb.png) no-repeat;
    background-size: cover;
    padding-bottom: 800px;
    margin: 0;
}

#left {
    position: absolute;
    top: 60%;
}

#right {
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 1;
}

nav {
    padding: 50px;
}
nav ul {
    list-style-type: none;
    float: right;
}
nav ul li {
    float: left;
}
nav ul li a {
    color: #000000;
    padding: 0 30px;
}

*{
    margin: 0;
    padding:0;
    list-style: none;
    text-decoration: none;
}
.header{
    width: 100%;
    height: 110px;
    display: block;
    background-color: #101010;
}

#logo {
    font-size: 2em;
}
.container {
    text-align: center;
    width: 60%;
    margin: 110px auto;
}

h1 {
    font-size: 1.3em;
    line-height: 1.4em;
}
.container,.menu{
    height: 40px;
    width: 160px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
}
.menu{
    z-index: -1;
    transform: scale(0.9);
}
.toggle{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #FBD244;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
}
.toggle:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #f9d230;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
.item{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
    transition: 1s;
}
.item:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
#add{
    font-size: 100px;
    color: white;
    position: relative;
    top: 20px;
    right: 10px;
    transition: 1s;
}
a>.material-icons{
    color:#d2d2d2;
    font-size: 60px;
}
a{
    position: relative;
    top:40px;
    left: 10px;
}
a>.material-icons:hover{
    color:#f9d230;
    transform: scale(1.3);
      }
a{
    position: relative;
    top: 40px;
    left: 10px;
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit HTML+ CSS

    Rolf B (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo HTMLNOOB,

    deine item-divs sind nicht richtig geschachtelt.

    Bringe deine Einrückungen in Ordnung, dann siehst Du, wo.

    Den Standard-Rant von selfhtml kann ich Dir nicht ersparen: Dein Menü ist nicht bedienbar. Leg die Maus weg und probier mal, es zu öffnen. Das + muss ein Button sein (<button type="button">), den Du mit CSS zum Sechseck stylest. Im Button kannst Du dann dein material-Zeugs einsetzen.

    Für eine intensive Verbesserung deines Versuchs - so, dass Du auch was davon lernst - fehlt mir aber die Zeit.

    Rolf

    --
    sumpsi - posui - clusi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit HTML+ CSS

      HTMLNOOB
      – Informationen zu den Bewertungsregeln

      Danke für die rasche Antwort! Leider habe ich 0 Erfahrung mit HTML und CSS.. daher weiß ich leider auch nicht was du genau meinst mit einrücken.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit HTML+ CSS

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo HTMLNOOB,

        du weißt aber, dass es in HTML Tags gibt, die einen Bereich öffnen (z.B. <div>) , und andere, ähnlich aussehende, die diesen Bereich wieder schließen (</div>)?

        Wenn nicht, fang hier an und schau Dich dann im Rest des Tutorials um.

        Du hast beispielsweise geschrieben - und ich rücke das jetzt mal so ein wie es die Anfangs- und Ende-Tags nahelegen:

          <div class="menu" id="menu">
    <div class="item">
      <a href="#">
        <i class="material-icons">home</i>
      </a>
    </div>
  </div>
  <div class="item">
    <a href="#">
      <i class="material-icons">notifications</i>
    </a>
  </div>
  (... ein paar Zeilen lasse ich weg ...) 
  <div class="item">
    <a href="#">
      <i class="material-icons">search</i>
    </a>
  </div>
  <script...> (diesen Teil lasse ich auch weg) </script>
</body>

        Was Du da hast, ist ein div Element mit Klasse und ID "menu" (was doppelt gemoppelt ist, sich aber jetzt nicht ändern lässt, wenn du noch nicht weißt was du tust)

        Dieses menu-div beginnt in der ersten Beispielzeile und endet in der siebten. Es enthält ein weiteres div, diesmal mit Klasse "item" (von Zeile 2-6). In diesem div steht der Link (<a>...</a>) mit dem Home-Icon <i>...</i>. Das <i> Element wird hier falsch verwendet, es dient eigentlich anderen Zwecken, aber das machen viele Icon-Bibliotheken so.

        DIVs sind generische Rahmen für fast beliebige Inhalte. Mit Hilfe von class oder id werden sie identifizierbar.

        Genau das macht das Script. Da steht:

        var i=document.getElementById("menu").childNodes;

        document ist eine globale Variable in JavaScript. Sie enthält das Dokument-Objekt, das den Einstieg ins DOM (Document Object Model) bildet. document.getElementById ist eine so genannte Methode dieses Objekts. Unter Methoden versteht man kleine Funktionen, die zum Objekt gehören[1] und Daten zum Objekt liefern können, oder Werte darin verändern. getElementById ist eine Methode, die im Dokument ein HTML Element mit dieser ID sucht. Die Angabe ("menu") dahinter ist ein Parameter, vielleicht erinnerst Du Dich aus dem Matheunterricht an Funktionen und Parameter. document.getElementById("menu") sucht also im angezeigten Dokument ein Element mit der ID "menu". Dieses Element gibt es, das ist das <div>, von dem wir vorhin sprachen. Auch zu dem <div> gehört ein Objekt, auch in diesem Objekt gibt es Daten ("Eigenschaften" genannt) und Methoden. childNodes ist der Name einer bestimmten Datensammlung, die zum <div> gehört, und zwar findet sich darin eine Liste aller HTML Dinge, die dem <div> direkt untergeordnet sind. Weil dein menu-div bereits in Zeile 7 endet, ist da nur ein einziges Kind-Element drin: das item-div in Zeile 3. Diese childList ist nun das Ergebnis dieser Folge von Funktionsaufrufen, und sie wird in einer neuen Variablen namens i gespeichert.

        Dummerweise besteht HTML aus mehr als nur Elementen. Der andere Bestandteil ist Text. Text ist alles, was nicht zwischen spitzen Klammern steht. Und darum enthält childList mehr als nur einen Eintrag. Es gibt noch zwei Textknoten, nämlich die beiden Leerräume vor und hinter dem item-div. Es wäre besser gewesen, hier statt childNodes die Eigenschaft children zu nehmen, die enthält die Textknoten nämlich nicht.

        Wenn Du nun weiterschaust im JavaScript, dann wird da eine Funktion bereitstellt: expand. Diese Funktion wurde im HTML über das onclick-Attribut als Ereignisbehandler festgelegt, d.h. wenn Du auf das toggle klickst, wird expand aufgerufen.

        Die Variable i ist zwar außerhalb der expand-Funktion erzeugt wurden, aber JavaScript-Programmteile sind ähnlich geschachtelt wie HTML Elemente. Dein Script erzeugt 3 Dinge: eine Variable j, eine Variable i und eine Funktion expand. Alle drei Dinge haben den gleichen Rahmen, in dem sie erzeugt wurden, und darum können die Befehle in der expand-Funktion die Variablen i und j sehen und benutzen. Das ist jetzt sehr vereinfacht, das Thema Sichtbarkeit und Lebensdauer von Werten ist kompliziert.

        Jedenfalls greift die expand-Funktion auf i zu, und ergänzt i um eine Angabe in eckigen Klammern. So etwas macht man dann, wenn man eine Sammlung von Werten vorliegen hat. Die childList Variable von oben liefert eine Sammlung aller Kindobjekte, mit keinem, einem oder mehreren Einträgen drin. Die Zählung beginnt bei 0, d.h. i[1] bezeichnet das zweite Kind des menu-div. Das ist das, was ich eben erwähnte: Der Leerraum zwischen <div id="menu"> und <div class="item"> ist ein Textknoten und steht in der childList mit drin.

        Dir wir auffallen, dass in Folge auf noch viel höhere Nummern zugegriffen wird. Und da ist das Problem, denn deine HTML Struktur gibt das nicht her. Das </div> in Zeile 7 beendet die Liste der Items viel zu früh. Du möchtest eigentlich, dass alle <div class="item">...</div> Gruppen Kinder des menu-div sind. Wenn Du das änderst, wird es besser.

        Allerdings möchte ich Dich davor warnen, hier nun täglich mit neuen Fragen aufzukreuzen, ohne selbst etwas zu lernen. Damit erzeugst Du nur Frust, bei Dir uns uns. Ich habe jetzt eine Stunde lang für Dich geschrieben - nur aus Freundlichkeit. Beschäftige Dich mit den HTML- und CSS Texten in unserem WIKI, damit Du verstehst, was Du eigentlich tust. Du brauchst Geduld und Beharrlichkeit. HTML, CSS, JavaScript - das ist ein komplexes und umfangreiches Thema.

        Rolf

        --
        sumpsi - posui - clusi

        1. Was unpräzise ist - sie gehören zur KLASSE des Objekts. Aber ich will jetzt nicht zu detailliert werden ↩︎

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln