Float box design + script fehler suche.


Andrin.Spitzer

Erfahrenes Mitglied
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.
Code:
.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
    padding: 2em;
    background-color: white;
}
Danke
 

Andrin.Spitzer

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Habe es so gemacht:

Code:
@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
 

Sempervivum

Erfahrenes Mitglied
Um die Optik zu verbessern, musst Du die Elemente mit Flex untereinander anordnen und zentrieren:
Code:
.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:
Code:
@media screen and (max-width: 800px)
.wrapper-horizontal {
    display: flex;
    flex-direction: column;
    width: auto;
}
Dann sieht es schon wesentlich besser aus.
 

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Code:
<?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

Erfahrenes Mitglied
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

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

Code:
@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

Erfahrenes Mitglied
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.
 

Neue Beiträge