# Float box design + script fehler suche.



## Andrin.Spitzer (31. März 2020)

Hay ich hatte erst gerade einen guten Beitrag hier im Forum wollte nun aber nach Überarbeitung des Quellcode nun neu anfangen.

Alter Beitrag

Meine Website

Was ich wissen möchte ist:

-Ist der Code so sauber und Regel komm-form? (bin Anfänger)
-Warum funktioniert mein Parralax scrolling effect nicht mehr.
-warum ändert die Nav leiste die Farbe nicht mehr und wie sollte ich sie fixieren am oberen ende?
-und wie bekomme ich mein Kontaktformular und download bereich etwa so hin.



-und einfach mal gefragt wäre es möglich die <h1> elemente transparent zu gestalten das die schrift durch das weiße div Element das Hintergrundbild scheint?



Freundliche Grüsse


----------



## Sempervivum (1. April 2020)

Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.

Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.


----------



## Andrin.Spitzer (1. April 2020)

Sempervivum hat gesagt.:


> Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
> Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.
> 
> Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.



Hay danke für die antwort. 

Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.


----------



## Andrin.Spitzer (1. April 2020)

Andrin.Spitzer hat gesagt.:


> Hay danke für die antwort.
> 
> Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.


Ps: habe viel fon die gelernt. Wie du siehst habe ich deinen input soweit ich es hinbekommen habe widerverwendet.


----------



## Sempervivum (1. April 2020)

> Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.


Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.


----------



## Sempervivum (1. April 2020)

Javascript funktioniert so:

```
(function () {
        var parallax = document.querySelectorAll("body"),
            speed = -0.2;
        var vnav = document.querySelector('nav'),
            deltaScrollPos = 50;
        window.addEventListener('scroll', () => {
            var scrollPos = document.documentElement.scrollTop;
            [].slice.call(parallax).forEach(function (el, i) {
                var elBackgrounPos = "10% " + (scrollPos * speed) + "px";
                el.style.backgroundPosition = elBackgrounPos;
            });
            if (scrollPos < deltaScrollPos)
                vnav.classList.remove('scrolled');
            else
                vnav.classList.add('scrolled');
        });
    })();
```


----------



## Sempervivum (1. April 2020)

Und mein Entwurf für das Kontakt-Layout:


```
.container-contact {
                display: flex;
            }

            .container-contact>div.left {
                flex: 2;
                display: grid;
                grid-template-columns: 1fr 2fr;
                grid-template-areas: "heading-text heading-text"
                    "name  message"
                    "email  message"
                    "phone message";
            }

            .container-contact>div.right {
                flex: 1;
            }

            .heading-text {
                grid-area: heading-text;
            }

            #name {
                grid-area: name;
            }

            #email {
                grid-area: email;
            }


            #phone {
                grid-area: phone;
            }

            #message {
                grid-area: message;
            }
```


```
<div class="container-contact">
            <div class="left">
                <p class="heading-text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <input name="name" id="name" placeholder="Name*" />
                <input name="email" id="email" placeholder="E-Mail*" />
                <input name="Tel" id="phone" placeholder="Tel" />
                <textarea name="text" id="message" placeholder="Nachricht..."></textarea>
            </div>
            <div class="right">

            </div>
        </div>
```
Den rechten Container kannst Du dann selbst versuchen.


----------



## Andrin.Spitzer (1. April 2020)

Sempervivum hat gesagt.:


> Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
> Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.



Hay danke für die hilfe. 

Was sagst du sonst zum gerüst meiner seite? Besser wie der vorgänger?


----------



## Andrin.Spitzer (1. April 2020)

Hay habs hoch geladen.

Die Nav bar ist so aber noch nicht fix und das parralax funktioniert auch nicht richtig.


----------



## Sempervivum (1. April 2020)

Doch, das Parallax funktioniert, wenn man genau hinsieht. Damit der Effekt kräftiger wird, kannst Du den Faktor erhöhen:

```
var parallax = document.querySelectorAll("body"),
            speed = -0.5; // <-- hier
```


----------



## Sempervivum (1. April 2020)

> Die Nav bar ist so aber noch nicht fix


Das liegt daran, dass jetzt body gescrollt wird und nicht main. Für einen fixierten Header gibt es zwei Möglichkeiten:
1. So wie wir es vorher hatten: Scrolling nur auf main. Vorteil: Das ganze Layout passt sich automatisch an, wenn sich die Höhe des Header ändert und ist damit responsiv. Nachteil: Es ist ungewohnt, dass die Scrollbar nur über main geht; aber auf der anderen Seite auch logisch, weil die Navbar ja gar nicht gescrollt wird.
2. Die althergebrachte Lösung: Nav mit `position: fixed;` fixiert. Damit sie dann nicht die anderen Inhalte überdeckt, muss man dem main ein festes margin-top geben. Darin besteht auch der Nachteil dieser Lösung: Sie ist nicht responsiv, denn wenn sich die Höhe der Navbar ändert, passt sich dieses Margin nicht an.


----------



## Andrin.Spitzer (1. April 2020)

Sempervivum hat gesagt.:


> Das liegt daran, dass jetzt body gescrollt wird und nicht main. Für einen fixierten Header gibt es zwei Möglichkeiten:
> 1. So wie wir es vorher hatten: Scrolling nur auf main. Vorteil: Das ganze Layout passt sich automatisch an, wenn sich die Höhe des Header ändert und ist damit responsiv. Nachteil: Es ist ungewohnt, dass die Scrollbar nur über main geht; aber auf der anderen Seite auch logisch, weil die Navbar ja gar nicht gescrollt wird.
> 2. Die althergebrachte Lösung: Nav mit `position: fix;` fixiert. Damit sie dann nicht die anderen Inhalte überdeckt, muss man dem main ein festes margin-top geben. Darin besteht auch der Nachteil dieser Lösung: Sie ist nicht responsiv, denn wenn sich die Höhe der Navbar ändert, passt sich dieses Margin nicht an.


Achso etz verstehe ich das. Ich mache es wider wie vorher also ich probieres selber al haha


----------



## Andrin.Spitzer (2. April 2020)

Hay. Ich weiß nicht was ich falsch mache. Kriegs einfach ned hin mit dem parralax. (code auf der website ist aktuell).

habe deinen alten Beitrag angeschaut und verstehe das so dass sich alles im script nich auf eine id oder class sondern aufs element bezieht. also müsste ich doch keine klasse zuweisen?


```
(function () {
            var parallax = document.querySelectorAll("body"),
                speed = -0.8;
            var vnav = document.querySelector('nav'),
                deltaScrollPos = 10;
            // main ist doch ned auf class="main" sondern <main> bezogen?:
            vmain = document.querySelector('main');
            vmain.addEventListener('scroll', () => {
                var scrollPos = vmain.scrollTop;
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (scrollPos * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
                if (scrollPos < deltaScrollPos)
                    vnav.classList.remove('scrolled');
                else
                    vnav.classList.add('scrolled');
            });
        })();
```


----------



## Sempervivum (2. April 2020)

> verstehe das so dass sich alles im script nich auf eine id oder class sondern aufs element bezieht.


Genau, es wird nur der Tagname als Selektor benutzt, keine Klasse und keine ID. Für das Parallax ist diese Zeile maßgeblich:
`vmain = document.querySelector('main');`
Dort wird die Scrollposition abgefragt und dort muss gescrollt werden.


----------



## Andrin.Spitzer (2. April 2020)

Sempervivum hat gesagt.:


> Genau, es wird nur der Tagname als Selektor benutzt, keine Klasse und keine ID. Für das Parallax ist diese Zeile maßgeblich:
> `vmain = document.querySelector('main');`
> Dort wird die Scrollposition abgefragt und dort muss gescrollt werden.



also dann habe ich das richtig verstanden. was habe ich denoch  falsch das es nicht funktioniert?

Kurtz ne frage zwischen durch würde es nicht mehr sin machen anstatt die container einzeln zu zentrieren einfach dem main bzw section vorgeben alles zu zentrieren was drin ist?

und brauche ich überhaupt ein main und eine section?


----------



## Sempervivum (3. April 2020)

> Kurtz ne frage zwischen durch würde es nicht mehr sin machen anstatt die container einzeln zu zentrieren einfach dem main bzw section vorgeben alles zu zentrieren was drin ist?


Selbstverständlich, mit

```
main {
    display: flex;
    flex-directon: column;
    align-items: center;
}
```
kannst Du sie problemlos zentrieren.


----------



## Sempervivum (3. April 2020)

> brauche ich überhaupt ein main und eine section?


Nein, brauchst Du nicht, main ist ausreichend. Und dann dem main ein `overflow-y: scroll;` geben, dann sollte es auch mit dem Javascript funktionieren.


----------



## Andrin.Spitzer (3. April 2020)

Sempervivum hat gesagt.:


> Nein, brauchst Du nicht, main ist ausreichend. Und dann dem main ein `overflow-y: scroll;` geben, dann sollte es auch mit dem Javascript funktionieren.



Funktioniert.

Weiist du warum die % sicher anderst bei meinen h1 verhalten wie die div?


----------



## Sempervivum (3. April 2020)

Bei deinen h1 sehe ich nichts mit %.


----------



## Andrin.Spitzer (3. April 2020)

Hier die max width 

```
h1 {
             text-align: center;
            padding: 1em;
            width: 100em;
            max-width: 60%;
            font-family: Bahnschrift SemiBold;
            font-size: 4em;
            font-weight:900;
            text-transform: uppercase;
            letter-spacing: 0.5em;
            mix-blend-mode: screen;
            margin: 0em auto;
            background-color: rgba(255,255,255,1.00);
}
```


----------



## Sempervivum (3. April 2020)

OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:


----------



## Andrin.Spitzer (4. April 2020)

Sempervivum hat gesagt.:


> OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:
> Anhang anzeigen 66338



Musste auch die cookies löschen das ich es sehen konnte. 

Hay. Das sehe ich auch so aber mein problem ist das wen ich den code so habe (schreib fom handy daher kein original code) 


```
<main>
<h1>wen ich diesem h1 tag die selben 50 css werte gebe als width und max width</h1>

<div class="content">ist das nicht die selbe vreite wie wenn ich den n 1:1 selben code also width und max width diesem div gib</div>
</main>
```


----------



## Sempervivum (4. April 2020)

Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:


In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.


----------



## Andrin.Spitzer (4. April 2020)

Sempervivum hat gesagt.:


> Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:
> Anhang anzeigen 66339
> 
> In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.



Achso das wusste ich ned. 

Könntest du mir den code wie du es angepasst zeigen?


----------



## Sempervivum (4. April 2020)

Gern:

```
h1 {
    text-align: center;
    padding: 2em;
    width: 30em;
    /* max-width: 60%; */
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
}

.content {
    margin: 4em auto;
    padding: 2em;
    width: 30em;
    /* max-width: 80%; */
    background-color: whitesmoke;
    border: 2px solid red;
}
```


----------



## Andrin.Spitzer (4. April 2020)

Sempervivum hat gesagt.:


> Gern:
> 
> ```
> h1 {
> ...



Danke schön. 

Wie findest du den code so? Was könnte ich besser machen?


----------



## Andrin.Spitzer (5. April 2020)

Was würdest du machen um die ganze seite noch responsive zumachen.


----------



## Andrin.Spitzer (8. April 2020)

Hay. Komme gut Dank deiner hilfe voran. 
Allerdings kamm mir die frage wie ich den Text der navbar responsive machen kann. Habe mit % und vh probiert jedoch endet das bicht gut verallem bei grossen monitoren


----------



## Sempervivum (8. April 2020)

I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.


----------



## Andrin.Spitzer (8. April 2020)

Sempervivum hat gesagt.:


> I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
> Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.




Hay. Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross. So ist es bei grossen monitoren kein problem das stimmt.

Ich habe mich da etwas infomiert und bereits ne idee ausgedacht, deine meinung würde mich interessieren. 

Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird. 

Wen ich ihn antippe giptves ein popup menu mit den buttons das sich nach betötigen wider schliesst.


----------



## Sempervivum (8. April 2020)

> Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross.


Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?



> Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird.


Das wäre genau das, was ich oben auch meinte. Ein Burger Menü ist sehr verbreitet und bewährt und jeden Benutzer kennt es. Kann ich empfehlen.


----------



## Andrin.Spitzer (8. April 2020)

Sempervivum hat gesagt.:


> Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?



Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten. aber wenn ich das mit dem burger mache ist dieses problem so oder so aus der welt.


----------



## Sempervivum (8. April 2020)

> Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten.


Ich kann mich auch an so etwas erinnern, aber finde den Thread nicht wieder. An einen Einwand wegen Benutzerfreundlichkeit kann ich mich nicht erinnern. Hast Du den Thread noch zur Hand?


----------



## Andrin.Spitzer (8. April 2020)

Hay hab da was gefunden un bereits etwas angepasst.

Wie kann ich nun die standart nav durch diese ersetzten?



```
<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
  </div>
</nav>
```


```
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
 
  z-index: 1;
 
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
 
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
 
  cursor: pointer;
 
  opacity: 0;
  z-index: 2;
 
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
 
  background: #cdcdcd;
  border-radius: 3px;
 
  z-index: 1;
 
  transform-origin: 4px 0px;
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
 
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
```


----------



## Andrin.Spitzer (8. April 2020)

Sempervivum hat gesagt.:


> Ich kann mich auch an so etwas erinnern, aber finde den Thread nicht wieder. An einen Einwand wegen Benutzerfreundlichkeit kann ich mich nicht erinnern. Hast Du den Thread noch zur Hand?


----------



## Sempervivum (8. April 2020)

Benutzerfreundlichkeit: Das trifft natürlich zu, ich kann mich erinnern, dass mir sehr kleine Schriftgrößen früher auch unangenehm aufgefallen sind. Dies bezieht sich jedoch nicht auf die Umschaltung mit Mediaqueries, da dabei die Schrift ja nicht beliebig klein wird sondern so, wie Du es für die kleinste Viewport-Breite festlegst.

Anpassung deines Menüs:
Dieses:

```
<ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
```
ist ja der Kern des Menüs und als erstes müsstest Du die Links und die Texte an deine Anforderungen anpassen. Und dann wieder mit CSS gestalten, so dass es so aussieht wie früher. Es sollte möglich sein, dein eigenes CSS von dem vorigen Stand dafür zu verwenden.


----------



## Andrin.Spitzer (8. April 2020)

Sempervivum hat gesagt.:


> ```
> <ul id="menu">
> <a href="#home"><li>Home</li></a>
> <a href="#team"><li>Team</li></a>
> ...



Hay ich komme etzt nicht richtig nach was du damit meinst das ist dan das burger menu das bei dem kleinen bildschirm bzw handy anstatt der standart nav erscheint.


----------



## Sempervivum (8. April 2020)

Das Menü selber ist ein und das selbe, es wird nur variabel mit CSS gestaltet, d. h. breites Browserfenster: Menü ist immer sichtbar und horizontal angeordnet, d. h. so wie jetzt. Und schmales Browserfenster: Menü wird durch Tipp auf Burger sichtbar und ist vertikal angeordnet. Dazu brauchst Du dann ein abweichendes CSS.

Mir fällt gerade auf: Ein a-Tag direkt in einem ul ist nicht valide, Du musst es in das li verschieben:
`<li><a href="#home">Home</a></li>`


----------



## Andrin.Spitzer (8. April 2020)

Achso du meinst das ich muss nicht ein 2tes menu erstellen das dass andere ersetzt sondern einfach ein 2tes css design das bei zu kleinem bild eingreift?


----------



## Sempervivum (8. April 2020)

Ja genau. Wenn Du das Menü zwei Mal hättest, müsstest Du ja auch zwei editieren, wenn sich mal etwas ändert.


----------



## Andrin.Spitzer (8. April 2020)

Wie macht man das dass sich die css ändert?


----------



## Sempervivum (8. April 2020)

Bist Du darauf noch nicht gestoßen? Mit Mediequeries kannst Du CSS abhängig von der Breite des Browserfensters steuern:
https://wiki.selfhtml.org/wiki/CSS/Media_Queries#widthDas ist relativ vielschichtig, konzentriere dich auf width, max-width und min-width.


----------



## Andrin.Spitzer (8. April 2020)

Sempervivum hat gesagt.:


> Bist Du darauf noch nicht gestoßen? Mit Mediequeries kannst Du CSS abhängig von der Breite des Browserfensters steuern:
> https://wiki.selfhtml.org/wiki/CSS/Media_Queries#widthDas ist relativ vielschichtig, konzentriere dich auf width, max-width und min-width.


Habs mal angeschaut aber noch nicht verstanden wie ich das auf meine divs anwenden muss. 

Ich gucks an und melde mich wider


----------



## Andrin.Spitzer (8. April 2020)

Hay könntest du mir ein beispiel machen wie ich den text durch das icon ersetzt bekomme alles was ich versuche funktioniert nicht.

Habe versucht mit dme zu arbeiten:Media Queris


----------



## Sempervivum (9. April 2020)

Ich habe da mal eine Demo gemacht mit Umschaltung zwischen horizontaler Darstellung und der mit Burger und ein paar Erklärungen hinzu gefügt. Versuche, das auf deine Seite zu übernehmen.

```
<!DOCTYPE html>
<html>
<head>
    <title>Demo Hamburger</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        /* Gestaltung des Menues selber */
        nav {
            transition: background-color 0.6s;
            z-index: 99999;
            border-bottom: 1px;
            background-color: grey;
        }
        nav.scrolled {
            background-color: black;
        }
        ul {
            margin: 0px auto;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            font-size: 1.5em;
        }
        li {
            position: relative;
            padding: 15px 0;
            display: flex;
            align-items: center;
        }
        a {
            color: white;
            text-decoration: none;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
        }
        a:after {
            bottom: 0;
            content: "";
            display: block;
            height: 2px;
            left: 50%;
            position: absolute;
            background: white;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
            border-radius: 10px;
        }
        a:hover:after {
            width: 100%;
            left: 0;
        }
        /* Gestaltung des Hamburger-Symbols */
        label.hamburger {
            display: block;
            position: relative;
            background: #555;
            width: 75px;
            height: 50px;
            margin-left: 0;
            border-radius: 4px;
            transition: border-radius .5s;
            z-index: 500;
            /* Hamburger-Symbol unsichtbar machen */
            display: none;
        }
        input.hamburger {
            display: none;
        }
        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 55px;
            background: #fff;
            border-radius: 2px;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }
        .line:nth-child(1) {
            top: 12px;
        }
        .line:nth-child(2) {
            top: 24px;
        }
        .line:nth-child(3) {
            top: 36px;
        }
        input.hamburger:checked~label.hamburger .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }
        input.hamburger:checked+label.hamburger .line:nth-child(2) {
            opacity: 0;
        }
        input.hamburger:checked+label.hamburger .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }
        /* Umschalten bei schmalem Viewport */
        @media screen and (max-width: 800px) {
            /* Hamburger sichtbar machen */
            label.hamburger {
                display: inline-block;
            }
            /* Navigation unsichtbar machen */
            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }
            /* Navigation sichtbar machen, wenn das Hamburger-Symbol gecheckt ist */
            input.hamburger:checked~ul {
                display: flex;
            }
        }
    </style>
</head>
<body>
    <nav>
        <!-- HTML fuer das Hamburger-Symbol -->
        <input type="checkbox" class="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
        <!-- HTML fuer die Navigation -->
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#team">Teilnehmer</a>
            </li>
            <li>
                <a href="#register">Anmelden</a>
            </li>
            <li>
                <a href="#sponsoren">Partner</a>
            </li>
        </ul>
    </nav>
</body>
</html>
```


----------



## Andrin.Spitzer (9. April 2020)

Sempervivum hat gesagt.:


> Ich habe da mal eine Demo gemacht mit Umschaltung zwischen horizontaler Darstellung und der mit Burger und ein paar Erklärungen hinzu gefügt. Versuche, das auf deine Seite zu übernehmen.
> 
> ```
> <!DOCTYPE html>
> ...



Hay. das sieht mal ned schlecht aus. wen ich das richtig sehe ist das aber noch ohne funktion zum anzeigen der links?


----------



## Sempervivum (9. April 2020)

Genau, das ist die nackte Navitation und weil es auf dieser Demoseite keine Inhalte gibt, passiert nichts, wenn man auf einen Link klickt. Du musst das Ganze in deine Seite übernehmen.


----------



## Andrin.Spitzer (9. April 2020)

-Hab bereits in meine seite eingebaut. ich sehe bei kleinem Fenster das Menu das ist schon gut jedoch hat es noch keine Funktion.

Ich habe jetzt verstanden warum du nicht viel von meiner Idee des Kontaktformular hälst klappt einfach nicht sauber habe mich daher kreative bemüht und es anders gestaltet. jedoch stellt sich mir nun dort die frage 
-wieso der senden Button nicht gleich breit wie der Rest ist trotz selben Einstellungen 
und 
-wieso sind beide container nicht gleich breit wie alle anderen (h1, div content etc)


----------



## Sempervivum (9. April 2020)

Mein Fehler, da hatte ich nachträglich ein wenig verschönert und einen Fehler eingebaut. Das Label braucht die ID "hamburger":

```
<!-- HTML fuer das Hamburger-Symbol -->
        <input type="checkbox" class="hamburger">
        <label for="hamburger" class="hamburger" id="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
```


----------



## Sempervivum (9. April 2020)

> Ich habe jetzt verstanden warum du nicht viel von meiner Idee des Kontaktformular hälst klappt einfach nicht sauber habe mich daher kreative bemüht und es anders gestaltet.


So gefällt es mir auch wesentlich besser.


> wieso der senden Button nicht gleich breit wie der Rest ist trotz selben Einstellungen


Deine Einstellungen sind zwar gleich aber in den Einstellungen des Useragent bzw. den Defaultwerten des Browsers gibt es einen Unterschied: Dort hat ein Input vom Typ "submit" die Eigenschaft `box-sizing: border-box;`. Füge ich das auch bei den anderen Inputs und der Textarea hinzu, sind sie gleich breit.


----------



## Sempervivum (9. April 2020)

> wieso sind beide container nicht gleich breit wie alle anderen (h1, div content etc)


Hier unterscheiden sich jetzt die Eigenschaften beider Container was margin, padding und width betrifft:

```
h1 {
    text-align: center;
    padding: 2em;
    width: 60em;
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
}

.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
}
```


----------



## Andrin.Spitzer (9. April 2020)

Cool danke. Werde es heute abend anwenden. 

Bin so dankbar für deine hilfe 

Wen das alles klappt hab ichs bald fertig denke ich  

Du hast bestimmt schon mein php für die kontakt form angeschaut. Das habe ich übernommen und ich habe mir die frage gestellt ob es möglich wäre eine sende bestätigung zu machen ohne das iwas neu geladen werden muss? Hab mal gesehen das der button zu einem häckchen wird geht das mit meinem php?


----------



## Sempervivum (9. April 2020)

PHP und Kontaktformulare sind nicht so mein Schwerpunkt, was mich aber nicht daran gehindert, schon einmal mit jemand eines zu entwickeln   


> ob es möglich wäre eine sende bestätigung zu machen *ohne das iwas neu geladen werden muss*?


Die Antwort lautet in solchen Fällen, dass Du das PHP-Skript über Ajax aufrufen musst, dann wird die Seite nicht neu geladen.


----------



## Andrin.Spitzer (9. April 2020)

Sempervivum hat gesagt.:


> PHP und Kontaktformulare sind nicht so mein Schwerpunkt, was mich aber nicht daran gehindert, schon einmal mit jemand eines zu entwickeln
> Die Antwort lautet in solchen Fällen, dass Du das PHP-Skript über Ajax aufrufen musst, dann wird die Seite nicht neu geladen.



Ich habe sogar keine ahnug was ajax ist


----------



## Andrin.Spitzer (9. April 2020)

Sempervivum hat gesagt.:


> Hier unterscheiden sich jetzt die Eigenschaften beider Container was margin, padding und width betrifft:
> 
> ```
> h1 {
> ...



Verstehe ich nicht.  beide haben die selbe breite und werden gleich zentriert?


----------



## Andrin.Spitzer (9. April 2020)

Sempervivum hat gesagt.:


> Ich habe da mal eine Demo gemacht mit Umschaltung zwischen horizontaler Darstellung und der mit Burger und ein paar Erklärungen hinzu gefügt. Versuche, das auf deine Seite zu übernehmen.
> 
> ```
> <!DOCTYPE html>
> ...



Funktioniert iwie ned


----------



## Sempervivum (9. April 2020)

> Verstehe ich nicht. beide haben die selbe breite und werden gleich zentriert?


Sie haben die selbe Breite aber der eine hat ein padding von 2em und der andere nicht. width gibt die innere Breite ohne padding an. Der Bereich mit padding nimmt aber die Hintergrundfarbe ebenso wie der innere Bereich an. Daher ist das Element vom sichtbaren Eindruck her größer.


----------



## Sempervivum (9. April 2020)

> Funktioniert iwie ned


Der Grund ist der, den ich in #49 genannt habe: Das Label braucht auch die ID "hamburger".


----------



## Andrin.Spitzer (10. April 2020)

Sempervivum hat gesagt.:


> Sie haben die selbe Breite aber der eine hat ein padding von 2em und der andere nicht. width gibt die innere Breite ohne padding an. Der Bereich mit padding nimmt aber die Hintergrundfarbe ebenso wie der innere Bereich an. Daher ist das Element vom sichtbaren Eindruck her größer.



Hay aber das würde ja heissen wen ich bei dem anderen element ebenfalls psdding mit 2 em hinzufüge müsste es gleich sein abr das ist es nicht


----------



## Sempervivum (10. April 2020)

Ich habe das mal mit dem Container mit dem Kontaktformular getestet, der ja schmaler ist als die Überschriften. Füge ich das padding hinzu, ist erst Mal nichts zu erkennen. Aber der HTML-Inspektor zeigt das padding an. Mache ich jedoch auch den Hintergrund weiß, sieht man auch, dass die Container gleich breit sind.

```
.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
    padding: 2em;
    background-color: white;
}
```


----------



## Andrin.Spitzer (10. April 2020)

Sempervivum hat gesagt.:


> Ich habe das mal mit dem Container mit dem Kontaktformular getestet, der ja schmaler ist als die Überschriften. Füge ich das padding hinzu, ist erst Mal nichts zu erkennen. Aber der HTML-Inspektor zeigt das padding an. Mache ich jedoch auch den Hintergrund weiß, sieht man auch, dass die Container gleich breit sind.
> 
> ```
> .wrapper-horizontal {
> ...


Danke


----------



## Andrin.Spitzer (10. April 2020)

Hay. Bin bald fertig bis auf content. 
Hab nur noch mit der funktion des burger menus zu kämpfen da und das die box mit dem ganzen kontakt etc sich nicht anpasst. 

Brauche abr noch ne idee. Habe versucht aud optischen Gründen den text mittiger in die box zu bekommen und am Desktop sieht dss auch ned schlecvt aus jedoch auf einem Smartphone stehen dan nur ca 5 Buchstaben auf einer linie. Wie wprdest du lösen?


----------



## Sempervivum (10. April 2020)

> das die box mit dem ganzen kontakt etc sich nicht anpasst.


Am einfachsten wäre das zu lösen, wenn Du den Überschriften links und rechts ein padding von 0 gibst und nur oben und unten die 2em.


----------



## Sempervivum (10. April 2020)

> Habe versucht aud optischen Gründen den text mittiger in die box zu bekommen und am Desktop sieht dss auch ned schlecvt aus jedoch auf einem Smartphone stehen dan nur ca 5 Buchstaben auf einer linie. Wie wprdest du lösen?


Ich nehme an, Du meinst da auch die Box mit dem Kontakt. Da ist es gängige Praxis, auf einem schmalen Bildschirm die beiden Boxen untereinander statt nebeinander anzuordnen. Das kannst Du ja mit einer Mediaquery umschalten, indem Du `flex-direction: column;` setzt.


----------



## Andrin.Spitzer (10. April 2020)

Sempervivum hat gesagt.:


> Ich nehme an, Du meinst da auch die Box mit dem Kontakt. Da ist es gängige Praxis, auf einem schmalen Bildschirm die beiden Boxen untereinander statt nebeinander anzuordnen. Das kannst Du ja mit einer Mediaquery umschalten, indem Du `flex-direction: column;` setzt.


Und das passt sich das auch gleich der breite an? Also das sie gleich breit sind wie der rest?


----------



## Sempervivum (10. April 2020)

Nein, das nicht, untereinander anordnen ist der erste Schritt, die Breite musst Du dann jeweils ebenfalls in der Mediaquery anpassen, so dass sie bei beiden gleich ist.


----------



## Andrin.Spitzer (11. April 2020)

Habe es so gemacht:


```
@media screen and (max-width: 800px) {
            /* Hamburger sichtbar machen */
            label.hamburger {
                display: inline-block;
            }
            /* Navigation unsichtbar machen */
            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }
            /* Navigation sichtbar machen, wenn das Hamburger-Symbol gecheckt ist */
            input.hamburger:checked~ul {
                display: flex;
            }
            
            .wrapper-horizontal {
                
            display: flex;
            flex-direction: column;
            }
        }
```

Funktioniert auch nur sieht es etwas kacke aus XD


----------



## Andrin.Spitzer (11. April 2020)

dafür funktioniert nun mein Kontakt formular nicht mehr


----------



## Sempervivum (11. April 2020)

Was heißt "funktioniert nicht mehr"? Bist Du mit dem Layout unzufrieden oder wird kein Email mehr verschickt?


----------



## Sempervivum (11. April 2020)

Um die Optik zu verbessern, musst Du die Elemente mit Flex untereinander anordnen und zentrieren:

```
.item-REGISTER {
    flex: 3;
    background-color: whitesmoke;
    text-align: center;
    padding: 2em;
    flex-direction: column;
    display: flex;
    align-items: center;
}
```
Dieses musst Du natürlich in die Mediaquery einbauen, damit es nur bei schmalem Bildschirm wirksam ist.

Dabei ist uns dann die feste Breite des äußeren Containers im Weg und muss auf auto gesetzt werden:

```
@media screen and (max-width: 800px)
.wrapper-horizontal {
    display: flex;
    flex-direction: column;
    width: auto;
}
```
Dann sieht es schon wesentlich besser aus.


----------



## Andrin.Spitzer (11. April 2020)

Sempervivum hat gesagt.:


> Was heißt "funktioniert nicht mehr"? Bist Du mit dem Layout unzufrieden oder wird kein Email mehr verschickt?


Layout ist perfekt aber es hat keine funktion mehr


----------



## Sempervivum (11. April 2020)

Wie ist denn das PHP aufgebaut? Leider kann ich es ja im Browser nicht einsehen. Da die index-Datei die Endung .html hat, kann es ja nicht in dieser Datei stehen.


----------



## Andrin.Spitzer (11. April 2020)

```
<?php
    $Empfaenger = "spandrin231@gmail.com";
    if($_REQUEST['submit']){
      if(empty($_REQUEST['name']) || empty($_REQUEST['email'])
       || empty($_REQUEST['text']))
      {
        echo"Bitte füllen Sie alle Felder aus, die mit einem * gekennzeichnet sind.";
      }
      else{
        $Mailnachricht="";
        while(list($Formularfeld, $Wert)=each($_REQUEST))
        {
          if($Formularfeld!="submit")
          {
            $Mailnachricht .= $Formularfeld.": ".$Wert."\n";
          }
        }
        $Mailnachricht .= "\nDatum/Zeit: ";
        $Mailnachricht .= date("d.m.Y H:i:s");
        $Mailbetreff = "Kontakt: ";
        mail($Empfaenger, $Mailbetreff, $Mailnachricht, "From: "
        .$_REQUEST['email']);
        echo "";      }
    }
    else
    {
      echo"";
    }
    ?>
```

Das ist mein script. 

Beid wird auch die seite neu geladen beim senden. Und habe keine sende bestätigung. 
Könnte man das gleich einbauen?


----------



## Sempervivum (11. April 2020)

Und wo steht dieses PHP? Ich nehme an, in einer getrennten Datei.


----------



## Andrin.Spitzer (11. April 2020)

Sempervivum hat gesagt.:


> Und wo steht dieses PHP? Ich nehme an, in einer getrennten Datei.


Jup


----------



## Andrin.Spitzer (11. April 2020)

Andrin.Spitzer hat gesagt.:


> Jup


Sollte im head eingebunden sein


----------



## Sempervivum (12. April 2020)

Dann kann es nur dieses sein:
*<link rel="stylesheet" type="php"       href="./script/Contact-Form.php"    media="screen" />* 
Sowas habe ich ja noch nie gesehen! Funktioniert das?


----------



## Andrin.Spitzer (13. April 2020)

Hab diverses probiert auch direkt in html funktioniert ned


----------



## Andrin.Spitzer (13. April 2020)

Wollte so noch die nav bei kleinem Bildschirm permanent mit schwarzem Hintergrund haben. Funktioniert dsa nicht wegen dem scroll effect?


```
@media screen and (max-width: 800px) {
            /* Hamburger sichtbar machen */
            label.hamburger {
                display: inline-block;
            }
            /* Navigation unsichtbar machen */
            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }
            /* Navigation sichtbar machen, wenn das Hamburger-Symbol gecheckt ist */
            input.hamburger:checked~ul {
                display: flex;
            }
            
            .wrapper-horizontal {
    display: flex;
    flex-direction: column;
    width: auto;
}
            nav.scrolled {
                background-color: black;
            }
        }
```


----------



## Andrin.Spitzer (14. April 2020)

Hay. Ich habe versucht am menu weiter zu arbeiten. Wen ich es richtig verstehe Ist dein burger menu aktuell nur das "icon". daher habe ich versucht eine pop up menu zu bauen. Pop-Up jedoch funktioniert es noch nicht.


----------



## Sempervivum (14. April 2020)

Das Burger Menü sollte schon funktionieren. Was fehlt ist, dass die Checkbox auch die ID "hamburger" haben muss und wir müssen die Sichtbarkeit natürlich abhängig vom Status der Checkbox umschalten. Dann geht es auch ohne Javascript:
https://jsfiddle.net/Sempervivum/e3t186xg/2/


----------



## Andrin.Spitzer (14. April 2020)

Habs mal hoch geladen. 

Funktion ist schon sehr schön.

Wen ich das richtig verstehe ist das der teil das umschalted ob ich das pop menu sehe?

```
input.hamburger:checked~div.pop-up-menu {
            display: block;
        }
```

Ich würde gerne wen das pop up geöffnet wurde und ein button betätigt wird sich das menu auch wider schliesst.


----------



## Sempervivum (14. April 2020)

> Ich würde gerne wen das pop up geöffnet wurde und ein button betätigt wird sich das menu auch wider schliesst.


Dafür ist doch auch das Hamburger-Symbol da: Auf das Kreuz klicken und das Menü schließt sich wieder.


----------



## Andrin.Spitzer (14. April 2020)

Sempervivum hat gesagt.:


> Dafür ist doch auch das Hamburger-Symbol da: Auf das Kreuz klicken und das Menü schließt sich wieder.



Ja ich habe mir nur gedacht wäre es nicht logisch das wen der button gedrückt wird das fenster sowiso geschlossen wird? dan wäre es doch benutzer freundlic hwen es automatisch geht


----------



## Andrin.Spitzer (14. April 2020)

Gibt es eine Lösung das bei schmalem aber hohem fenster das hintergund bild immer noch die ganze fläche deckt?


----------



## Sempervivum (14. April 2020)

> Gibt es eine Lösung das bei schmalem aber hohem fenster das hintergund bild immer noch die ganze fläche deckt?


Ja, zwei Möglichkeiten:
1. Wiederholung zulassen, dann wird es in vertikaler Richtung mehrfach angezeigt.
2. `background-size: cover;` verwenden, dann wird aber seitlich etwas abgeschnitten.


----------



## Andrin.Spitzer (15. April 2020)

auf cover habe ich es bereits


----------



## Andrin.Spitzer (15. April 2020)

Hay. Bin fast fertig mit meiner seite. 

Habe nur noch 3 dinge bei dennen ich hilfe brauche bzw eine antwort. 

-gäbe es di möglich keit durch betätigen eies buttons abgesehen des x buttons das burger menu wider zuschliessen? 

-das php formular wider ingang zusetzten

-eine sende bestätigung für das php form


----------



## Sempervivum (15. April 2020)

> -das php formular wider ingang zusetzten
> -eine sende bestätigung für das php form


Normaler Weise wird empfohlen, nicht die Funktion mail() zu verwenden sondern eine Bibliothek wie PHPMailer. Wenn dein Formular früher funktioniert hat und es nur darum geht, es wieder zum Laufen zu bringen, würde ich vorschlagen, wir versuchen das ohne Bibliothek. Aber da eine Erweiterung notwendig ist, empfehle ich dringend, es umzustellen. Du bekommst PHPMailer bei Github:
https://github.com/PHPMailer/PHPMailer


----------



## Andrin.Spitzer (16. April 2020)

Warum macht man das nicht mehr so?


----------



## Sempervivum (16. April 2020)

Weil es sehr fehleranfällig ist und fundierte Kenntnisse über Header und RFC-dingsbums erfordert.


----------



## Andrin.Spitzer (16. April 2020)

ah oke also dinge die ich sowieso nicht verstehe XD

Habe mich etwas informiert. Hier mit Hilfe von diesem Video und ich habe festgestellt das ich so überhaupt keine ahnung habe was ich da etzt machen muss um es an meiner seite anzuwenden.


----------



## Sempervivum (16. April 2020)

Sei unbesorgt, von diesen Header- und RFC-Sachen habe ich ebenfalls keine Ahnung   . Das ist ja genau der Grund, warum PHPMailer empfohlen wird. Und was das Video betrifft: Du brauchst SMTP nicht unbedingt für dein Kontaktformular.
Ich schrieb ja schon, dass ich früher mit jemand anders ein Kontakformular entwickelt habe. Ich werde es mal heraussuchen ...


----------



## Andrin.Spitzer (16. April 2020)

Sempervivum hat gesagt.:


> Sei unbesorgt, von diesen Header- und RFC-Sachen habe ich ebenfalls keine Ahnung   . Das ist ja genau der Grund, warum PHPMailer empfohlen wird. Und was das Video betrifft: Du brauchst SMTP nicht unbedingt für dein Kontaktformular.
> Ich schrieb ja schon, dass ich früher mit jemand anders ein Kontakformular entwickelt habe. Ich werde es mal heraussuchen ...


Cool danke schön


----------



## Andrin.Spitzer (16. April 2020)

Ich wollte noch fragen fändest du idee dumm mit dem schliessen der mobile nav beim betätigen eines buttons?


----------



## Sempervivum (16. April 2020)

Nicht dumm aber überflüssig, weil man ja das Kreuz vom Hamburger hat. Worüber ich eher nachdenke würde ist, nach dem Klick auf einen Link in der Nav das Menü zu schließen, weil anzunehmen ist, dass der Besucher sich dann die angesteuerte Teilseite auch ansehen will.
Für die Mailer-Sache habe ich noch keine Zeit gefunden, vielleicht morgen.


----------



## Andrin.Spitzer (17. April 2020)

Sempervivum hat gesagt.:


> Nicht dumm aber überflüssig, weil man ja das Kreuz vom Hamburger hat. Worüber ich eher nachdenke würde ist, nach dem Klick auf einen Link in der Nav das Menü zu schließen, weil anzunehmen ist, dass der Besucher sich dann die angesteuerte Teilseite auch ansehen will.
> Für die Mailer-Sache habe ich noch keine Zeit gefunden, vielleicht morgen.




Hay. Das ist eigentlich das was ich meine 

Burger menu drücken link klicken fenster schliesst und inhalt is bereit


----------



## Sempervivum (17. April 2020)

Dann sind wir uns ja einig. Ich sehe es mir nachher an ...


----------



## Andrin.Spitzer (17. April 2020)

Ich bin dran es auch selber zu versuchen. aber freue mich auf deine lösung D


----------



## Sempervivum (17. April 2020)

Dann stelle ich es erst Mal zurück und warte, ob Du eine Lösung findest.


----------



## Andrin.Spitzer (17. April 2020)

Ich verstehe das so.

wird der button gedrückt durch input mit der id hamburger wird die animation ausgeführt und der wert der nav von none zu block gewechselt.
und durch das erneute betätigen das ganze anderst rum.

das würde heissen ich müsste im css erreichen das die <a> einem input mit id burger entspricht


```
<input type="checkbox" class="hamburger" id="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
```


```
input.hamburger:checked~div.pop-up-menu {
            display:             block;
}

input.hamburger {
            display:             none;
 }
```


----------



## Andrin.Spitzer (17. April 2020)

dann könnte ich doch eigentlich weil eine id einzigartig sein muss die a mit einer class ergänzen namens hamburger und denn teil hier so abändern

```
input.hamburger:checked~div.pop-up-menu {
            display:             block;
}

input.hamburger {
            display:             none;
}
zu

a.hamburger:checked~div.pop-up-menu {
            display:             block;
}

a.hamburger {
            display:             none;
}
```
oder nicht ?


----------



## Andrin.Spitzer (17. April 2020)

hab etwas rumprobiert aber mit meiner idee schaffee ichs ned


----------



## Sempervivum (18. April 2020)

Hier wird man mit den Beschränkungen von CSS konfrontiert. Es scheitert daran, dass man mit CSS:

kein Element ansprechen kann, das ein Vorfahre ist bzw. im Baum über dem aktuellen Element liegt
kein Element ansprechen kann, das in der Reihenfolge vor dem aktuellen Element liegt
Besser mit Javascript realisieren:

```
document.querySelectorAll('.pop-up-menu a').forEach('click', (event) => {
            document.querySelector('input.hamburger').checked = false;
        });
```


----------



## Andrin.Spitzer (18. April 2020)

kann ich das einfach einfügen und dan klappt des? der css code wird ja nicht überflüssig dadurch oder?


----------



## Sempervivum (18. April 2020)

Der, den Du hinzu gefügt hast, wird überflüssig, der der bisher da war natürlich nicht. Getestet habe ich es nicht, versuche selber, es zum Laufen zu bringen. Wenn es nicht funktioniert, wirf einen Blick in die Console.


----------



## Andrin.Spitzer (20. April 2020)

```
document.querySelectorAll('.pop-up-menu a').forEach('click', (event) => {
            document.querySelector('input.hamburger').checked = false;
        });
```
die haut den fehler raus das 'click' keine funktion ist


----------



## Andrin.Spitzer (20. April 2020)

habe mal ordentlich gegooglet finde nichts was mir weiter hilft hab keine ahnung von js. was ich jedoch  auch mehrfach gellesen habe ist das click anscheinend kein möglicher parameter ist.


----------



## Andrin.Spitzer (20. April 2020)

hab mich noch weiter informiert und etwas probiert funktioniert in JSFiddle aber ned in meinem Code.




```
function myFunction(){
        document.getElementsByClassName("pop-up-menu")[0].style.display = "none";}
```


```
<div class="pop-up-menu">
         <ul>
            <li>
                <a onclick="myFunction()" href="#home">Home</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#team">Teilnehmer</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#register">Anmelden</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#sponsoren">Partner</a> 
            </li>
          </ul>
</div>
```


----------



## Sempervivum (20. April 2020)

OMG, da habe ich einen kapitalen Fehler gemacht. Der Code aus #104 muss so lauten:

```
document.querySelectorAll('.pop-up-menu a').forEach((item, idx) => {
            item.addEventListener('click', (event) => {
                document.querySelector('input.hamburger').checked = false;
            });
        });
```
Wieder ungetestet.


----------



## Andrin.Spitzer (20. April 2020)

Funktioniert auch ned. :/ aber ohne fehler in der konsole


würde das von mir nicht auch funktionieren?


----------



## Andrin.Spitzer (21. April 2020)

haste ne idee wiso es nicht funktioniert?


----------



## Sempervivum (21. April 2020)

Ja, warum es nicht funktioniert, weiß ich: Ich hatte angenommen, dass dies
`.pop-up-menu`
das fragliche Menü ist, das durch Klick auf den Hamburger aufgeht. Inzwischen habe ich jedoch bemerkt, dass das Menü doppelt vorhanden ist, einmal mit dieser Klasse und einmal ohne, und das ohne ist das fragliche. Hier zeigt sich, dass es eine Fehlerquelle ist, wenn Code mehrfach vorhanden ist.


----------



## Andrin.Spitzer (21. April 2020)

ich habe das 2 mal drine weil wen ich das menu ohne der id nicht drin habe habe ich nicht einmal mehr die standart nav


----------



## Andrin.Spitzer (21. April 2020)

Habes mal entfernt und hochgeladen schau es dir mal an


----------



## Andrin.Spitzer (23. April 2020)

Andrin.Spitzer hat gesagt.:


> Habes mal entfernt und hochgeladen schau es dir mal an


Hast du vlt ne lösung und dein kontak form gefunden


----------



## Sempervivum (23. April 2020)

Tut mir Leid, wegen diverser anderer Aktivitäten ist dieser Thread bei mir etwas in Vergessenheit geraten. Ich habe mir die Navigation jetzt angesehen und zum Laufen gebracht. Das div um das ul herum habe ich heraus genommen. Dann funktionierte das JS aus #110 auf Anhieb:

```
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title>Menu</title>
    <style>
        ul.pop-up-menu {
            margin: 0 auto;
            padding: 2em;
            width: 60em;
            background-color: black;
            color: white;
        }

        ul {
            margin: 0px auto;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            font-size: 1.5em;
        }

        li {
            position: relative;
            padding: 15px 0;
            display: flex;
        }

        label.hamburger {
            position: relative;
            background: black;
            width: 50px;
            height: 50px;
            margin-left: 0;
            border-radius: 4px;
            transition: border-radius .5s;
            z-index: 500;
            display: none;
        }

        input.hamburger {
            display: none;
        }

        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 30px;
            background: whitesmoke;
            border-radius: 2px solid black;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }

        .line:nth-child(1) {
            top: 12px;
        }

        .line:nth-child(2) {
            top: 24px;
        }

        .line:nth-child(3) {
            top: 36px;
        }

        input.hamburger:checked~label.hamburger .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }

        input.hamburger:checked+label.hamburger .line:nth-child(2) {
            opacity: 0;
        }

        input.hamburger:checked+label.hamburger .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }

        input.hamburger:checked~div.pop-up-menu {
            display: block;
        }

        label.hamburger {
            display: none;
        }

        a {
            color: white;
            text-decoration: none;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
        }

        a:after {
            bottom: 0;
            content: "";
            display: block;
            height: 2px;
            left: 50%;
            position: absolute;
            background: white;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
            border-radius: 10px;
        }

        a:hover:after {
            width: 100%;
            left: 0;
        }

        @media screen and (max-width: 800px) {

            nav {
                background-color: black;
            }

            label.hamburger {
                display: inline-block;
            }

            nav ul.pop-up-menu {
                display: none;
                flex-direction: column;
                align-items: center;
                width: auto;
            }

            input.hamburger:checked~ul {
                display: flex;
            }
    </style>

</head>

<body>
    <nav>
        <input type="checkbox" class="hamburger" id="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
        <ul class="pop-up-menu">
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#team">Teilnehmer</a>
            </li>
            <li>
                <a href="#register">Anmelden</a>
            </li>
            <li>
                <a href="#sponsoren">Partner</a>
            </li>
        </ul>
    </nav>
    <script>
        document.querySelectorAll('ul.pop-up-menu a').forEach((item, idx) => {
            item.addEventListener('click', (event) => {
                document.querySelector('input.hamburger').checked = false;
            });
        });
    </script>
</body>

</html>
```
Wegen des Kontaktformulars muss ich mal sehen, wann ich etwas mehr Muße habe. Das will wohl überlegt sein.


----------



## Andrin.Spitzer (23. April 2020)

Sempervivum hat gesagt.:


> Tut mir Leid, wegen diverser anderer Aktivitäten ist dieser Thread bei mir etwas in Vergessenheit geraten. Ich habe mir die Navigation jetzt angesehen und zum Laufen gebracht. Das div um das ul herum habe ich heraus genommen. Dann funktionierte das JS aus #110 auf Anhieb:
> 
> ```
> <!DOCTYPE html>
> ...



Oki dnke viel mal ivh probier es mal


----------



## Sempervivum (23. April 2020)

So, ich habe jetzt auch das Kontaktformular heraus gesucht. Versuche, es zu verstehen, so dass Du es an deine Umgebung anpassen kannst.
PHPMailer kannst Du von Github herunter laden:
https://github.com/PHPMailer/PHPMailerDer grüne Button rechts "Clone or Download" und dann "Download ZIP". Wie aus dem Code des Kontatkformulars hervor geht, brauchst Du nur die PHP-Dateien Exception.php und PHPMailer.php. Wenn Fragen sind, dann melde dich.


```
<?php
// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
/**
*  1. Überprüfung, ob das Formular abgesendet wurde, denn wir erhalten die Daten erst, wenn das Formular abgesendet wurde.
*/
if (isset($_POST['submit'])) {
    /**
     *  2. Alle Eingangsdaten filtern
     *  - Dazu verwenden wir die Funktion htmlspecialchars()
     *  - die Funktion trim() wird genutzt, um alle Leerzeichen am Anfang und Ende des Strings (Zeichenkette) zu entfernen
     */
    $name = htmlspecialchars(trim($_POST['name']));
    $email = htmlspecialchars(trim($_POST['email']));
    $subject = htmlspecialchars(trim($_POST['subject']));
    $message = htmlspecialchars(trim($_POST['message']));
    // Empfänger, nur zum Testen
    $receiver = htmlspecialchars(trim($_POST['receiver']));
    /**
     *  3. Kriterienprüfung
     *  - Kriterien, wie z.B., wie viele Zeichen müssen mindestens eingegeben werden, ...
     *
     *  Was brauchen wir dafür?
     *  1. Array, welches die ganzen Fehler zugeordnet bekommt
     *
     *  Beachte:
     *  Alle Daten, welche durch das Formular abgesendet werden, sind erstmal Strings, dies heißt, dass man diese zuerst in deren gewünschten Typ umwandeln muss
     */
    $errors = [];
    $success = false;
    /**
     *  input textfeld | name="name"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang
     */
    if (empty($name)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihren Namen an!' . HTML_ERROR_END;
    } else if (strlen($name) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Name muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  input emailfeld | name="email"
     *  Typ: string
     *  Kriterien: mindestens 7 Zeichen lang
     */
    if (empty($email)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihre E-Mail-Adresse an!' . HTML_ERROR_END;
    } else if (strlen($email) < 7) {
        $errors[] = HTML_ERROR_START . 'Die E-Mail-Adresse muss mindestens 7 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine gültige E-Mail-Adresse an!' . HTML_ERROR_END;
    }
    /**
     *  input textfeld | name="subject"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang, maximal 50 Zeichen lang
     */
    if (empty($subject)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie einen Betreff an!' . HTML_ERROR_END;
    } else if (strlen($subject) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Betreff muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (strlen($subject) > 50) {
        $errors[] = HTML_ERROR_START . 'Der Betreff darf maximal 50 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  textarea | name="message"
     *  Typ: string
     *  Kriterien: mindestens 10 Zeichen lang (man kann erwarten, dass eine Nachricht länger als 10 Zeichen lang ist)
     */
    if (empty($message)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine Nachricht an!' . HTML_ERROR_END;
    } else if (strlen($message) < 10) {
        $errors[] = HTML_ERROR_START . 'Die Nachricht muss mindestens 10 Zeichen lang sein!' . HTML_ERROR_END;
    }

    // nur zum Testen
    if (empty($receiver)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie die E-Mail des Empfängers an!' . HTML_ERROR_END;
    }
    /**
     *  4. Überprüfung, ob Fehler vorhanden sind, wenn nicht, dann Mailversand ausführen
     *  - für den Mailversand verwenden wir den PHPMailer
     */
    if (count($errors) === 0) {
        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress($receiver); // Empfängeradresse
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
}
?>
```


----------



## Andrin.Spitzer (23. April 2020)

Funktioniert und sieht super gut aus danke. Könntest du mir nen gefhlen machen und gucken ob du auf dem smartphone auch aus irgendwelchen gründen nach rechts scrollen bzw schieben kannst wen ja. Fon wo kommt das? 

Ich schaue es mir morgen an danke für alles.


----------



## Sempervivum (24. April 2020)

> gucken ob du auf dem smartphone auch aus irgendwelchen gründen nach rechts scrollen bzw schieben kannst wen ja. Fon wo kommt das?


Habe ich mir auf meinem Smartphone angesehen und kann es bestätigen, allerdings beobachte ich ein Scrollen nur um ca. 2 mm. Ist es das, was Du meinst?


----------



## Andrin.Spitzer (24. April 2020)

Sempervivum hat gesagt.:


> Habe ich mir auf meinem Smartphone angesehen und kann es bestätigen, allerdings beobachte ich ein Scrollen nur um ca. 2 mm. Ist es das, was Du meinst?



Ja genau das meine ich.


----------



## Andrin.Spitzer (24. April 2020)

Mir stellen sich einige fragen.


```
Die dateien Expection und phpmailer befinden sich in in diesem pfad "\contactform\die dateien"

ist das so korrekt eingebunden

use PHPMailer\PHPMailer\PHPMailer;
require_once 'contactform/Exception.php';
require_once 'contactform/PHPMailer.php';
```


Wo muss ich meine email angeben soll ja immer hier landen info(at)firmenmeisterschaft-sh.ch

hab mal etwas angepasst wie ich denke es sollte stimmen bitte überprüf es mal

Fiddle

hab den php teil im JS geschriben


----------



## Sempervivum (24. April 2020)

Das ist ein wenig verwirrend, weil die Email-Adresse des Empfängers im Formular eingegeben werden kann, zu Testzwecken. Du kannst jedoch die Adresse gleich als Konstante definieren. Ich habe die betr. Stellen jeweils mit einem Pfeil markiert: <---


```
<?php
// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;

require_once 'contactform/Exception.php';

require_once 'contactform/PHPMailer.php';
const RECEIVER = 'info(at)firmenmeisterschaft-sh.ch'; //<---
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
/**
*  1. Überprüfung, ob das Formular abgesendet wurde, denn wir erhalten die Daten erst, wenn das Formular abgesendet wurde.
*/
if (isset($_POST['submit'])) {
    /**
     *  2. Alle Eingangsdaten filtern
     *  - Dazu verwenden wir die Funktion htmlspecialchars()
     *  - die Funktion trim() wird genutzt, um alle Leerzeichen am Anfang und Ende des Strings (Zeichenkette) zu entfernen
     */
    $name = htmlspecialchars(trim($_POST['name']));
    $email = htmlspecialchars(trim($_POST['email']));
    $subject = htmlspecialchars(trim($_POST['subject']));
    $message = htmlspecialchars(trim($_POST['message']));
    // Empfänger, nur zum Testen
    //$receiver = htmlspecialchars(trim($_POST['receiver'])); <---
    /**
     *  3. Kriterienprüfung
     *  - Kriterien, wie z.B., wie viele Zeichen müssen mindestens eingegeben werden, ...
     *
     *  Was brauchen wir dafür?
     *  1. Array, welches die ganzen Fehler zugeordnet bekommt
     *
     *  Beachte:
     *  Alle Daten, welche durch das Formular abgesendet werden, sind erstmal Strings, dies heißt, dass man diese zuerst in deren gewünschten Typ umwandeln muss
     */
    $errors = [];
    $success = false;
    /**
     *  input textfeld | name="name"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang
     */
    if (empty($name)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihren Namen an!' . HTML_ERROR_END;
    } else if (strlen($name) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Name muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  input emailfeld | name="email"
     *  Typ: string
     *  Kriterien: mindestens 7 Zeichen lang
     */
    if (empty($email)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihre E-Mail-Adresse an!' . HTML_ERROR_END;
    } else if (strlen($email) < 7) {
        $errors[] = HTML_ERROR_START . 'Die E-Mail-Adresse muss mindestens 7 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine gültige E-Mail-Adresse an!' . HTML_ERROR_END;
    }
    /**
     *  input textfeld | name="subject"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang, maximal 50 Zeichen lang
     */
    if (empty($subject)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie einen Betreff an!' . HTML_ERROR_END;
    } else if (strlen($subject) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Betreff muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (strlen($subject) > 50) {
        $errors[] = HTML_ERROR_START . 'Der Betreff darf maximal 50 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  textarea | name="message"
     *  Typ: string
     *  Kriterien: mindestens 10 Zeichen lang (man kann erwarten, dass eine Nachricht länger als 10 Zeichen lang ist)
     */
    if (empty($message)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine Nachricht an!' . HTML_ERROR_END;
    } else if (strlen($message) < 10) {
        $errors[] = HTML_ERROR_START . 'Die Nachricht muss mindestens 10 Zeichen lang sein!' . HTML_ERROR_END;
    }

    // nur zum Testen
    // if (empty($receiver)) { <---
    //     $errors[] = HTML_ERROR_START . 'Bitte geben Sie die E-Mail des Empfängers an!' . HTML_ERROR_END;
    // }
    /**
     *  4. Überprüfung, ob Fehler vorhanden sind, wenn nicht, dann Mailversand ausführen
     *  - für den Mailversand verwenden wir den PHPMailer
     */
    if (count($errors) === 0) {
        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
}
?>
```


----------



## Andrin.Spitzer (25. April 2020)

Sempervivum hat gesagt.:


> Das ist ein wenig verwirrend, weil die Email-Adresse des Empfängers im Formular eingegeben werden kann, zu Testzwecken. Du kannst jedoch die Adresse gleich als Konstante definieren. Ich habe die betr. Stellen jeweils mit einem Pfeil markiert: <---
> 
> 
> ```
> ...


Danke

Kann ich das jetzt so einfgen mit dem abgeänderten html aus dem jsfiddle von #123 und dan funktioniert das?


----------



## Andrin.Spitzer (25. April 2020)

Hast du ne idee wiso das von #121 so ist?


----------



## Sempervivum (25. April 2020)

"Hast du ne idee wiso das von #121 so ist? "
Im Moment noch nicht. Ist ein bisschen schwer herauszufinden, weil ich auf dem Smartphone keine Entwicklerwerkzeuge habe.


----------



## Sempervivum (25. April 2020)

> Kann ich das jetzt so einfgen mit dem abgeänderten html aus dem jsfiddle von #123 und dan funktioniert das?


Versuchen und dann sehen wir weiter. Dafür dass es funktioniert, kann ich nicht die Hand ins Feuer legen, aber wenn nicht werden wir den Fehler sicher finden können.


----------



## Andrin.Spitzer (25. April 2020)

Sempervivum hat gesagt.:


> Versuchen und dann sehen wir weiter. Dafür dass es funktioniert, kann ich nicht die Hand ins Feuer legen, aber wenn nicht werden wir den Fehler sicher finden können.


Habs eingebaut und etwas rummprobiert aber kriegs ned hin


----------



## Sempervivum (25. April 2020)

Als erstes die Fehleranzeige einschalten:

```
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);

// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;

require_once 'contactform/Exception.php';

require_once 'contactform/PHPMailer.php';
const RECEIVER = 'info(at)firmenmeisterschaft-sh.ch'; //<---
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
// usw.
```
und dann beobachten, ob und welche Fehler kommen.


----------



## Andrin.Spitzer (25. April 2020)

Sempervivum hat gesagt.:


> Als erstes die Fehleranzeige einschalten:
> 
> ```
> <?php
> ...



Oki sehe ich da auch ob ich es richtig eingebunden habe?


----------



## Sempervivum (25. April 2020)

Ja, wenn z. B. eine include-Datei nicht gefunden wird, gibt es einen Fehler.


----------



## Andrin.Spitzer (25. April 2020)




----------



## Sempervivum (25. April 2020)

Das hat wohl nichts zu sagen, irgend was mit den Developertools.
Direkt auf der Seite wird auch nichts ausgegeben? Dann versuchen, eine Mail zu verschicken.


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> Das hat wohl nichts zu sagen, irgend was mit den Developertools.
> Direkt auf der Seite wird auch nichts ausgegeben? Dann versuchen, eine Mail zu verschicken.



Weder fehler Angabe noch wird eine mail versendet


----------



## Sempervivum (26. April 2020)

Und testest Du es auch auf deinem Webspace und nicht lokal?


----------



## Sempervivum (26. April 2020)

PS: Ich sehe gerade, dass die benutzerdefinierten Fehler gar nicht ausgegeben werden. Ergänze dies ganz am Schluss des PHP, vor der letzten schließenden Klammer:

```
if (count($errors) === 0) {
        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
    foreach ($errors as $err) {
        echo $err;
    }
}
```


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> Und testest Du es auch auf deinem Webspace und nicht lokal?



Webserver. Kanst auch mal anschauen aktualisiere es immer wider


----------



## Sempervivum (26. April 2020)

Anschauen bringt in diesem Fall weniger, weil der Kern der Sache das PHP ist. Wenn ich ein wenig Muße habe, mache ich mal eine Testversion auf meinem eigenen Webspace.


----------



## Andrin.Spitzer (26. April 2020)

Soll ich dir meine Datein zur Verfügung stellen dann geht es bestimmt einfacher daran zu arbeiten.


----------



## Andrin.Spitzer (26. April 2020)

https://drive.google.com/drive/folders/1syI1QUUUs81oQhm5n1qVp7vBTaab6JO2?usp=sharing


----------



## Sempervivum (26. April 2020)

Nein, nicht nötig, eine Testdatei habe ich schon, ich brauche nur das PHP hinein zu kopieren.


----------



## Sempervivum (26. April 2020)

OK, da haben sich unsere Nachrichten jetzt überschnitten. Kann nicht schaden, wenn ich auch die Bilder habe.


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> OK, da haben sich unsere Nachrichten jetzt überschnitten. Kann nicht schaden, wenn ich auch die Bilder habe.



Tip top und sonst wen du was brauchst einfach melden.


----------



## Sempervivum (26. April 2020)

So, es funktioniert bei mir. Da fehlten nur zwei Kleinigkeiten:

Die index-Datei muss die Endung .php haben, sonst wird die include-Anweisung nicht ausgeführt.
Damit das Formular abgeschickt wird, müssen die Elemente in ein form-Tag eingebettet sein.


```
<div class="wrapper-horizontal">
            <form method="post">
                <div class="item-REGISTER" id="register">
                    <h2>Anmeldung</h2>
                    <input         name="name"      placeholder="Name*" />
                    <input         name="email"      placeholder="E-Mail*" />
                    <input         name="subject"          placeholder="Betreff" />
                    <textarea     name="message"      placeholder="Nachricht..."></textarea><br>
                    <input         class="button-send" name="submit" type="submit" value="absenden"/>
                </div>
                <div class="item-CONTACT">
                    <p2>
                        A.Spitzer<br>
                        <a class="button" href= "mailto:a.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                        L.Spitzer<br>
                        <a class="button" href= "mailto:l.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                    </p2>
                    <a class="button" href="./doc/Infoblatt.pdf">Infoblatt.pdf</a>
                    <a class="button" href="./doc/Anmeldung.pdf">Anmeldung.pdf</a>
                </div>
            </form>
        </div>
```


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> So, es funktioniert bei mir. Da fehlten nur zwei Kleinigkeiten:
> 
> Die index-Datei muss die Endung .php haben, sonst wird die include-Anweisung nicht ausgeführt.
> Damit das Formular abgeschickt wird, müssen die Elemente in ein form-Tag eingebettet sein.
> ...



Oke cool danke. 

Aber normalerweisse arbeited mann schon mit html datein und nicht mit php oder ist das nicht mehr so?


----------



## Sempervivum (26. April 2020)

Schon, aber so bald PHP drin ist, muss die Datei die Endung .php haben, damit es geparst wird.


----------



## Andrin.Spitzer (26. April 2020)

bei mir klappt des iwie ned krieg auch kein fehler oder eine bestätigung oder so


----------



## Sempervivum (26. April 2020)

Hast Du die Fehleranzeige eingeschaltet, siehe #130?


----------



## Andrin.Spitzer (26. April 2020)

jup. aber momentan hab ich gerade ein anderes problem mein webserver ladet die datei nicht richtig kanst du mal schauen ob du alles siehst?


----------



## Sempervivum (26. April 2020)

Ja, ich sehe es. Der Quelltext bricht da ab, wo das PHP eingezogen wird. Poste doch noch mal die PHP-Datei.


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> Ja, ich sehe es. Der Quelltext bricht da ab, wo das PHP eingezogen wird. Poste doch noch mal die PHP-Datei.


Hoch geladen ist die aus dem drive von #141


----------



## Sempervivum (26. April 2020)

Oh, das hatte ich ganz vergessen: Da ist ein Fehler drin, eine geschweifte Klammer zu viel am Schluss. Lösche sie heraus.


----------



## Andrin.Spitzer (26. April 2020)

wird jetzt mal neu geladen allerdings verändert es das den style beim Kontaktformular.

Hast du eigentlich herausgefunden von was die 2mm hin und her schieben auf dem smartphone kommen`?


----------



## Andrin.Spitzer (26. April 2020)

wen ich es teste kommt"Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!"


----------



## Sempervivum (26. April 2020)

> wird jetzt mal neu geladen allerdings verändert es das den style beim Kontaktformular.


Ja, stimmt, darauf hatte ich anfangs nicht geachtet, weil ich erst Mal das Formular zum Laufen bringen wollte. So sollte es besser aussehen:

```
<h1>Kontakt</h1>
        <div class="wrapper-horizontal">
            <form method="post" class="item-REGISTER" id="register">
                <h2>Anmeldung</h2>
                <input         name="name"      placeholder="Name*" />
                <input         name="email"      placeholder="E-Mail*" />
                <input         name="subject"          placeholder="Betreff" />
                <textarea     name="message"      placeholder="Nachricht..."></textarea><br>
                <input         class="button-send" name="submit" type="submit" value="absenden"/>
            </form>
            <div class="item-CONTACT">
                <p2>
                    A.Spitzer<br>
                    <a class="button" href= "mailto:a.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                    L.Spitzer<br>
                    <a class="button" href= "mailto:l.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                </p2>
                <a class="button" href="./doc/Infoblatt.pdf">Infoblatt.pdf</a>
                <a class="button" href="./doc/Anmeldung.pdf">Anmeldung.pdf</a>
            </div>
        </div>
```



> Hast du eigentlich herausgefunden von was die 2mm hin und her schieben auf dem smartphone kommen`?


Nein, leider nicht.


----------



## Sempervivum (26. April 2020)

> wen ich es teste kommt"Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!"


Zunächst musst Du deine richtige Emailadresse hier eintragen:
`const RECEIVER = 'info(at)firmenmeisterschaft-sh.ch';`


----------



## Andrin.Spitzer (26. April 2020)

Sempervivum hat gesagt.:


> Ja, stimmt, darauf hatte ich anfangs nicht geachtet, weil ich erst Mal das Formular zum Laufen bringen wollte. So sollte es besser aussehen:
> 
> ```
> <h1>Kontakt</h1>
> ...



Ah sehr gut jetzt funktioniert alles.

aber eine sende bestätigung haben wir so ja noch nicht?


----------



## Sempervivum (26. April 2020)

Nein. Ich verstehe das so, dass der, der das Kontaktformular abgeschickt hat, eine Bestätigung bekommen soll an die Emailadresse, die er dort eingetragen hat.
Für mich ist es erst Mal spät genug für heute, ich mache jetzt Schluss. Versuche, das PHP zu verstehen, daraus geht hervor, wie man eine Mail verschickt und versuche zunächst, es zu erweitern. Wenn Du nicht zum Ziel kommst, sehen wir morgen weiter.
Bis dann - gute Nacht!


----------



## Andrin.Spitzer (26. April 2020)

Hay bin dir dank bar für deine hilfe und wünsche eine gutenacht


----------



## Sempervivum (30. April 2020)

Hallo Andrin, ich hatte mich vor ein paar Tagen auch des Problem mit der Darstellung auf dem Smartphone angenommen. Es gibt da in den Entwicklerwerkzeugen die Möglichkeit auf Smartphone-Ansicht umzuschalten und dort konnte ich es reproduzieren. Ich hatte es auch geschafft, den Fehler zu beheben. Gestern Abend habe ich es dann erneut versucht und habe es nicht mehr geschafft  Ich bleibe aber dran.

Übrigens habe ich inzwischen bemerkt, das Du im PHP des Kontaktformulars das Senden zwei Mal drin hast. Hattest Du dort versucht, die Bestätigung an der Absender zu schicken? Dafür brauchst Du nur die Email-Adressen ein wenig zu ändern.


----------



## Andrin.Spitzer (1. Mai 2020)

Sempervivum hat gesagt.:


> Hallo Andrin, ich hatte mich vor ein paar Tagen auch des Problem mit der Darstellung auf dem Smartphone angenommen. Es gibt da in den Entwicklerwerkzeugen die Möglichkeit auf Smartphone-Ansicht umzuschalten und dort konnte ich es reproduzieren. Ich hatte es auch geschafft, den Fehler zu beheben. Gestern Abend habe ich es dann erneut versucht und habe es nicht mehr geschafft  Ich bleibe aber dran.
> 
> Übrigens habe ich inzwischen bemerkt, das Du im PHP des Kontaktformulars das Senden zwei Mal drin hast. Hattest Du dort versucht, die Bestätigung an der Absender zu schicken? Dafür brauchst Du nur die Email-Adressen ein wenig zu ändern.



Cool danke für deine Hilfe. Wo steht  das im php bei mir sehe ich es nur einmal.


----------



## Sempervivum (1. Mai 2020)

Du findest diesen Codeabschnitt zwei Mal:

```
if (count($errors) === 0) {

        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
```
Ich dachte, Du hättest den zweiten hinzu gefügt, um die Bestätigung zu schicken, aber es kann auch sein, dass es in der Vorlage drin war, die ich dir geschickt hatte. Egal, Du brauchst nur bei einem die Adressen zu ändern, dann sollte eine Bestätigung verschickt werden.


----------



## Sempervivum (1. Mai 2020)

Update zu dem Problem mit der Smartphone-Darstellung: Bei der Simulation im Browser hatte ich gezoomt, daher konnte ich am CSS machen was ich wollte, es ließ sich immer verschieben. Als ich den Zoom zurück gesetzt hatte, war das Bild in der Simulation festgenagelt. Soweit die gute Nachricht, die schlechte: Nachdem ich es hoch geladen hatte und auf dem Handy anschaue, ist es immer noch nicht OK, die Inhalte lassen sich verschieben. Wenn ich mal Muße habe, untersuche ich es weiter.


----------



## Andrin.Spitzer (1. Mai 2020)

Ich google seit tagen für eine sende bestätigung und finde nix solle ich einen neuen thread dafür machen?


----------



## Andrin.Spitzer (1. Mai 2020)

Sempervivum hat gesagt.:


> Update zu dem Problem mit der Smartphone-Darstellung: Bei der Simulation im Browser hatte ich gezoomt, daher konnte ich am CSS machen was ich wollte, es ließ sich immer verschieben. Als ich den Zoom zurück gesetzt hatte, war das Bild in der Simulation festgenagelt. Soweit die gute Nachricht, die schlechte: Nachdem ich es hoch geladen hatte und auf dem Handy anschaue, ist es immer noch nicht OK, die Inhalte lassen sich verschieben. Wenn ich mal Muße habe, untersuche ich es weiter.


Oki danke für die hilfe


----------



## Sempervivum (1. Mai 2020)

> Ich google seit tagen für eine sende bestätigung und finde nix solle ich einen neuen thread dafür machen?


Nein, es ist doch fast fertig, Du brauchst nur die Email-Adressen zu ändern. Senden funktioniert, als ich es getestet habe, habe ich die Mail zwei Mal empfangen.


----------



## Andrin.Spitzer (1. Mai 2020)

Sempervivum hat gesagt.:


> Nein, es ist doch fast fertig, Du brauchst nur die Email-Adressen zu ändern. Senden funktioniert, als ich es getestet habe, habe ich die Mail zwei Mal empfangen.


Das habe ich geändert und funktioniert auch. Ich möchte aber auf der seite nach dem senden eine nachricht sehen das die anfrage erfolgreich abgesendet wurde


----------



## Sempervivum (1. Mai 2020)

Ah so, da habe ich dich völlig missverstanden. Auch das ist ganz einfach: Da werden zwei Variablen vorbereitet, error und success:

```
if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
```
Die brauchst Du nur mit echo auszugeben, dort wo Du sie haben möchtest, also wahrscheinlich unter dem Formular:

```
<h1>Kontakt</h1>
        <div class="wrapper-horizontal">
            <form method="post" class="item-REGISTER" id="register">
                <h2>Anmeldung</h2>
                <input         name="name"      placeholder="Name*" />
                <input         name="email"      placeholder="E-Mail*" />
                <input         name="subject"          placeholder="Betreff" />
                <textarea     name="message"      placeholder="Nachricht..."></textarea><br>
                <input         class="button-send" name="submit" type="submit" value="absenden"/>
                <?php
                echo $success;
                foreach ($errors as $err) {
                    echo $err;
                }
                ?>
            </form>
            <div class="item-CONTACT">
                <p2>
                    A.Spitzer<br>
                    <a class="button" href= "mailto:a.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                    L.Spitzer<br>
                    <a class="button" href= "mailto:l.spitzer@firmenmeisterschaft-sh.ch">Email</a>
                </p2>
                <a class="button" href="./doc/Infoblatt.pdf">Infoblatt.pdf</a>
                <a class="button" href="./doc/Anmeldung.pdf">Anmeldung.pdf</a>
            </div>
```


----------



## Andrin.Spitzer (2. Mai 2020)

Hmm warscheindlich hab ichs falsch eingebunden aber klappt bei mir ned.


----------



## Sempervivum (2. Mai 2020)

Wenn ich eine ruhige Minute habe, teste ich es selber mal.
Das Smartphone-Problem habe ich jetzt übrigens lösen können. Es war wie so oft: Feste Abmessungen sind der Feind des resp. Layouts und da gab es noch einige. Poste ich dann ebenfalls, wenn ruhige Minute ...


----------



## Sempervivum (2. Mai 2020)

Zum Kontaktformular: Da hatte ich das Problem, dass die beiden Variablen nicht definiert sind, wenn kein Submit vorliegt. Lösung, indem man sie ganz am Anfang, vor dem if für das submit, definiert:

```
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;
require_once 'contactform/Exception.php';
require_once 'contactform/PHPMailer.php';

const RECEIVER = 'ulr.ba@gmx.net'; //<---
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$errors = [];
$success = false;
/**
 *  1. Überprüfung, ob das Formular abgesendet wurde, denn wir erhalten die Daten erst, wenn das Formular abgesendet wurde.
 */
if (isset($_POST['submit'])) {
    /**
     *  2. Alle Eingangsdaten filtern
     *  - Dazu verwenden wir die Funktion htmlspecialchars()
     *  - die Funktion trim() wird genutzt, um alle Leerzeichen am Anfang und Ende des Strings (Zeichenkette) zu entfernen
     */
    $name = htmlspecialchars(trim($_POST['name']));
    $email = htmlspecialchars(trim($_POST['email']));
    $subject = htmlspecialchars(trim($_POST['subject']));
    $message = htmlspecialchars(trim($_POST['message']));
    // Empfänger, nur zum Testen
    //$receiver = htmlspecialchars(trim($_POST['receiver'])); <---
    /**
     *  3. Kriterienprüfung
     *  - Kriterien, wie z.B., wie viele Zeichen müssen mindestens eingegeben werden, ...
     *
     *  Was brauchen wir dafür?
     *  1. Array, welches die ganzen Fehler zugeordnet bekommt
     *
     *  Beachte:
     *  Alle Daten, welche durch das Formular abgesendet werden, sind erstmal Strings, dies heißt, dass man diese zuerst in deren gewünschten Typ umwandeln muss
     */
    /**
     *  input textfeld | name="name"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang
     */
    if (empty($name)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihren Namen an!' . HTML_ERROR_END;
    } else if (strlen($name) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Name muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  input emailfeld | name="email"
     *  Typ: string
     *  Kriterien: mindestens 7 Zeichen lang
     */
    if (empty($email)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihre E-Mail-Adresse an!' . HTML_ERROR_END;
    } else if (strlen($email) < 7) {
        $errors[] = HTML_ERROR_START . 'Die E-Mail-Adresse muss mindestens 7 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine gültige E-Mail-Adresse an!' . HTML_ERROR_END;
    }
    /**
     *  input textfeld | name="subject"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang, maximal 50 Zeichen lang
     */
    if (empty($subject)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie einen Betreff an!' . HTML_ERROR_END;
    } else if (strlen($subject) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Betreff muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (strlen($subject) > 50) {
        $errors[] = HTML_ERROR_START . 'Der Betreff darf maximal 50 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  textarea | name="message"
     *  Typ: string
     *  Kriterien: mindestens 10 Zeichen lang (man kann erwarten, dass eine Nachricht länger als 10 Zeichen lang ist)
     */
    if (empty($message)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine Nachricht an!' . HTML_ERROR_END;
    } else if (strlen($message) < 10) {
        $errors[] = HTML_ERROR_START . 'Die Nachricht muss mindestens 10 Zeichen lang sein!' . HTML_ERROR_END;
    }

    // nur zum Testen
    // if (empty($receiver)) { <---
    //     $errors[] = HTML_ERROR_START . 'Bitte geben Sie die E-Mail des Empfängers an!' . HTML_ERROR_END;
    // }
    /**
     *  4. Überprüfung, ob Fehler vorhanden sind, wenn nicht, dann Mailversand ausführen
     *  - für den Mailversand verwenden wir den PHPMailer
     */
    if (count($errors) === 0) {

        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
    if (count($errors) === 0) {
        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
}
```


----------



## Andrin.Spitzer (2. Mai 2020)

Hay. sieht extrem gut aus. Wahrscheinlich ist das etwas viel verlangt aber wäre es möglich die das der absende button sich verändert und der text dann im button steht also ca so. Edit fiddle - JSFiddle - Code Playground


----------



## Sempervivum (2. Mai 2020)

So, mit der Smartphone-Darstellung bin ich jetzt fertig. Hier ist meine Testseite, dort kannst Du das HTML und CSS einsehen und herunter laden:
https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-4.phpDamit es übersichtlicher wird, habe ich das CSS in zwei Dateien aufgeteilt, eine für die Nav und die andere für den Rest.
Beim Testen bin ich mit einem Nachteil der Lösung, dass man nur den main-Container scrollt, konfrontiert worden:  Beim Neuladen scrollt der Browser nicht an die alte Stelle. Vor allem nach dem Abschicken des Formulars ist das ärgerlich. Da müsste man vielleicht etwas mit Javascript machen oder das Formular mit Ajax abschicken.
Das mit dem Button ist kein Problem, ich sehe es mir später an.


----------



## Andrin.Spitzer (2. Mai 2020)

Sempervivum hat gesagt.:


> So, mit der Smartphone-Darstellung bin ich jetzt fertig. Hier ist meine Testseite, dort kannst Du das HTML und CSS einsehen und herunter laden:
> https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-4.phpDamit es übersichtlicher wird, habe ich das CSS in zwei Dateien aufgeteilt, eine für die Nav und die andere für den Rest.
> Beim Testen bin ich mit einem Nachteil der Lösung, dass man nur den main-Container scrollt, konfrontiert worden:  Beim Neuladen scrollt der Browser nicht an die alte Stelle. Vor allem nach dem Abschicken des Formulars ist das ärgerlich. Da müsste man vielleicht etwas mit Javascript machen oder das Formular mit Ajax abschicken.
> Das mit dem Button ist kein Problem, ich sehe es mir später an.



Hay.

Habs mir angesehen und mir ist aufgefallen das einige elemente komplett anderst dargestellt werden.

ist das extra so?

Was war den genau der fehler?


----------



## Sempervivum (2. Mai 2020)

Nein, das ist nicht extra so. Ich musste intensiv daran arbeiten, das Ganze responsiv zu bekommen und musste das HTML und CSS ziemlich stark umstellen. Dabei kann es passiert sein, dass einiges ein wenig anders aussieht als zuvor. Ich hatte mich aber sehr bemüht, alles wieder so einzurichten, wie vorher. 
Beschreibe am besten, was nicht hinhaut, dann werde ich versuchen, es anzupassen.


----------



## Andrin.Spitzer (2. Mai 2020)

Sempervivum hat gesagt.:


> Nein, das ist nicht extra so. Ich musste intensiv daran arbeiten, das Ganze responsiv zu bekommen und musste das HTML und CSS ziemlich stark umstellen. Dabei kann es passiert sein, dass einiges ein wenig anders aussieht als zuvor. Ich hatte mich aber sehr bemüht, alles wieder so einzurichten, wie vorher.
> Beschreibe am besten, was nicht hinhaut, dann werde ich versuchen, es anzupassen.



Hay ich schätze deine Bemühung sehr.

eigentlich sind es nur die Logos die zu gross und nicht neben einander sind.


----------



## Sempervivum (2. Mai 2020)

Waren die vorher nebeneinander? Das hatte ich dann übersehen.
...
Ich habe einen Blick auf deine Version online geworden und gesehen, dass immer zwei Bilder nebeneinander sind. Das werde ich noch anpassen. Außerdem habe ich selber bemerkt, dass der Platz zwischen den Containern kleiner ist als vorher. Werde ich auch noch ändern.


----------



## Andrin.Spitzer (2. Mai 2020)

Hast du villeicht eine coole style idee wie ich folgendes umsetzten könnte.

Ich möchte bei den logos beim rwiter team einen hover effect bei dem wen ich über ein logo fahre dises irgendwie durch eine kurtz info über dieses team ersetzt wird. Vlt weisst du was ich meine. 

Vlt sowasCube


----------



## Andrin.Spitzer (3. Mai 2020)

Andrin.Spitzer hat gesagt.:


> Hay ich schätze deine Bemühung sehr.
> 
> eigentlich sind es nur die Logos die zu gross und nicht neben einander sind.



ich habe noch gesehen das bei der kontakt form die 2 buttons für direkt mail nicht mehr in alle Richtungen zentriert sind. 

Habe selber noch geguckt kann es sein das es die fixe breite der container mit dem inhalt das oroblem war?


----------



## Sempervivum (3. Mai 2020)

So, ich habe jetzt die Vierergruppen mit den Logos eingerichtet und den Hintergrund wieder transparent gemacht. Außerdem die vertikalen Abstände zwischen den Containern vergrößert.
Im schwarzen Kasten rechts neben dem Kontaktformular ist alles präzise zentriert. Wenn bei dir nicht, dass poste, welchen Browser Du benutzt.
Das mit dem Submitbutton mache ich später.


----------



## Sempervivum (3. Mai 2020)

URL wie bisher:
https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-4.php


----------



## Sempervivum (3. Mai 2020)

Dieses hatte ich vergessen und eben fiel mein Blick wieder darauf:


> Ich möchte bei den logos beim rwiter team einen hover effect bei dem wen ich über ein logo fahre dises irgendwie durch eine kurtz info über dieses team ersetzt wird.


Mache ich dann auch bei Gelegenheit.


----------



## Sempervivum (3. Mai 2020)

Ich habe jetzt auch das Hover bei den Logos gemacht. Neue URL:
https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-5.phpDa sind noch diverse Effekte möglich: Explodieren aus der Mitte heraus, Einblenden, Einfliegen von der Seite ...
Sieh es dir erst Mal an, ob es das ist, was Du dir vorgestellt hast.


----------



## Sempervivum (3. Mai 2020)

PS: Die untere Gruppe ist jetzt ein wenig zerlegt. Das bereinige ich später.


----------



## Andrin.Spitzer (3. Mai 2020)

Sempervivum hat gesagt.:


> Ich habe jetzt auch das Hover bei den Logos gemacht. Neue URL:
> https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-5.phpDa sind noch diverse Effekte möglich: Explodieren aus der Mitte heraus, Einblenden, Einfliegen von der Seite ...
> Sieh es dir erst Mal an, ob es das ist, was Du dir vorgestellt hast.



Hay kommt meiner vorstellung sehr nahe was sagst du zu diesem effect? ist das zu viel?

cube


----------



## Andrin.Spitzer (3. Mai 2020)

Sempervivum hat gesagt.:


> So, ich habe jetzt die Vierergruppen mit den Logos eingerichtet und den Hintergrund wieder transparent gemacht. Außerdem die vertikalen Abstände zwischen den Containern vergrößert.
> Im schwarzen Kasten rechts neben dem Kontaktformular ist alles präzise zentriert. Wenn bei dir nicht, dass poste, welchen Browser Du benutzt.
> Das mit dem Submitbutton mache ich später.



ich habe chrome. es ist schon auf horizontaler ebene ne aber nicht vertikal.


----------



## Sempervivum (3. Mai 2020)

Verstehe. Das ist einfach, im CSS steht schon ein justify-content, aber leider auskommentiert, keine Ahnung warum. Wenn Du es aktivierst, wird es auch vertikal zentriert.


----------



## Sempervivum (3. Mai 2020)

> Hay kommt meiner vorstellung sehr nahe was sagst du zu diesem effect? ist das zu viel?


Würde nicht sagen, dass es zu viel ist. Ist gängig, dass man beim Hover Zusatzinfos anzeigt. Nur auf dem Smartphone muss man erst Mal drauf kommen, dass man drauf tippen kann und dann die Infos bekommt. Vielleicht einen Hinweis anbringen. Oder alternativ die Infos dauerhaft anzeigen.


----------



## Andrin.Spitzer (2. Juni 2020)

Hay habe mir nen Hover effect gebastelt mit Hilfe von W3schools. 
Ich möchte diese Funktion nutzen um eine Kurze Beschreibung der Teams darzustellen.

Jedoch endet es bei mir immer so.

Könnte das daran liegen das alle die selbe class haben und daher nicht richtig positioniert werden?


----------



## Sempervivum (2. Juni 2020)

Da hast Du jetzt anscheinend deine lokale IP gepostet. Besser hochladen.


----------



## Andrin.Spitzer (2. Juni 2020)

ups


----------



## Andrin.Spitzer (2. Juni 2020)

jetzt sollte sie wider verfügbar sein


----------



## Andrin.Spitzer (2. Juni 2020)

Wen du es dir ansiehst kannst du mal schauen warum der h4 und h5 tag bei kleinem fenster nicht das machen was alle andern h tags machen?


----------



## Sempervivum (2. Juni 2020)

Bei mir funktioniert der Hover-Effekt. Er hat nur einen kleinen Schönheitsfehler: Gerät man mit der Maus in den Zwischenraum zwischen den beiden Textzeilen, klappt das Ding wieder zurück. Ist das das Problem, das Du meinst?


----------



## Sempervivum (2. Juni 2020)

Oder meinst Du das Verhalten im Android-Browser: Bei mir wird die Rückseite mit der Schrift nicht sichtbar, sondern nur die Vorderseite umgeklappt. Wenn ich mich richtig erinnere, konnte man das mit backface-visibility beheben, musst Du mal nachforschen und probieren.


----------



## Andrin.Spitzer (2. Juni 2020)

Sempervivum hat gesagt.:


> Bei mir funktioniert der Hover-Effekt. Er hat nur einen kleinen Schönheitsfehler: Gerät man mit der Maus in den Zwischenraum zwischen den beider Textzeilen, klappt das Ding wieder zurück. Ist das das Problem, das Du meinst?


Genau das. 

Hast fu auch das mit dem h tag gesehen?


----------



## Sempervivum (2. Juni 2020)

Der HTML-Inspektor hat mir die Erklärung für den Nebeneffekt beim Hover gezeigt:
Das div.flip-box und div.flip-box-inner hat jeweils eine Höhe von 0. Der Grund ist, dass die Elemente darin absolut positioniert sind. Lösung, indem man nur die Rückseite absolut positioniert:

```
.flip-box-back {
            background-color: #262626;
            color: white;
            transform: rotateY(180deg);
            position: absolute;
            top: 0;
            left: 0;
        }
        .flip-box-front,
        .flip-box-back {
            /* position: absolute; */
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
```


----------



## Andrin.Spitzer (3. Juni 2020)

*Problem mit h tag gelöst war nicht bei media screen nicht vollständig eingetragen


----------

