HTML – die neusten Beiträge

Verwandte Themen
SaftLukas
24.03.2022, 16:34
Mit Bildern

HTML Die Tabelle rutscht immer nach unten?

Hallo!
Ich habe momenatn ein Schulprojekt bei dem ich eine Fahradshop mit html bauen soll. Ich habe Bilder in eine Tabelle hinzugefügt (weil es uns so vorgegeben wurde) was auch ohne Probleme geklappt hat. Danach wollte ich unter der Tabelle einen Strich setzten welcher dann aber über der Tabelle angezeigt wurde.

Hier der Code:

<html>
<title>Fahrrad Verkauf</title>
<head><center>
<img src=leisteprodukte.png usemap="#image-map">
</center>
</head>
<body bgcolor=#CAE1FF><center>
  <br><br><br>
  <map name="image-map">
      <area target="" alt="" title="" href="Produkte.html" coords="3640,911,3974,990" shape="rect">
      <area target="" alt="" title="" href="Kaufen.html" coords="4320,990,4039,906" shape="rect">
      <area target="" alt="" title="" href="Startseite.html" coords="4390,889,4732,986" shape="rect">
  </map>
  <map name="1">
    <area target="" alt="Trackind Rad1" title="Trackind Rad" href="Fahrrad1.html" coords="2,1,610,610" shape="rect">
  </map>
  <map name="2">
    <area target="" alt="Trackind Rad2" title="Trackind Rad" href="Fahrrad2.html" coords="2,1,610,610" shape="rect">
</map>
<map name="3">
  <area target="" alt="Mountainbike1" title="Mountainbike" href="Fahrrad3.html" coords="2,1,610,610" shape="rect">
</map>
<map name="4">
  <area target="" alt="Mountainbike2" title="Mountainbike" href="Fahrrad4.html" coords="2,1,610,610" shape="rect">
</map>
<map name="5">
  <area target="" alt="City Rad1" title="City Rad" href="Fahrrad5.html" coords="2,1,610,610" shape="rect">
</map>
<map name="6">
  <area target="" alt="City Rad2" title="City Rad" href="Fahrrad6.html" coords="2,1,610,610" shape="rect">
</map>
<map name="7">
  <area target="" alt="Kinder Rad1" title="Kinder Rad" href="Fahrrad7.html" coords="2,1,610,610" shape="rect">
</map>
<map name="8">
  <area target="" alt="Kinder Rad2" title="Kinder Rad" href="Fahrrad8.html" coords="2,1,610,610" shape="rect">
</map>
<br><br><br><br><br><br>
<span style="font-size:70">Drücke auf die Bilder für eine Groß-Ansicht.</span>
<table bordercolor=#6381d8 border=1>
   <tr>
    <td><img src=Fahrrad1.jpg usemap=#1></td>
    <td><img src=Fahrrad2.jpg usemap=#2></td>
    <td><img src=Fahrrad3.jpg usemap=#3></td>
    <td><img src=Fahrrad4.jpg usemap=#4></td>
  </tr>
   <tr>
    <td><img src=Fahrrad5.jpg usemap=#5></td>
    <td><img src=Fahrrad6.jpg usemap=#6></td>
    <td><img src=Fahrrad7.jpg usemap=#7></td>
    <td><img src=Fahrrad8.jpg usemap=#8></td>
  </tr><br>
  <hr color=#6381d8 size=10 width=100%>
</body>
</html>

Bild zum Beitrag
HTML, Webseite, Webentwicklung, Tabelle
2 Antworten
LilLinden
20.03.2022, 20:09
Mit Links

Dark-Mode White-Mode Schalter Position verschieben?

Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)

Hier der Code der HTML-Seite:

<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>

<form>

<!-- LOGO -->

<div class="Logo">

<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>

</div>

<!-- ----- -->

<!-- HIER BEFINDET SICH DIE FRAGE -->

<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">

<div class="curtain"></div>

<!-- UEBERSCHRIFT -->

<div class="Ueberschrift">

<h1> <b> ÜBERSCHIRFT </b> </h1>

<h2> IMPRESSUM </h2>

</div>

<!-- ----- -->

<!-- BUTTONS -->

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<!-- ----- -->

<!-- KONTAKT -->
<div class="Impressum">

<h2> <u> TEXT </u> </h2>

</div>

<center>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>

<p> TEXT </p>

</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">

<h2> <u> IMPRESSUM </u> </h2>

<h3>TEXT</h3>

<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>

<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>

</p>
<p>
TEXT
</p>

<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

</div>

<!-- ----- -->





</form>

</body>

</html>
Computer, Technik, HTML, programmieren, CSS, Technologie
1 Antwort
Ichbinsnicht07
15.03.2022, 14:52
Mit Bildern

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier: 

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

Bild zum Beitrag
Computer, Homepage, HTML, Webseite, programmieren, CSS, JavaScript, Hosting, Webentwicklung
1 Antwort
SaftLukas
24.02.2022, 18:21

HTML/Javscript Euro umrechnen?

Hallo!
Ich bin momentan am verzweifeln.

Ich probiere nun schon seit 1 Stunde einen Euro Umrechner mit Javascript zu progamieren.

Zuerst hat es auch ganz gut geklappt aber als ich mehrere gleichzeitig umrechnen wollte muss ich wohl einen Fehler gemacht haben.

Kennt sich irgend jemand aus und weiß was ich falsch gemacht habe?

Ich bedanke mich schon mal im Voraus :)

Hier der Code für den Rechner der Euro in mehrere Währungen Umrechnen soll: 

<html>
<head><center>
<title>Umrechnung Euro - ? </title>
<script language="JavaScript">
function Umrechnung(){



    var EUROBetrag, DMBetrag, DOLLARBetrag, KRONENBetrag;

     EUROBetrag = document.Umrechnung.EURO.value;
     DMBetrag = document.Umrechnung.DM.value;
     DOLLARBetrag = document.Umrechnung.DOLLAR.value;
     KRONENBetrag = document.Umrechnung.KRONEN.value;



    EUROBetrag = DMBetrag / 1.95583;
    EUROBetrag = DOLLARBetrag / 1,13370;
    EUROBetrag = KRONENBetrag / 7,44;

  document.Umrechnung.DM.value=DMBetrag;
  document.Umrechnung.DOLLAR.value=DOLLARBetrag;
  document.Umrechnung.KRONEN.value=KRONENBetrag;

}// Ende
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen Euro Beträge umrechnen.
<br>
<br>
<form   name="Umrechnung">

EURO   <input type="text"  size="20"  name="Euro">
<br>
<p>
<input  type="button" value="Rechne um" onclick="Umrechnung()">
<p>
DM  <input type="text"  size="20"  name="DM">
DOLLAR  <input type="text"  size="20"  name="DOLLAR">
KRONEN <input type="text"  size="20"  name="KRONEN">

<br>

</form>
</center>
</body>
</html>

Und hier der Code für den Rechner der DM in Euro umrechnen soll und funkioniert:

<html>
<head><center>
<title>Umrechnung Euro - DM </title>
<script language="JavaScript">
function EuroUmrechnung(){



    var DMBetrag, EUROBetrag;

     DMBetrag = document.Umrechnung.DM.value;



    EUROBetrag = DMBetrag / 1.95583;

  document.Umrechnung.EURO.value=EUROBetrag;


}// Ende der Funktion
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen DM- Beträge in EURO umrechnen.
<br>
<br>
<form   name="Umrechnung">

DM   <input type="text"  size="10"  name="DM">

<br>
<p>
<input  type="button" value="Rechne um" onclick="EuroUmrechnung()">

<p>
EURO   <input type="text"  size="20"  name="EURO">

</form>
</center>
</body>
</html>
Computer, HTML, JavaScript, Informatik
1 Antwort
trpwrmusic
19.02.2022, 12:41

PHP XLSX Writer überspringt erste Zeile - was tun?

Hey!

Ich habe gestern die Erweiterung PHP XLSX Writer gefunden und meinem System hinzugefügt. Ziel: Datenbank mit PHP (und mysqli) in ein Excel Dokument umwandeln. Irgendwie überspringt er die erste Zeile und spuckt mir im Dokument erst alles ab id=2 aus... Wisst ihr woran das liegt?

Danke schonmal für eure Antworten!

Hier noch der Quellcode von meiner export.php: 

<?php
include "config.php";
include_once("../includes/excel/xlsxwriter.class.php");
//ini_set('display_errors', 0);
//ini_set('log_errors', 1);
//error_reporting(E_ALL & ~E_NOTICE);


    date_default_timezone_set('Europe/Berlin');
    $filename = "PZUS_" . date('Y-m-d') . ".xlsx";


    header('Content-disposition: attachment; filename="'.XLSXWriter::sanitize_filename($filename).'"');
    header("Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    header('Content-Transfer-Encoding: binary');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');   
    $sql="SELECT * FROM tbl_contact";
    $result = $link->query($sql); 
    $row = $result->fetch_assoc(); 
    $header = array(
      'ID'=>'string',
      'Nachname'=>'string',
      'Vorname'=>'string',
      'Klasse'=>'string',
      'Bemerkung'=>'string',
      'Datum'=>'string',
      'Email'=>'string',
      'Adresse'=>'string',
      'Tel'=>'string',
    );
    $writer = new XLSXWriter();
    $writer->writeSheetHeader('PZUS-1', $header);
    $array = array();
    while ($row=$result->fetch_assoc())
    {
        $array[1] = $row['id'];
        $array[2] = $row['fldSurname'];
        $array[3] = $row['fldFirstname'];
        $array[4] = $row['fldClass'];
        //$array[4] = $row['fldCourse'];
        $array[5] = $row['fldDmg'];
        $array[6] = $row['fldDate'];
        $array[7] = $row['fldEmail'];
        $array[8] = $row['fldAdress'];
        $array[9] = $row['fldTel'];
        $writer->writeSheetRow('PZUS-1', $array);
    };


    //$writer->writeSheet($array,'Sheet1', $header);//or write the whole sheet in 1 call    


    $writer->writeToStdOut();
    //$writer->writeToFile('example.xlsx');
    //echo $writer->writeToString();
    exit(0);
Computer, Microsoft Excel, HTML, programmieren, Export, MySQL, PHP
2 Antworten
Cinemaster679
13.02.2022, 13:19
Beitrag wurde 1 Mal erneut eingestellt

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });
Computer, HTML, programmieren, CSS, JavaScript, Add-on
3 Antworten
ArduinoGeek
10.02.2022, 22:30

PHP User verifizieren?

Hi, ich bin grad dabei ne Website für ein kleines Startup zu programmieren und hänge grad am Login System. Ich hab dabei kein wirkliches Problem sondern eher ne allgemeine Frage:

Wie kann man sicher und sinnvoll einen User verifizieren

Momentan mache ich das so:
Ein User registriert sich, woraufhin in der Datenbank für diesen User ein einzigartiger "Verifizierungscode" generiert wird. Dieser wird dann, wenn er sich einloggt, auf dem PC des Users per Cookie gespeichert. Wenn der User jetzt auf sein Dashboard zugreifen will, wird einfach, wenn vorhanden, der Inhalt des Cookies mit allen Verifizierungscodes in der Datenbank abgeglichen und bei der Zeile, in der die Codes übereinstimmen, wird daraus dann der User geladen. Hoffe das ist verständlich, ansonsten einfach nachfragen.

Den Inhalt des Cookies kann man auch nicht durch irgendwelches rumprobieren herausfinden, da ich diesen mit password_hash() gehashed habe.

Mein Problem jetzt: Ich habe mir einige Docs und Sicherheitsberichte durchgelesen in denen häufig gesagt wird, man solle den User nicht nur anhand eines Cookies automatisch einloggen. Nur leider wird nirgends erwähnt, was man sonst noch so machen könnte, da die Gefahr, dass der Cookie geklaut wird oder ähnliches ja schon besteht. (Cookie Hijacking).

Hat jemand ne sinnvolle Antwort auf mein Problem oder andere Lösungsvorschläge?

Computer, Internet, HTML, Webseite, JavaScript, Cookies, Datenbank, MySQL, PHP
2 Antworten
BenIEbelt
31.01.2022, 13:47

scroll animation mit javascript?

 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

 Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

Computer, HTML, programmieren, CSS, JavaScript, Webdesign
2 Antworten
Federschwinge
28.01.2022, 10:56

PHP - alles in einen großen PHP Befehl packen?

Heya!

Einmal noch ne "kleine" Frage zu PHP.

Ich soll meine Nav so umschreiben, dass es komplett in einem großen PHP "Container" ist und nicht html kommt, php, dann wieder html, wieder php

Habs bisschen mittels echo probiert aber anscheinend ist das nicht komplett zielführend wie ich das dachte

Der Code:

<ul class="nav">
    <li><a class="navtext <?php echo ($page == 'home.php') ? "active":"" ?>"
            href="index.php?page=home&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_HOME']; ?>        
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'ueberuns.php') ? "active":"" ?>"
              href="index.php?page=ueberuns&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_ABOUT_US']; ?>
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'karriere.php') ? "active":"" ?>"
           href="index.php?page=karriere&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_CARRER']; ?>    
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'blog.php') ? "active":"" ?>"
           href="index.php?page=blog&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_BLOG']; ?>        
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'kontakt.php') ? "active":"" ?>"
           href="index.php?page=kontakt&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_CONTACT']; ?>    
    </a></li>
    
    <li><a class="navtext <?php echo ($page == 'team.php') ? "active":"" ?>"
           href="index.php?page=team&amp;lang=<?php echo $langKey; ?>">
        <?php echo $lang['MENU_TEAM']; ?>        
        </a></li>
</ul>
HTML, PHP
4 Antworten

Meistgelesene Beiträge zum Thema HTML
Mehr meistgelesene Fragen zu HTML