...nur lokal aufrufe, müsste ich auch damit keine Probleme habe (?).
Doch... absolute Pfade verursachen bei lokalen Installationen schon hin und wieder Probleme!
Du solltest relative Pfade versuchen... also deine Font Datei in ein Unterverzeichnis deines Homepageverzeichnis kopieren und den Aufruf dann mit
src: url('mein_unterverzeichnis/gothamlight.ttf') format('truetype');versuchen.
Tabellen sind von ihrer Natur wenig responsive - aber man kann, wenn man sich nicht daran stört, dass die Inhalte irgendwann bei kleinerem Bildschirm 'umbrechen' und das eventuell unschön aussieht, mit CSS durchaus was machen.
Zunächst mal solltest du aber deinen Code 'validieren' - du hast da <li> </li> Elemente drin, die da nichts zu suchen haben und nur Fehler verursachen.
und dann könntest du es mal diesem CSS Code probieren.
* {
box-sizing: border-box;
}
.article {
position: relative;
width: 100%;
max-width: 1000px;
margin: 15vh auto 0 auto;
border: 1px solid #000;
border-radius: 0px 5px 5px 5px;
background-color: #FFFEFE;
padding-left: 10px;
padding-top: 7.1px;
padding-bottom: 10.2px;
}
table {
width: 100%;
margin: 0 auto;
}
.Test {
width: 100%;
height: 50px;
padding: 5px;
}Ist jetzt nur ein Versuch, um die Tabelle responsive zu machen, da ich aber nicht weiß, wie du dir das Layout vorstellst, musst du da wohl noch ein bisschen dran basteln.
Der Unterschied zwischen mit * und ohne * besteht darin. dass ohne * der Container #tg-container angesprochen und formatiert wird und mit dem * werden alle Inhaltselemente von #tg-container formatiert! Das sind also zwei komplett verschiedene Dinge!
Dann sollte dein erster Schritt sein, dich gezielt mit den Grundlagen... und zwar hier mit den CSS Selektoren.. zu beschäftigen...
https://wiki.selfhtml.org/wiki/CSS/Selektoren
oder hier
https://www.w3schools.com/css/default.asp
Mit diesen Selektoren kannst du jedes einzelne Element gezielt ansprechen.
Und das Instrument, um diese Selektoren herauszufinden ist zum Einen, dass du die Seite selbst geschrieben hast und dann eben weißt, welcher Selektor richtig ist oder zum Anderen, die Nutzung des 'Inspektors', der dir die Informationen zu jedem Element anzeigt!.
Dann bitte in der Anweisung das Sternchen * weg... das gehört da nicht hin!
Dann stelle eine gezielte Frage und gib uns einen Link zur Seite - wie sollen wir sonst wissen, was du genau genau geändert haben willst und was dazu erforderlich ist.
Der Weg über die Identifizierung des 'Selektors' des Elementes mittels Webentwicklertool (Inspektor) ist aber schon genau richtig. Mit dem richtigen Selektor und dem gewünschten CSS Code im zusätzlichen CSS sollte es dann klappen.
Teste bitte mal das...
#tg-container {
clear: both;
}Damit sollte das Problem nicht mehr auftreten.
Bei WP gibt es für individuelle CSS Änderungen bzw. Ergänzungen das 'zusätzliche CSS'. Dort solltest du alle deine CSS Codes eintragen, dann gehen sie auch nicht bei eventuellen Updates des Themes verloren.
Sorry... aber das ist so falsch und fehlerhaft, wie es nur sein kann! Ein Wunder, dass der Browser überhaupt was anzeigt!
Mehrfach vergebene ID's... identische Formate für unnötige Elemente... ein wildes Durcheinander von Table , td, ul, li... neeee....
Versuche es mal so....
<!DOCTYPE html>
<html lang="de">
<head>
<title>Pizza Palace</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="Pizza.css"> -->
<style>
body {
background-color:#645855
}
#header {
background-color: #FFFFFF ;
color: #333;
/*float: center;*/
text-align: center;
margin: 0px auto;
width: 80%;
height: 200px;
}
#logo {
/*background: url('Pizza.jpg') no-repeat;*/
float: left;
width: 200px;
height: 200px;
}
nav {
width:500px;
font-family:calibri;
}
ul {
list-style: none;
padding: 15px;
}
li {
display: inline-block;
padding: 10px;
margin-right: 10px;
border-right:2px solid #d3d3d3;
}
li:hover {
background-color:#d3d3d3;
}
a {
color:black;
text-decoration:none;
}
.bereich {
background-color: grey;
width: 400px;
height: 200px;
padding: 10px;
margin: 15px;
border: 2px solid;
border-radius: 8px;
}
.Bild {
float: left;
}
</style>
</head>
<body>
<div id="header">
<a href="Pizza.html"><img src="Pizza.jpg" id="logo" alt="Pizza"></a>
<ul class="navigation">
<li><a href="Startseite.html">Startseite</a></li>
<li><a href="Pizza.html">Pizza</a></li>
<li><a href="Pasta.html">Pasta</a></li>
<li><a href="Salate.html">Salate</a></li>
<li><a href="Getraenke.html">Getränke</a></li>
<li><a href="Warenkorb.html">Warenkorb</a></li>
</ul>
</div>
<form action="#" method="get">
<!--1.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Margarita </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Margarita">In den Warenkorb</button>
</div>
<!--2.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Salami </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Salami">In den Warenkorb</button>
</div>
<!--3.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Quatro Stagioni </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Stagioni">In den Warenkorb</button>
</div>
<!--4.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Roma </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Roma">In den Warenkorb</button>
</div>
<!--5.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Dolce Vita </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Dolce">In den Warenkorb</button>
</div>
<!--6.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Tonno </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Tonno">In den Warenkorb</button>
</div>
<!--7.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza 4 Formagio </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Formagio">In den Warenkorb</button>
</div>
<!--8.Pizza-->
<div class="bereich">
<img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
<h2> Pizza Sole mio </h2>
<h3> 7€ </h3>
<h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
<button name="bestellung" type="submit" class="Bestellknopf" value="Sole">In den Warenkorb</button>
</div>
</form>
</body>
</html>Das ist angelehnt an das mathematische Koordinatensystem (x - y - z). X und Y bestimmen die Position in der Breite und der Höhe - kommt dir bekannt vor?
Z regelt in diesem System die Tiefe, also wie weit etwas vorne oder hinten ist. Mit einem hohen z-index ist das Element weit im Vordergrund und legt sich über Elemente mit niedrigerem z-index.
Dein Slider hatte vorher z-index: 0; - aber ist auch gleichzeitig mit position: fixed; etwas störrisch, was diese z-index Geschichte angeht. Mit -1 hat es ja aber jetzt geklappt... oder?
Versuche mal den z-index des Sliders auf -1 zu setzen.
.cb-slideshow {
z-index: -1;
}Das liegt daran, dass die inneren Container mit 'align-items: center;' sich vertikal zentriert anordnen - es sind aber auch andere Ausrichtungen möglich:
Siehe hier:
Kontrolliere mal die Klammern { } in deinem CSS - das was du hier gepostet hast ist auf jeden Fall falsch!
Das mit dem 'float' ist nur die zweitbeste Idee.
Versuche es mal mit 'Flex-Box'.
Die Größe eines Element wird durch den Inhalt bestimmt, es sei denn, du machst Größenvorgaben mit CSS. Damit deine Boxen auch ohne Inhalt sichtbar sind, müsstest du zusätzlich ein 'min-height' angeben.
Etwa so:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<style>
body {
margin:0;
}
header {
width: 100%;
height: 384px;
margin-bottom: 50px;
background: #33ccaa;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1040px;
margin:0 auto 50px auto;
}
article {
background:#d6e1de;
width: 65.86538461538461%;
min-height: 100px;
}
aside {
background:#a7b6b3;
width:29.326923076923077%;
min-height: 100px;
}
</style>
</head>
<body>
<header></header>
<div class="container">
<article>
</article>
<aside>
</aside>
</div>
</body>
</html>Die Ränder kommen meistens vom html und body.
Da hilft
html, body {
margin: 0px;
padding: 0px;
}
Mal Eines nach de Anderen...
Die 'Urform' der Funktion substr() sieht so aus
string substr ( string $string , int $start [, int $length ] )
daraus machst du
substr($row['inhalt'], strrpos(substr($row['inhalt'], 0, stripos($row['inhalt'], $a3)), " "), 200)
Der grüne Teil... die Startposition... macht irgendwie keinen Sinn! Zumindest erkenne ich den nicht.
Du hast doch einen Startwert - stripos($row['inhalt'], $a3) - das ist doch nur eine Zahl, die du beliebig um 0, 12, 999 oder was auch immer verringern kannst, um die Startposition festzulegen.
Zum anderen Teil der Frage... ja, das verursachst du selbst, indem du ja beim Ersetzen (einfügen der farblichen Markierung) im Einfügestring den originalen Suchstring verwendest!
Um das zu ändern, müsstest du beim Erstellen des Ersatzstrings zunächst das Suchwort in der aktuell genutzten (abweichenden) Schreibweise auslesen.
$true_a3 = substr($row['inhalt'], stripos($row['inhalt'], $a3), strlen($a3));(hab ich jetzt nicht getestet, sollte aber passen)
Und dann $true_a3 nutzen, um den Ersatzstring zusammenzustellen.
Das liegt daran, dass du mit der Funktion 'stripos()' unabhängig von Groß- Kleinschreibung das Suchwort suchst und findest - es werden also alle Varianten gefunden.
Dann erstellst du ein 'Suchmuster', dass wieder der Schreibweise deiner Eingabe entspricht (?) und machst dann mit str_replace() einen Austausch des Suchmusters mit dem Ersatz-String. str_repace() beachtet aber die Groß- Kleinschreibung, also vermute ich, dass dann die abweichend geschriebenen Wörter nicht ausgetauscht werden.
Versuche es mal mit str_ireplace() - das ist die Groß- Kleinschrift unabhängige Variante von str_replace().
Hmmm... ich denke, das steht da in der Beschreibung schon drin. Auch wenn oben ein "," angegeben ist, so ist doch der Beschreibungstext eindeutig -(one character only) .... also jedes beliebige Zeichen - auch das ";".
Es wird genau so sein, wie Sempervivum schreibt...
Das sollte dein Problem beheben:
fputcsv($csv, $value, ";");
Wenn du einen Link zu der Seite posten würdest, dann wäre die Sache in wenige Sekunden zu beantworten... mit deinen Codeschnipseln und Beschreibungen kann man nicht wirklich was anfangen :(!
Aber so solltest du das Problem angehen. Öffne deine Seite im Browser und klicke mit der rechten Maustaste auf den Text, dem du den Hintergrund geben willst.
In dem Kontextmenü, das beim Rechtsklick erscheint, wählst du den Punkt 'Element untersuchen' (kann bei verschiedenen Browsern sinngemäß auch anders heißen). Es öffnet sich der 'Inspektor', der Bestandteil von jeden gängigen Browser ist. Hier kannst du dann herausfinden, um welches Element es sich handelt, das du angekickt hast..
Kennst du das Element, dann kannst du (wie Sempervivum weiter oben schon geschrieben und du offensichtlich nicht gelesen hast) mit dem CSS Format background-color: rgba(255, 255, 255, 0.5) diesem Element einen halbtransparenten, weißen Hintergrund geben,