Ich gehe davon aus, dass der include-Befehl die ausgelagerte Seite als ein Element einbindet und die Formatierungen übergeht.
Nein, der include-Befehl wirkt im wesentlichen genau so wie wenn Du den Inhalt der ausgelagerten Datei per Copy&Paste an der Stelle einfügst, wo das include steht. Die Elemente bleiben dabei aufgeschlüsselt und können durch CSS gestaltet werden. Sicher gibt es eine einfache Erklärung, warum das bei dir nicht funktioniert. Poste am besten mal die URL der Seite.
Bei mir funktioniert es, ich habe nur den Pfeil schwarz gemacht, damit man ihn besser erkennt:
Meine Kenntnisse was SVG betrifft sind begrenzt und es ist mir nicht gelungen, deine SVGs als data-URLs einzubinden. Da Du sie in Dateiform hast, empfehle ich, einfach die Dateien als Hintergrundbild einzubinden.
Da hast Du möglicher Weise Recht. Wenn man das auto-fit betrachtet, ist das Start/End u. U. praktischer. Die template-areas sind starr und entfalten ihren Vorteil eher, wenn man mit Cellspanning arbeitet, was hier nicht der Fall ist.
Von der Funktion her ist es gleich, aber persönlich finde ich das Verfahren mit den Areas übersichtlicher und einfacher.
Das geht auch ohne leeren Platzhalter und zwar am einfachsten mit template-areas. Dabei kannst Du mit einem Punkt einen leeren Bereich definieren:
footer .grid {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
/* grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); */
/* grid-auto-rows: 100px; */
grid-gap: 20px 20px;
grid-template-areas: "kontakt . social";
grid-template-columns: 1fr 1fr 1fr;
}Dazu musst du zusätzlich den beiden Containern ihren Namen zuweisen:
footer .grid .kontakt {
/* grid-colum: 1 / 2; */
grid-area: kontakt;
}Mit grid-column geht es auch, aber da hast Du einen Schreibfehler drin, das "n" am Ende vergessen.
Leider funktioniert dann das responsive Verhalten nicht mehr so elegant wie bei den .card darüber, man müsste das Umschalten auf zwei- und einspaltig mit Mediaqueries realisieren.
PS: Allerdings scheint das jQuery eine Leiche zu sein, ich denke, Du kannst es gefahrlos löschen und brauchst dann auch jQuery nicht einzubinden.
Die Console verrät, warum es nicht geht:
Uncaught ReferenceError: $ is not defined
Du hast offenbar jQuery nicht eingebunden, dadurch bricht das Skript ab und der Code für das Hervorheben wird nicht mehr ausgeführt.
Wenn es dir nur darauf ankommt, ob überhaupt ein Treffer da ist, kannst Du an dieser Stelle auch mit Vorteil eine der eingebauten Funktionen indexOf oder includes verwenden und damit die innere Schleife weg rationalisieren:
Wo hast Du dieses equals denn her? Mir ist es nicht bekannt und ich finde es auch nicht bei MDN. Eine Verwechslung mit Java? Dort gibt es diese Methode.
Ich sehe da am Anfang von fetch_data einen Fehler bei dem Pfeil:
if(isset($_POST["action"]))
{
$query = " SELECT * FROM product WHERE product_status = '1'
";
if(isset($_POST["minimum_price"], $_POST["maximum_price"])
&& !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"]))
{
// $query = // <---
$query .= " // so waere es richtig
AND product_price BETWEEN '".$_POST["minimum_price"]."'
AND '".$_POST["maximum_price"]."'
";
}
if (isset($_POST["brand"]))Was das Einrücken betrifft, selbstverständlich, siehe hier:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/text-indent
Der Grund, dass es nicht funktioniert, ist, dass das Javascript vor dem HTML-Element steht, d. h. wenn es ausgeführt wird, ist das Element noch nicht vorhanden.
Mehrere Lösungen:
1. Das Javascript hinter das HTML-Element platzieren.
2. Ohne Javascript: Den Wert von visibility oben im PHP definieren und dann im HTML einfügen:
<?php
$frame_200_visi = 'hidden';
$frame_201_visi = 'hidden':
if((isset($_GET['mod'])) && (($_GET['mod']) == "m")){
$frame_200_visi = 'visible';
}elseif((isset($_GET['mod'])) && (($_GET['mod']) == "n")){
$frame_201_visi = 'visible';
}
?>
<div id="frame_200" style="visibility:<?php echo $frame_200_visi; ?>"> <!-- "m" Confirm record modified --Für #frame_201 dann das gleiche.
3. Ebenfalls ohne Javascript: Eine Klasse, z. B. "visi" im PHP setzen, im HTML hinzu fügen und mit CSS die Sichtbarkeit steuern.
Ist deine Entscheidung, aber das ist dann in etwa so als würden wir die Abmessungen unserer Container mit Javascript ausrechnen anstatt Flex oder Grid zu verwenden und den Browser das tun zu lassen 
Im normalen Dokumentfluss von HTML wird ja sowieso alles untereinander dargestellt ?
Das trifft zu. Ich habe jedoch damit ein anderes Ziel verfolgt, nämlich dass der Header und das scrollbare main-Element die Höhe des Browserfenster genau ausfüllt. Anderfalls würde entweder eine Lücke oder eine zweite Scrollbar auftauchen. Und das lässt sich mit Flex am einfachsten erreichen, ohne dass Berechnungen und eine feste Höhe des Headers erforderlich sind.
Die Lösung mit Padding hatte ich auch als erstes angedacht, war dann aber davon abgekommen, weil beim Scrollen mit der Scrollbar dieses Padding sichtbar und das Layout stören würde. Außerdem muss man sich dabei auf eine feste Höhe des Header fest legen, so dass das Ganze nicht mehr voll responsiv ist.
Also beim Anspringen der bestimmen Bereiche wird ein Teil des Inhaltes von der fixierten Navigation verdeckt und der Nutzer muss zurück scrollen. Gibt es dafür eine Lösung ?
Eine ganz einfache Lösung dafür kenne ich nicht. Hier habe ich etwas ausgearbeitet, was auf einem Muster basiert, das unser MrMurphy früher mal vorgestellt hat:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>One Page Layout</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: arial;
}
header {
flex: 0 0 auto;
}
main {
flex: 1;
overflow-y: auto;
}
main>section {
height: 100%;
}
footer {
font-size: 2em;
}
/* Nav */
nav ul {
list-style: none;
display: flex;
flex-direction: row;
}
nav ul li {
padding: 0.5em;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="#section1">Home</a>
</li>
<li>
<a href="#section2">Page 1</a>
</li>
<li>
<a href="#section3">Page 2</a>
</li>
<li>
<a href="#section4">Page 3</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="section1">
Lorem ipsum dolor sit amet, ...
</section>
<section id="section2">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat ...
</section>
<section id="section3">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
possim assum...
</section>
<section id="section4">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet ...
</section>
</main>
<footer>This is the footer</footer>
</body>
</html>Wahrscheinlich wäre eine Alternative, position: sticky; zu verwenden, dann wird der Header nicht aus Fluss genommen und das Problem müsste entfallen. Aber ich habe das noch nicht ausgearbeitet.
Das heißt auch, dass der Elterncontainer mit den Anweisung zur Positionierung über Höhe verfügen muss ?
Ja, wie gesagt, funktioniert die Zentrierung nur wenn freier Raum da ist. Aber ich glaube bei deinem Layout war das der Fall, weil Du die Höhe auf 100vh gesetzt hattest.
Beide, justify-content: center;und align-items: center; , können ihre Wirkung nur entfalten wenn freier Raum vorhanden ist.
Bei dem div.content_box_seite_1 ist das horizontal nicht der Fall, die Kindelemente füllen den Raum vollständig aus. Vertikal, je nachdem was es für ein Bild ist, schon und dann funktioniert auch die vertikale Zentrierung.
Bei dem section#seite_1 ist jedoch in beiden Richtungen freier Raum da, horizontal weil Du dem div.content_box_seite_1 eine Breite von 50% gegeben hast, und die Zentrierung funktioniert.
Versuche, ob dir dies weiter hilft:
Ein Element an das Ende des Array stellen:
$Karten[] = $Karten[1];
An der alten Position bleibt es dabei erhalten.
Ein Element aus dem Array entfernen:
PS: Nein, passt nicht, Knr 3 wird vorletzte Zeile.