Webentwicklung – die neusten Beiträge

Verwandte Themen
Haufi96
27.08.2022, 00:25

Wie mit Pentesting starten?

hallo,

wie der Titel schon verrät würde ich gerne wissen wie man in das Thema Pentesting einsteigt. Da ich Krankheitsbedingt im Sommer Probleme habe hätte ich gern einen Job auch von Zu Hause aus, das Thema beschäftigt mich schon sehr lange, ich habe bei Hackthebox diese Tutorials gemacht, durch die Fragen welche man beantworten muss kommt man ja auf die Sprünge und Funktionen welche man dort quasi ausprobieren soll, ebenfalls habe ich bei Udemy einen Python Kurs, HTML Kurs, einen JavaScript und einen Kurs zum Hacken von Webanwendungen dort gekauft ( von TheMorpheus dem Youtuber)

ich habe alle Kurse mal angefangen jedoch denke ich selbst auch nicht das man alles 100% beherrschen muss, bzw. würde ich gern wissen was man denn wirklich braucht, ebenfalls habe ich erste Erfahrung mit Kali.

bei den meisten Tutorials steht ja das man keine Vorkenntnisse braucht es aber von Vorteil wäre Html und JavaScript zu lesen, bei dem Kurs von dem Hacken der Webanwendungen geht es zum Beispiel im XSS Angriffe und wie man diese quasi ausfiltern bzw. Umgehen kann, tatsächlich verstehe ich dort meist nur Bahnhof, liegt es daran das ich php und JavaScript noch nicht verstehe oder bin ich einfach nicht schlau genug? Kann ja natürlich auch sein das diese Sachen einfach zu hoch für mich sind oder ich nicht automatisch um genug Ecken denke das diese Sachen was für mich sind.

ich würde quasi gern Fehler in Websiten suchen, falls jemand dort Tipps hat wie ich anfangen kann und was ich dafür lernen soll bitte her damit! :)

ich bin nicht interessiert an quasi „einfach Trojaner per Mail an 10.000 Leute zu senden und Leute zu hacken, das wäre natürlich der einfachste weg, ich interessiere mich tatsächlich einfach wie man mit der Website vor dem Kopf Sachen findet oder sogar von dort in den Server kommt oder Ähnliches.

ich habe nach 22 Stunden html Kurs erstmal aufgehört was etwa 50% sind weil ich auch wenn ich eventuell jetzt Webseiten schreiben kann, und eventuell Fehler im Code sehen könnte nicht weiß wie ich sowas ausnutzen könnte oder dadurch in die Website oder das System kommt, so geht es mir bei den anderen Sachen natürlich auch.

über antworten von Personen die tatsächlich Ahnung zu diesem Thema haben freue ich mich sehr! Bitte keine Personen die quasi auf dem selben Wissensstand wie ich sind und grad dabei sind zu lernen, ich beschäftige mich damit schon Jahre mal mehr, mal weniger und möchte endlich mal konkrete Antworten! :D

Danke im Voraus

Technik, hacken, programmieren, Hackerangriff, Programmiersprache, Technologie, Webentwicklung, Spiele und Gaming
1 Antwort
Master643
08.08.2022, 10:06

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht: 

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so: 

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

PC, Computer, HTML, CSS, Webentwicklung, Keyframes
1 Antwort
gfdsgsdgsdg
26.07.2022, 02:25

PHP MySql Login / Passwort überprüfung?

Kann mir da jemand sagen wo der Fehler liegt ? Ich bin da am verzweifeln.

Login, Registrierung, Fehlermeldung, SQL Struktur habe ich alles in die Frage gepackt damit ihr einen besseren überblick habt.

login.php:

<?php
   $server = 'localhost';
   $user = 'root';
   $psw = null;
   $dbName = 'TestApp';
try {
   $conn = new PDO('mysql:host='.$server.';dbname='.$dbName.';charset=utf8', $user, $psw);
   $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   $conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

    $username = htmlspecialchars(stripslashes(trim($_POST['username'])));
    $password = htmlspecialchars(stripslashes(trim($_POST['password'])));

    $statement = $pdo->prepare("SELECT * FROM user WHERE username = :username");
    $result = $statement->execute(array('username' => $username
                                    ));
    $user = $statement->fetch();
    //Überprüfung des Passworts
    if ($user !== false && password_verify($username, $password['passwort'])) {
        $_SESSION['userid'] = $user['id'];
        die('Login erfolgreich. Weiter zu <a href="geheim.php">internen Bereich</a>');
    } else {
        $errorMessage = "Nutzername oder Passwort war ungültig<br>";
    }

}catch (PDOException $e) {
    print "Error!: " . $e->getMessage() ;
    exit;
  }

Konsole :

<br />
<b>Warning</b>: Undefined variable $pdo in <b>C:\xampp\htdocs\Test\assets\php\login.php</b> on line <b>14</b><br />
<br />
<b>Fatal error</b>: Uncaught Error: Call to a member function prepare() on null in C:\xampp\htdocs\Test\assets\php\login.php:14
Stack trace:
#0 {main}
 thrown in <b>C:\xampp\htdocs\Test\assets\php\login.php</b> on line <b>14</b><br />

register.php

<?php
   $server = 'localhost';
   $user = 'root';
   $psw = null;
   $dbName = 'TestApp';
try {
   $conn = new PDO('mysql:host='.$server.';dbname='.$dbName.';charset=utf8', $user, $psw);
   $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   $conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

// POST wird mit AJAX gesendet
   $username = htmlspecialchars(stripslashes((trim($_POST["username"])))) ;
   $password =  password_hash(htmlspecialchars(stripslashes((trim($_POST["password"])))) ,PASSWORD_DEFAULT) ;
   $cash =     100;

// Schreibt in die Datenbank

   $sql = "INSERT INTO user (username,password,cash) VALUES (:username,:password,:cash) ";
   $sqlvars = array("username"  => $username,
   "password" => $password,
   "cash" => $cash);
   $Abfrage = $conn->prepare($sql);
   $Abfrage->execute($sqlvars);


}catch (PDOException $e) {
  print "Error!: " . $e->getMessage() . "<br/>";
  exit;
}

SQL STRUKTUR :

Datenbankname : Test

Tabelle : user , 5 Spalten/Rows

  • id | int , (auto increment)
  • username | varchar , (unique)
  • password | varchar, (gehasht mit salt sha512)
  • cash | varchar
  • time | datetime, (mit current time stamp)

und ich mache alles mit AJAX.

-PDO statt mysqli

Computer, Webseite, Programmierer, programmieren, JavaScript, Datenbank, Informatik, MySQL, PHP, Webentwicklung, Backend, phpMyAdmin, PDO
3 Antworten
TimeTravel3
11.06.2022, 20:33

HTML Form auswerten und neue Füllen?

Hey!

Ich habe folgende Input form:

        <form action="/calculate" method="GET">
            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" ype="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>

Die eine Anfrage an meinen Server schickt und die ergebnisse dann auf eine neue Seite kommen. (Man wirt weitergeleitet)

Wie kann ich eine neue form mit der Antwort vom server füllen?

HTML, JavaScript, Webentwicklung
2 Antworten
Sktzaag
09.06.2022, 07:06

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>
Computer, Homepage, HTML, IT, Webseite, programmieren, CSS, JavaScript, Webdesign, Webentwicklung
2 Antworten
speedwanted55
03.06.2022, 23:58

PHP dynamisch mit unterschiedlichen Datenbanken verbinden?

Hallo!

Folgende Situation:

Es gibt mehrere Datenbanken. Eine für alle Installationen meines Projektes (beinhaltet Zugangsdaten für Schul-DB's) und dann weitere, schulspezifische Datenbanken, in denen jeweils andere Dinge stehen (wie zum Beispiel Schüler mit ihren Logindaten, etc.)

Der Benutzer ruft also eine Loginseite auf und gibt eine Schul-ID ein. Nach Buttonklick wird die an ein PHP-Skript übergeben, welche dann aus der Datenbank aller Instanzen die entsprechenden Zugangsdaten für die schulspezifische Datenbank ausliest (anhand der Schul-ID).

Anschließend sollen diese als Variable gesetzt werden, sodass von überall in diesem Skript darauf zugegriffen werden kann. Dabei soll das Ganze allerdings nur für diese Session ersetzt werden und nicht in der Datei. Sodass andere Schüler andere Schul-ID's und damit auch andere Schul-DB's verwenden können.

Wenn der Benutzer dann auf der Loginseite seinen Benutzernamen und sein Passwort eingibt, wird dieses wieder an das PHP-Skript übergeben, welches nun in der schulspezifischen DB nachschaut, ob dort der entsprechende Nutzer existiert.

Folgendes Schema habe ich bis jetzt:

class DB {
  private static $_api_username = "root";
  private static $_api_password = "";
  private static $_api_host = "localhost";
  private static $_api_name = "programmingnow_host";
  private static $_api;

  private static $_db_username = $_SESSION['school_db_user'];
  private static $_db_password = $_SESSION['school_db_pass'];
  private static $_db_host = "localhost";
  private static $_db_name = $_SESSION['school_db_name'];
  private static $_db;

  function __construct() {
    try {
      self::$_api = new PDO("mysql:host=" . self::$_api_host . ";dbname=" . self::$_api_name . ";charset=utf8mb4",  self::$_api_username , self::$_api_password);

      if (isset($_SESSION['school_db_name'])) {
        self::$_db = new PDO("mysql:host=" . self::$_db_host . ";dbname=" . self::$_db_name . ";charset=utf8mb4",  self::$_db_username , self::$_db_password);
      }
    }
    catch(PDOException $e) {
      echo "Datenbankverbindung gescheitert!";
      die();
    }
  }
  
  function connectToSchoolDB($school_id) {
    $stmt = self::$_api->prepare("SELECT instance_db_name, instance_db_user, instance_db_pass FROM instances WHERE instance_key=:instance_key");
    $stmt->bindParam(":instance_key", $school_id);
    $stmt->execute();
    $result = $stmt->fetch();
    $result['instance_db_name'] = $_SESSION['school_db_name'];
    $result['instance_db_user'] = $_SESSION['school_db_user'];
    $result['instance_db_pass'] = $_SESSION['school_db_pass'];
  }

  [..] // Der ganze Rest an Funktionen (wie Login)
}

Der obige Code funktioniert aber nicht.

Könnt ihr mir da helfen? Wie kann ich das realisieren bzw. wo liegt der Fehler?

Danke schon einmal im Voraus!

VG!

Computer, Technik, HTML, Webseite, programmieren, MySQL, PHP, Technologie, Webentwicklung
1 Antwort
verreisterNutzer
21.05.2022, 16:19

PHP Warning: Undefined array key "status"?

Hey,

Ich habe ein Array in PHP programmiert, welches per MySQL alle Sachen selektiert.

Nun werden aber die Arrays nicht gefunden.

Code:

$stmt = $link->prepare('SELECT * FROM tickets ORDER BY created DESC');
$stmt->execute();
$resultSet = $stmt->get_result();

// pull all results as an associative array
$tickets = $resultSet->fetch_all();

<?php foreach ($tickets as $ticket): ?>
  <a href="view.php?id=<?= $ticket['id'] ?>" class="ticket">
    <span class="con">
      <?php if ($ticket['status'] == 'open'): ?>
        <i class="far fa-clock fa-2x"></i>
      <?php elseif ($ticket['status'] == 'resolved'): ?>
        <i class="fas fa-check fa-2x"></i>
      <?php elseif ($ticket['status'] == 'closed'): ?>
        <i class="fas fa-times fa-2x"></i>
      <?php endif; ?>
    </span>
    <span class="con">
      <span class="title"><?= htmlspecialchars($ticket['title'], ENT_QUOTES) ?></span>
      <span class="msg"><?= htmlspecialchars($ticket['msg'], ENT_QUOTES) ?></span>
    </span>
    <span class="con created"><? date('F dS, G:ia', strtotime($ticket['created'])) ?></span>
  </a>

Fehler:

C:\xampp\htdocs\ticket.php on line 271
" class="ticket">
Warning: Undefined array key "status" in C:\xampp\htdocs\ticket.php on line 273

Warning: Undefined array key "status" in C:\xampp\htdocs\ticket.php on line 275

Warning: Undefined array key "status" in C:\xampp\htdocs\ticket.php on line 277

Warning: Undefined array key "title" in C:\xampp\htdocs\ticket.php on line 282

Warning: Undefined array key "msg" in C:\xampp\htdocs\ticket.php on line 283

Kann mir jemand sagen, ob ich etwas übersehen habe?

Computer, Webseite, programmieren, MySQL, PHP, Webentwicklung
2 Antworten
SpiegellegeipS
12.05.2022, 22:01

UX Design oder Medieninformatik studieren (oder anderes)?

Hallo zusammen, ich bin aktuell unentschlossen ob ich Medieninformatik oder UX Design an der IU studieren sollte. Vielleicht habt ihr Erfahrungen aus eurem Beruf oder Studium und könnt mir Tipps geben.

---

Zu meiner Geschichte:

ich bin aktuell seit 2 Jahren mit meiner IT Ausbildung fertig und arbeite als Prozessanalyst, Low Code Developer und teilweise Scrum Master. Ich entwickle gerne privat Software und Webseiten mit Freunden und würde lieber in die "richtige" (Web/)Softwareentwicklung gehen.

Nun hab ich vor einigen Wochen aus reinem Interesse mit dem Google UX Designer Coursera Kurs angefangen und bin echt begeistert von dem Kurs. Natürlich interessiert mich Programmierung auch, genau so wie meine aktuelle Stelle mit Prozessanalyse und Prozessmodellierung und und und. Ihr seht, ich habe viele Bereiche die mich interessieren, was blöd ist, da man ja lieber einen Spezialisten als einen Generalisten haben möchte.

Ich will unbedingt einen Bachelor und ggf. Master machen, das war schon immer mein Wunsch. Es würde sich anbieten dies im Fernstudium neben meiner Arbeit zu machen, die Zeit hätte ich. Nun bin ich unentschlossen ob Medieninformatik oder UX Design an der IU das richtige wäre.

Medieninformatik klingt nach einem guten Kompromiss zwischen Informatik und UX Design, da mich sowohl UX Design als auch Informatik/Entwicklung interessiert und ich noch unsicher bin ob ich als UX Designer in der Arbeitswelt etwas taugen würde.

Jedoch denke ich wäre es besser wenn ich entweder konkret Informatik oder UX Design studiere um einen klaren Weg zu gehen, als Medieninformatiker werde ich ja schon eher als Entwickler stellen finden und nicht als UX Designer, denke ich. Bin halt noch sehr unsicher worauf ich mich jetzt festlegen soll.

Habt ihr da vielleicht Tipps oder auch einfach eine persönliche Meinung zu meiner Situation?

Vielen Dank schonmal an alle!!

Studium, Fernstudium, Informatik, Medieninformatik, Softwareentwicklung, Webentwicklung, Ausbildung und Studium, IUBH, UX-Design, Beruf und Büro
1 Antwort
speedwanted55
29.04.2022, 11:29

Javascript nach Button Klick auf andere Webseite leiten?

Moin!

Ich hab folgende Frage: Wie kann ich es realisieren, dass, wenn ich auf den Success Button klicke, ich dann auf eine andere Seite geleitet werde? Der Link dahin ist auch ein Teil dynamischer PHP Code. Ihr werdet es sehen :)

Hier mein Code:

"use strict";!function(){const n=document.querySelector(".suspend-user"),t=(n&&(n.onclick=function(){Swal.fire({title:"Bist du sicher?",text:"Du kannst diesen Benutzer nicht wiederherstellen!",icon:"warning",showCancelButton:!0,confirmButtonText:"Fortsetzen",cancelButtonText:"Abbrechen",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary", text:"Abrechen"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Benutzer gelöscht!",text:"Der Benutzer wurde gelöscht.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Vorgang abgebrochen",text:"Der Benutzer wurde nicht gelöscht.",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}),document.querySelectorAll(".cancel-subscription"));t&&t.forEach(n=>{n.onclick=function(){Swal.fire({text:"Are you sure you would like to cancel your subscription?",icon:"warning",showCancelButton:!0,confirmButtonText:"Yes",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Unsubscribed!",text:"Your subscription cancelled successfully.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Cancelled",text:"Unsubscription Cancelled!!",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}})}();

Und ich möchte gern auf folgende Seite weitergeleitet werden:

index.php?page=deleteUser&&delete_id=<?=$user_data['user_id']?>

Könntet ihr mir hier behilflich sein? Wenn ich auf den Button "Fortsetzen" klicke erscheint noch eine Bestätigungsnachricht, wenn man dann auf "OK" klickt, soll der Redirect ausgeführt werden.

Danke euch im Vorraus!

HTML, programmieren, JavaScript, PHP, Technologie, Webentwicklung
2 Antworten
Dijkstra3006
06.04.2022, 23:52

Flask WTForms zum Anchor gehen, wenn Form nicht valid?

Ich habe ein Kontaktformular am Ende einer Webseite. Wenn ich das submitte und das Form ist valid, werde ich auf /contact weitergeleitet, der dann wieder auf / redirected und zum Anchor "contact-us" springt - soweit alles gut (vllt. aber auch nicht wirklich elegant)

@app.route("/", methods=['POST', 'GET'])
def index():
    form = ContactForm()
    if form.validate_on_submit():
        send_mail(request.form)
        return redirect('/contact')
    return render_template('index.html', form=form)


#Redirect
@app.route('/contact')
def success():
    form = ContactForm()
    return redirect(url_for('index', _anchor='contact-us'))

Wenn das Form aber nicht valid ist, werde ich natürlich nicht weitergeleitet, aber die Seite wird durch das SubmitField neu geladen und ich bin wieder ganz oben. So weiß der User nicht, dass die Kontaktanfrage fehgeschlagen (Fehler, wie z.B invalid Email werden unter dem Input Field angezeigt), da er erstmal runterscrollen müsste.

Wie kann ich bei nicht valid nach dem Reload wieder zum Anchor springen? (Alert Window oder so für den Fehler möchte ich vermeiden)

Außerdem: Ich hätte gerne eine Nachricht unter dem Form, wenn es erfolgreich gesendet wurde. Kann ich beim Redirect ein Argument mitgeben, sodass ein Text eingeblendet wird oder gibt es dafür eine elegante Lösung? ^^

Computer, Technik, Webseite, programmieren, Python, Webentwicklung, Flask
1 Antwort
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
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

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