Verwandte Themen
Frage
von Newyorkshire
10.05.2021, 13:34
Bilderwechsel werden nicht zentriert HTML und CSS?

Hallo,

ich programmiere einen Bilderwechsler der auch funktioniert, aber nicht mittig dargestellt wird. Ich habe schon viel probiert, bis jetzt aber nichts hinbekommen. Hier der Code:

HTML:
<html>
<head>
 <meta charset="UTF-8">
 <meta name="description" content="This is a website"
 <title>Kunst Website</title>
 <link rel="stylesheet" href="../CSS/style_Slider.css">
</head>
<body style="background-color:white">
<div id="ud_slider" align= "center">
<img src= "./Bilder/Kunst1.jpg" class="slider_img klasse_Kunst1" >
<img src= "./Bilder/Kunst2.jpg" class="slider_img klasse_Kunst2">
<img src= "./Bilder/Kunst3.jpg" class="slider_img klasse_Kunst3">
<img src= "./Bilder/Kunst4.jpg" class="slider_img klasse_Kunst4">
</div>
</body>
</html>

CSS:

#ud_slider{
 position: relative;
}
.slider_img{
 position: absolute;
 height: 900px;
}
.klasse_Kunst1{
 animation: UD_KLASSE_Kunst1 infinite 20000ms;
 -moz-animation: UD_KLASSE_Kunst1 infinite 20000ms;
 -ms-animation: UD_KLASSE_Kunst1 infinite 20000ms;
 -o-animation: UD_KLASSE_Kunst1 infinite 20000ms;
 -webkit-animation: UD_KLASSE_Kunst1 infinite 20000ms;
}
.klasse_Kunst2{
 animation: UD_KLASSE_Kunst2 infinite 20000ms;
 -moz-animation: UD_KLASSE_Kunst2 infinite 20000ms;
 -ms-animation: UD_KLASSE_Kunst2 infinite 20000ms;
 -o-animation: UD_KLASSE_Kunst2 infinite 20000ms;
 -webkit-animation: UD_KLASSE_Kunst2 infinite 20000ms;
}
.klasse_Kunst3{
 animation: UD_KLASSE_Kunst3 infinite 20000ms;
 -moz-animation: UD_KLASSE_Kunst3 infinite 20000ms;
 -ms-animation: UD_KLASSE_Kunst3 infinite 20000ms;
 -o-animation: UD_KLASSE_Kunst3 infinite 20000ms;
 -webkit-animation: UD_KLASSE_Kunst3 infinite 20000ms;
}
.klasse_Kunst4{
 animation: UD_KLASSE_Kunst4 infinite 20000ms;
 -moz-animation: UD_KLASSE_Kunst4 infinite 20000ms;
 -ms-animation: UD_KLASSE_Kunst4 infinite 20000ms;
 -o-animation: UD_KLASSE_Kunst4 infinite 20000ms;
 -webkit-animation: UD_KLASSE_Kunst4 infinite 20000ms;
}
@-webkit-keyframes UD_KLASSE_Kunst1 {
 0% {opacity: 1;}
 20% {opacity: 1;}
 25% {opacity: 0;}
 100% {opacity: 0;}
}
@-webkit-keyframes UD_KLASSE_Kunst2 {
 0% {opacity: 0;}
 20% {opacity: 0;}
 25% {opacity: 1;}
 45% {opacity: 1;}
 50% {opacity: 0;}
 100% {opacity: 0;}
}
@-webkit-keyframes UD_KLASSE_Kunst3 {
 0% {opacity: 0;}
 45% {opacity: 0;}
 50% {opacity: 1;}
 70% {opacity: 1;}
 75% {opacity: 0;}
 100% {opacity: 0;}
}
@-webkit-keyframes UD_KLASSE_Kunst4 {
 0% {opacity: 0;}
 70% {opacity: 0;}
 75% {opacity: 1;}
 95% {opacity: 1}
 100% {opacity: 0;}
}

Wie bekomme ich die Bilder kursiv hin? Align: "center" klappt irgendwie nicht

Danke im vorraus ( :

Computer, HTML, Programmieren, CSS
1 Antwort
Frage
von ArduinoGeek
09.05.2021, 13:26
Ajax Kontaktformular Problem?

Moin an alle,

ich habe auf meiner Website ein Kontaktformular, welches ich per Ajax und PHP versende. Der Code dazu:

Ajax (JS):

$("#contact-form").submit(function () {
    event.preventDefault();
    $("#submit").attr("disabled", true);


    let formData = new FormData(this);


    if ($('#human-control').val() == "") {
        $.ajax({
            type: "POST",
            url: "/php/mail.php",
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                $('#from').val("");
                $('#mail').val("");
                $('#message').val("");
                $("#submit").attr("disabled", false);
                checkMailSuccess()
            }
        });
    }
    else {
        checkMailFailed();
    }
});






function checkMailSuccess() {
    $("#server-result-success").fadeIn('slow', function () {
        $("#server-result-success").show();
    });
}


function checkMailFailed() {
    $("#server-result-failed").fadeIn('slow', function () {
        $("#server-result-failed").show();
    });
}

checkMailSuccess und Failed sind einfach die Serverresultate, welche je nach dem ob´s erfolgreich gesendet wurde angezeigt wird. Am Anfang steht

if ($('#human-control').val() == "")

das dient zu Überprüfung ob da ein bot was geschrieben hat oder wirklich ein Mensch, ist aber egal für mein Problem.

der PHP Code:

<?php
if (!isset($_POST["from"])) {
    exit;
}
$empfaenger = "meine@email.de";
$absendername = $_POST["from"];
$absendermail = $_POST["mail"];
$betreff = "Kontaktformular";
$text = $_POST["message"];

mail($empfaenger, $betreff, $text, "From: $absendername <$absendermail>");
exit;
?>

Was ich jetzt noch extra haben will: Während die Nachricht per ajax und php gesendet wird, vergeht etwas Zeit so ca. 3s und in dieser Zeit soll der Nutzer angezeigt bekommen, dass etwas im Hintergrund passiert. Am besten wäre, wenn der Submit Button mit dem das Formular abgesendet wird den Text ändert. Also... im Submit Button steht "Senden" und wenn man draufdrückt und ajax sendet, soll der Text im Submit button zu "wird gesendet..." geändert werden und wenn gesendet wurde, dann soll der Text wieder zu "Senden" geändert werden. Wie ist das möglich :). Danke für jede Hilfe!

Hier noch der Submit Button:

<button type="submit" class="btn btn-success px-3" id="submit">Senden</button>
Website, HTML, Webseite, CSS, JavaScript, JS, AJAX, JQuery, PHP
1 Antwort
Frage
von USERUN
07.05.2021, 14:32
Gibt`s hier für auch eine kürzere Schreibweise? (Java Script)?
<script type="text/jscript">


function Wertetabelle(){


var Parabela = Number(document.getElementById("Parabel a").value.replace(/,/g,".")),
	Parabelb = Number(document.getElementById("Parabel b").value.replace(/,/g,".")),
	Parabelc = Number(document.getElementById("Parabel c").value.replace(/,/g,".")),
	Parabelx = Number(document.getElementById("Parabel x").value.replace(/,/g,".")),
	Parabel_Step = Number(document.getElementById("Parabel_Step").value.replace(/,/g,".")),
	
	


    Parabely = Parabela * Math.pow(Parabelx,2) + Parabelb*Parabelx + Parabelc,
	
	
	
	
	Parabel_x_Step  = Parabelx + Parabel_Step,	
	Parabel_x_Step2 = Parabelx + 2*Parabel_Step,
	Parabel_x_Step3 = Parabelx + 3*Parabel_Step,
	Parabel_x_Step4 = Parabelx + 4*Parabel_Step,
	Parabel_x_Step5 = Parabelx + 5*Parabel_Step,
	Parabel_x_Step6 = Parabelx + 6*Parabel_Step,
	Parabel_x_Step7 = Parabelx + 7*Parabel_Step,
	Parabel_x_Step8 = Parabelx + 8*Parabel_Step,
	Parabel_x_Step9 = Parabelx + 9*Parabel_Step,
	
	
	
	
	Parabel_y_Step  = Parabela * Math.pow(Parabel_x_Step,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step2 = Parabela * Math.pow(Parabel_x_Step2,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step3 = Parabela * Math.pow(Parabel_x_Step3,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step4 = Parabela * Math.pow(Parabel_x_Step4,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step5 = Parabela * Math.pow(Parabel_x_Step5,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step6 = Parabela * Math.pow(Parabel_x_Step6,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step7 = Parabela * Math.pow(Parabel_x_Step7,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step8 = Parabela * Math.pow(Parabel_x_Step8,2) + Parabelb*Parabelx + Parabelc,
	Parabel_y_Step9 = Parabela * Math.pow(Parabel_x_Step9,2) + Parabelb*Parabelx + Parabelc;
	
    


	
	




if (isNaN(Parabely)){
	
	window.alert("Bitte geben Sie nur Zahlen ein");
}


else if (Parabelx == " "){


document.getElementById("xyWerte").innerHTML="";
window.alert("Bitte geben Sie für x einen Wert ein");
}


else {


document.getElementById("xyWerte").innerHTML= ' <font face = "Cambria Math" size="8"> f(x)= ' + String(Parabely) + ' ' + String(Parabel_y_Step) + ' ' + String(Parabel_y_Step2)+ ' ' + String(Parabel_y_Step3)+ ' ' + String(Parabel_y_Step4)+ ' ' + String(Parabel_y_Step5)+ ' ' + String(Parabel_y_Step6)+ ' ' + String(Parabel_y_Step7)+ ' ' + String(Parabel_y_Step8)+ ' ' + String(Parabel_y_Step9) + '</p> <p>' + String(Parabelx) + '    ' + String(Parabel_x_Step) + '    ' + String(Parabel_x_Step2)+ '    ' + String(Parabel_x_Step3)+ '    ' + String(Parabel_x_Step4)+ '    ' + String(Parabel_x_Step5)+ '    ' + String(Parabel_x_Step6)+ '    ' + String(Parabel_x_Step7)+ '    ' + String(Parabel_x_Step8)+ '    ' + String(Parabel_x_Step9);




}
}


</script>
HTML, Programmieren, Informatik, web-development
3 Antworten
Frage
von Mocmichael140
05.05.2021, 20:44
wie kann ich hier in mein HTML ein Youtube video einbetten?

<html>

<head>

  <style>

     

    body{

      font-family: latha;

      color:white;

      background: url(wallpapertip_computer-science-wallpaper-hd_436321.jpg)no-repeat;

      background-size: cover;

    }

   

    .box{ width: 1200px;

    float:right;

    border:1px solid none;}

     

    .box ul li{

      width: 280px;

      float:left;

      margin: 20px auto;

      text-align: center;

    }

    .box ul li a{ text-decoration: none;

    color: grey;}

     

    .box ul li:hover{ background-color: green}

    .box ul li a:hover { color: white}

     

     

    .wd{

      width:1000px;

      height: 1500px;

      background-color: black;

      opacity: 0.9;

      padding: 55px;

    }

     

    .wd h1{

      text-align: center;

      text-transform: uppercase;

      font-weight: 100px;

    }

     

    .wd h2{

      text-align:justify;

      color: darkgray;

      font-weight: normal;

       

    }

   

  </style>

</head>

<body>

  <div class="box">

  <ul type="none">

    <li><a href="Bin%C3%A4rzahlen.html">Binärzahlen</a></li>

    <li><a href="Bin%C3%A4r%20Dezimal.html"> Binärzahlen in Dezimalzahlen </a></li>

    <li><a href="Dezimal%20Bin%C3%A4r.html"> Dezimalzahl in Binärzahlen</a></li>

    <li><a href="Bin%C3%A4r%20Addi.html"> Binärzahl addition</a></li>

    </ul>

  </div>

  <div class="wd">

   

    <h1> Wie rechnet man Binärzahlen in Dezimalzahlen um?</h1>

     

    <h2> binärzahlen informationen...........................</h4>

    

     

   

  </div>

</body>

</html>

YouTube, HTML
1 Antwort
Frage
von Master20050458
04.05.2021, 19:37
Website html css javascript - Animation on scroll ruckelt auf hochgeladener Seite (hostinger), lokal auf PC aber nicht?

Liebe Programmier-Community,

ich bin gerade dabei, eine Produktwebsite für einen Bekannten aufzubauen. Ich mache das Ganze mit html, css und javascript, noch dazu lernt man dabei viel.

Als Startseite der Produktseite soll eine Seite mit Animationen dienen. Sobald man scrollt, "fliegt" man auf das Produkt zu (Drohnenaufnahme), zusätzlich erscheint immer wieder Text mit z.B. Beschreibungen.
Im Endeffekt habe ich mich hier von der Apple Airpods Pro Seite inspirieren lassen, ausprogrammiert wurde aber alles von mir selbst. Die Seite soll also im Endeffekt ähnlich wie folgende wirken: AirPods Pro - Apple (AT) (natürlich mit anderen Bildern und Texten).

Um die Animationen zu realisieren geht Apple folgenden Weg: sie tauschen während dem Scrollen die source der Bilder aus, dadurch wirkt das Ganze wie ein abgespieltes Video.

Nun zu meiner Situation:
Ich habe das Ganze jetzt grob umgesetzt. Lokal auf meinem PC läuft alles wunderbar, die Animationen laufen extrem flüssig.
Hier ein Link zum Downloaden und ausprobieren: https://mega.nz/folder/a6pz1KpI#tm9swYA87tPMK5RzKjROsg

Probehalber habe ich jetzt versucht, die Seite auf unseren Webspace hoch zu laden. Wenn man die Website dann im Internet über die URL aufruft, werden die Bilder der Animationen allerdings so langsam aktualisiert, dass man gar nicht wirklich erkennt, dass das Ganze eine Animation sein soll.
Kann sich jemand vorstellen, woran das liegt? Bei der Apple Website funktioniert das tadellos.

Ich habe mir schon über das Downloadverhalten der Bilder Gedanken gemacht bzw. werden diese überhaupt gedownloaded? Falls ja, kann man das gleich nach dem Laden der Website erzwingen?
Hier ein Link zur Website (besteht evtl. nur vorübergehend):
Lebensfahnen

Worin könnte das Problem sonst noch bestehen?

Danke im Voraus, ich freue mich auf eure Antworten!

Liebe Grüße
Simon Benedikt Fischer

Computer, Website, Animation, Technik, HTML, Programmieren, CSS, JavaScript, Technologie, Webspace
0 Antworten
Frage
von Hekates
01.05.2021, 23:43
Weiß jemand, wie man das repariert?

Hi, ich habe folgendes Problem:

Kann jemand den CSS-Code ergänzen?

@import url('https://fonts.googleapis.com/css?family=roboto!:300,400,500,700,900&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.hintergrund {
  position: relative;
  background: dodgerblue;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: cornsilk;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .2);
}

.box .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
}

.box .percent svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
}

.box .percent svg circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  fill: none;
  stroke-width: 10;
  stroke: #000;
  transform: translate(5px, 5px);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  stroke-linecap: round;
}

.box .percent svg circle:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke-dashoffset: 0;
  stroke: #e4dfcc
}

.box .percent svg circle:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke-dashoffset: calc(440 - (440 * 60/ 150));
  stroke: #03aefd
}

.box .percent .number {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111;
}

.box .percent .number h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 23px;
}

.box .percent .number h2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
}

.box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 0 0;
  color: #999;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 20px;
}
Weiß jemand, wie man das repariert?
HTML, Webseite, CSS, Webdesign
0 Antworten
Frage
von RANGObro
01.05.2021, 19:04
TinyMCE gibt nicht ganzen Inhalt zurück?

Folgender Code.

tinymce.init({
        selector: 'textarea#editor',
        language: 'de',
        menubar: true,
        remove_linebreaks: true,
        menubar: 'edit insert view format table tools',
        toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code',
        forced_root_block: 'p',
        element_format : 'html',
        keep_styles: false,
        width: '100%',
        height: '60vH',
        elementpath: false,
        content_style: '* { border-color: #ced4da!important; }'
    });

Dann in nodeJS:

router.post('/create', (req, res) => {

    console.log(req.body.content)

    return res.send('created')
})

Es fehlt aber immer die hälfte der Eingabe. Ich habe es erstmal über AJAX gemacht und war dann davon ausgegangen, dass es zu lang ist aber es war immer Unterschiedlich lang. Dann habe ich normal ein Form Submit benutzt und es ist immer noch falsch. Wenn ich immer den selben Text benutze fehlt auch das selbe. Woher kommt das? Ich habe dann einfach einmal AJAX benutzt und anstatt direkt in r.send() den Inhalt zu definieren habe ich erst eine Variable definiert und dann auch ausgegeben. Da war wieder alles richtig. Gibt es eine Art Begrenzung die den Text kürzt und wenn ja, wie kann ich sie umgehen?

Computer, Website, Technik, HTML, Programmieren, CSS, Informatik, node.js
1 Antwort
Frage
von Gnther364
01.05.2021, 13:08
HTML: Bild nach rechts packen?

Hi! Hier ist ein Code. welchen ich geschrieben habe. Ich würde gerne das Bild zu einem anderen Punkt schieben. Ich habe auch einen Screenshot in den Anhang gepackt, der verdeutlichen soll, wie ich mir das Ganze vorgestellt habe. Hat irgendwer Lösungsansätze? Danke im Vorraus!

<!DOCTYPE html>
<html>
 <head>
  <title>Steckbrief</title>
 </head>
 <body>
<table border="1">
<tbody>
<IMG src="https://www.propferd.at/download/files/%7B27297BEB-1128-4854-9AF4-6F235664B69F%7D/Esel-Weide-Fotolia.jpg" alt="Esel">
<tr>
<th colspan="2">Steckbrief: Esel</th>
</tr>
<tr>
<td>Kategorie:</td>
<td>Daten:</td>
</tr>
<tr>
 <td>Name:</td>
 <td>Esel</td>
 </tr>
<tr>
 <td>Klasse:</td>
 <td>Säugetier</td>
 </tr>
 <tr>
 <td>Größe:</td>
 <td>100 - 150</td>
 </tr>
 <tr>
 <td>Gewicht:</td>
 <td>100 - 350kg</td>
 </tr>
  <tr>
 <td>Alter:</td>
 <td>10 - 35 Jahre</td>
 </tr>
  <tr>
 <td>Aussehen:</td>
 <td>grau, braun</td>
 </tr>
   <tr>
 <td>Ernährungstyp:</td>
 <td>Pflanzenfresser (herbivor)</td>
 </tr>
   <tr>
 <td>Nahrung:</td>
 <td>Graß</td>
 </tr>
    <tr>
 <td>Verbreitung:</td>
 <td>Weltweit</td>
 </tr>
    <tr>
 <td>ursprüngliche Herkunft:</td>
 <td>vermutlich Asien oder Afrika</td>
 </tr>
<tr>
 <td>Schlaf-Wach-Rhythmus:</td>
 <td> tag- und nachtaktiv</td>
 </tr>
 <tr>
 <td>Lebensraum:</td>
 <td>Gebirge, Steppe, Trockengebiete</td>
 </tr>
  <tr>
 <td>natürliche Feinde:</td>
 <td>Raubtiere</td>
 </tr>
  <tr>
 <td>Sozialverhalten:</td>
 <td>Familienverband</td>
 </tr>
   <tr>
 <td>Vom Aussterben bedroht:</td>
 <td>Hausesel nicht gefährdet, Wildesel gefährdet</td>
 </tr>
</body>
</html>
HTML: Bild nach rechts packen?
Computer, HTML, Programmieren
3 Antworten

Meistgelesene Fragen zum Thema HTML
Mehr meistgelesene Fragen zu HTML