HTML – die neusten Beiträge

Datei zu PHP Formmailer anhängen?

Hallo!

Ich habe ein kleines Kontaktformular welches Name und Text an einen vorher Festgelegten Absender schickt. Nun möchte ich das man dazu noch eine Datei anhängen kann, die an mit an die Email angehangen wird. Ich habe einen PHP Mailer. Bis zum Dateiupload funktioniert alles. Also Namen sowie Text werden übertragen, aber es scheitert am Dateiupload. Ich bitte um Hilfe, was kann ich machen damit die Datei an die Email angehangen wird? Ich poste hier mal die beiden Codes... Bitte helft mir!

CODE FORMULAR (mail.php):

https://pastebin.com/p8yp9zZW

CODE PHP MAILER (mailer-engine.php)

<?php


// ======= Konfiguration:


$mailTo =  $_POST['Empfänger'];
$mailFrom = 'Schüler der Klasse 9-3 <****@***.de>';
$mailSubject = 'Email von einem Schüler der Klasse 9-3 [Weitergeleitet über Notfallcloud der Klasse 9-3]';
$returnPage = 'form_erfolg.html';
$returnErrorPage = 'form_fehler.html';
$mailText = "";


// ======= Text der Mail aus den Formularfeldern erstellen:


// Wenn Daten mit method="post" versendet wurden:
if(isset($_POST)) {
   // alle Formularfelder der Reihe nach durchgehen:
   foreach($_POST as $name => $value) {
      // Wenn der Feldwert aus mehreren Werten besteht:
      // (z.B. <select multiple>)
      if(is_array($value)) {
          // "Feldname:" und Zeilenumbruch dem Mailtext hinzufügen
          $mailText .= $name . ":\n";
          // alle Werte des Feldes abarbeiten
          foreach($valueArray as $entry) {
             // Einrückungsleerzeichen, Wert und Zeilenumbruch
             // dem Mailtext hinzufügen
             $mailText .= "   " . $value . "\n";
          } // ENDE: foreach
      } // ENDE: if
      // Wenn der Feldwert ein einzelner Feldwert ist:
      else {
          // "Feldname:", Wert und Zeilenumbruch dem Mailtext hinzufügen
          $mailText .= $name . ": " . $value . "\n";
      } // ENDE: else
   } // ENDE: foreach
} // if


// ======= Korrekturen vor dem Mailversand


// Wenn PHP "Magic Quotes" vor Apostrophzeichen einfügt:
 if(get_magic_quotes_gpc()) {
     // eventuell eingefügte Backslashes entfernen
     $mailtext = stripslashes($mailtext);
 }


// ======= Mailversand


// Mail versenden und Versanderfolg merken
$mailSent = @mail($mailTo, $mailSubject, $mailText, "From: ".$mailFrom);


// ======= Return-Seite an den Browser senden


// Wenn der Mailversand erfolgreich war:
if($mailSent == TRUE) {
   // Seite "Formular verarbeitet" senden:
   header("Location: " . $returnPage);
}
// Wenn die Mail nicht versendet werden konnte:
else {
   // Seite "Fehler aufgetreten" senden:
   header("Location: " . $returnErrorPage);
}


// ======= Ende


exit();


?>


Computer, Schule, HTML, programmieren, PHP

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}
Bild zum Beitrag
PC, Computer, Software, Technik, HTML, Webseite, programmieren, CSS, Technologie, fixieren

Wie kann ich eine zufällige Weiterleitung auf andere Website vom Cookie-Fenster aus realisieren?

Hallo,

ich wollte bei meiner Website von einem Cookie-Fenster auf eine zufällige Website weiterleiten. Man klickt also auf "Ablehnen" und wird zu einer der von mir angegebenen Websites geleitet. Ich kenne mich mit JavaScript und HTML nicht gut genug aus, um etwas wie das zu machen.

Hier ist das Cookie-Fenster bis jetzt:

<style>
  #mbmcookie {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #D8D8D8;
    padding: 20px;
    font-size: 14px;
    font-family: verdana;
  }

  #mbmcookie a.button {
    cursor: pointer;
    background: #A4A4A4;
    padding: 8px 20px;
    margin-left: 10px;
    border-radius: 5px;
    font-weight: bold;
    float: right;
  }

  #mbmcookie a.button:hover {
    background-color: #aaa;
  }

  #mbmcookie p.cookiemessage {
    display: block;
    padding: 0;
    margin: 0;
  }
</style>
<div id="mbmcookie">
  <a onClick="var d = new Date(); d = new Date(d.getTime() +1000*60*60*24*730);var w = false; w = false; document.cookie = 'mbmcookie=1; expires='+ d.toGMTString() + ';'; document.getElementById('mbmcookie').style.display = 'none';" class="button">Akzeptieren</a>
  <a href="https://www.google.com"onClick="var d = new Date(); d = new Date(d.getTime() +1000*60*60*24*730);var w = true; w = true; document.cookie = 'mbmcookie=1; expires='+ d.toGMTString() + ';'; document.getElementById('mbmcookie').style.display = 'none';" class="button">Ablehnen</a>
  <p class="cookiemessage">Diese Website verwendet Cookies..
</div>
<script>
  var r = 0;
  a = document.cookie;

  while (a != '') {
    while (a.substr(0, 1) == ' ') {
      a = a.substr(1, a.length);
    }

    cn = a.substring(0, a.indexOf('='));

    if (a.indexOf(';') != -1) {
      cw = a.substring(a.indexOf('=') + 1, a.indexOf(';'));
    }
    else {
      cw = a.substr(a.indexOf('=') + 1, a.length);
    }

    if (cn == 'mbmcookie') {
      r = cw;
    }

    i = a.indexOf(';') + 1;

    if (i == 0) {
      i = a.length
    }

    a = a.substring(i, a.length);
  }

  if (r == '1')
    document.getElementById('mbmcookie').style.display = 'none';
</script>
Computer, HTML, Webseite, programmieren, JavaScript, Webentwicklung

Website?

Hallo

Ich habe direkt 2 Fragen:

  1. Wieso ist um diese Navbar ein weisser Balken?
  2. Wenn ich über die Links(in der Navbar) hovere wird nur ein kleiner Hintergrund helleres blau. Jedoch möchte ich das von der Höhe die ganze Navbar helleres Blau wird. Wie kann ich dass machen?

Bei Fragen melden. Vielen Dank im Voraus

Lg Luca

CSS:
body{
    font-family:sans-serif;
    font-size: 16px;
}


/* Navbar */
.topnav {
    background-color: #1E262D;
    overflow: hidden;
  }


/* Logo Navbar */
.logonav{
    width: 20%;
    height: 20%;
    min-width: 120px ;
    min-height: 91px;
}
  
  /* Links */
  .topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    margin-top: 2%;
    margin-bottom: 2%;
  }


  /* Links Hover */
  .topnav a:hover {
    background-color: #2C3E50;
    background-size: 100%;
  }
  
  .topnav .icon {
    display: none;
  }


  /* Media Queries  */
@media screen and (max-width: 600px) {
    .topnav a:not(.child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      background-color: #1E262D;
      color: #ddd;
    }
  }
  
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #1E262D;
      color: #ddd;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }








HTML:
<!DOCTYPE html>
<html lang="en">


<!--Head-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="java.js"></script>
  </head>
<body>


<div class="topnav" id="myTopnav">
  <!--<img src="logoblue.png" alt="logo" class="logonav">-->
  <a href="contact.html">Contact</a>
  <a href="portfolio.html">Portfolio</a>
  <a href="index.html" >About me</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>


  </body>
</html>
Computer, Internet, HTML, Webseite, Design, CSS

CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}
Programm, HTML, 3D, programmieren, CSS, Code, Webdesign

Meistgelesene Beiträge zum Thema HTML