Hoffe ich habe es einigermaßen verständlich erklärt.
Neee... irgendwie nicht! Weder aus deinem Text.. noch aus dem Bild... und schon gar nicht aus dem Fiddle kann ich erkennen, wo dein Problem liegt und was du eigentlich erreichen willst?
Was verstehst du unter einer 'Dreiergruppe'? ... drei Spalten nebeneinander? Dann benutze 'FlexBox' https://www.w3schools.com/css/css3_flexbox.asp
hmmm... gibt hier sicherlich auch Nutzer, die sich mit WP auskennen, aber ich denke, mit deiner Frage wärst du in einem WP Forum besser aufgehoben. Und wenn du dort deine Frage stellen willst, dann denke daran... gib die Informationen, die zur Beantwortung notwendig sind... WP Version... benutzte Plugins und Widgets... und und und.
Am besten dort die Forenregeln lesen, da steht in der Rege drin, was man als Info benötigt, um Hilfe leisten zu können.
Womit erstellst du die Seite? ... WordPress?
Diese Dinge in den eckigen Klammern [ und ] haben mit HTML nichts zu tun... das sind irgendwelche Einfügecodes von einem CMS... da musst du nicht nach Fehlern im HTML suchen, sondern die Einstellungen deines CMS richtig machen.
Grafik einfach in einen Link einfügen...
<a href="startseite.html" ....><img src="link zum Bild" alt="" ....></a>
Mehr Raum zwischen Border und Text zB bei h1...
im CSS h1 {padding-left: 10px;}
Infotext zum Bild... schau mal hier -> https://www.w3schools.com/tags/tag_figcaption.asp
Für Schriftgröße gibt CSS... für <p> zB etwa so
p {font-size: 14px;}
YouTube bietet Einfüge-Codes für Videos an... aber Vorsicht! Datenschutz beachten!
Bilder lassen sich auch mit CSS beliebig verkleinern. Ist aber nicht empfehlenswert - Bilder sollten so groß sein, wie sie auf der Seite dargestellt werden.
width... max-width... oh je, frag mal die Suchmaschine deines Vertrauens! Die liefert zu dem Thema Millionen Ergebnisse in 0,4 Sekunden.
Responsive? Im Prinzip ja - teste es doch selbst! Und wenn du damit zufrieden bist, dann ist sie responsive.
Ein kurzer Blick in die Dokumentation... zB hier
https://www.w3schools.com/cssref/css_colors_legal.asp
hätte dich auch so auf den richtigen Weg gewiesen ;)!
Das Erste, was mir auffällt...
box-shadow: 0px 17px 10px 7px rgba(0, 0, 0, 0,4);
warum steht da als Dezimalzeichen ein Komma?... 0,4 gibt es im CSS nicht da ist das Dezimalzeichen ein Punkt - also 0.4
Da fehlt die schließende geschweifte Klammer ' } ' bei...
hr {
background: #333;
border: none;
color: #000;
height: 1px;
width: 30%;
Da ist ein falscher... <>.
<h3><>Durch das Land</h3>
Da ist ein falsches <..
<h3><Segelboot im Mondschein</h3>
generell sollte in HTML5 das Attribut align="center" nicht verwendet werden - gilt als veraltet. Stattdessen könnte man im CSS
div {
width: 100%;
text-align: center;
}
schreiben und diese 'align="center" in den div - Tags löschen.
Die Fehler 2 und 3 (siehe oben) sind auch klar auf der Seite zu erkennen.
Mann kann es ja mal versuchen ;)! ...vielleicht gibt es ja wirklich eine geheime Verbindung zum Local Host.
Oh je... was hast du denn da wieder gemacht :)!
An dieser Seite stimmt ja nichts, außer dass sie Verkaufsliste.html heißt.... schau dir mal die Info an, die die Web Konsole dazu liefert (siehe Bild)
... wo möchtest du anfangen?
also ich finde in 0,4 Sekunden ca 61.000 davon
https://www.google.de/search?newwind…1.0.K7FObp3fCmI
Hmmm... ich kann mich nur wiederholen! Lerne bitte die Grundlagen!
Was soll das zB?
<p class="klein"></p><p align=center>Bild 1:</p>
Du hast ein <p class="klein"></p> mit nix drin... ok, das was da nicht drin ist, würde jetzt in der richtigen Größe dargestellt.. na ja... man sieht es nur nicht.
Und dann...
<p class="mittel"><p align=center>"Eis"
was soll das? Du öffnest auch ein <p class="mittel"> und dann kommt da wieder nix, außer einem 'normal' mit 1.5em neuen <p>
und dann das Gleich nochmal...
<p class="klein"><p align=center>Acryl auf Leinwand<br>60 x 50cm</p>
.. und da wunderst du dich, dass es nicht funktioniert?
Beachte bitte folgendes (auch wenn es in der neuen Spezifikation nicht mehr vorgeschrieben ist)...
wenn du ein <p>Element öffnest, dann schließt du es wieder, wenn du die Texteingabe eingefügt hast durch </p>!
In einem <p></p> dürfen keine anderen Blockelemente drin sein.
Ganz ehrlich.. du betreibst eine Website und das offensichtlich auch noch kommerziell, da bist du es deinen Kunden schuldig, dass sie eine vernünftige Webseite besuchen können - so wie es jetzt aussieht, vergraulst du sie nur.
aber ich will dir natürlich helfen, deswegen hier jetzt mal dein korrigierter Code...
<style type="text/css">
body {
background-color: #63B8FF;
}
p {
font-family: arial, "lucida console", sans-serif; /* Schriftart */
color: #FFFFFF;
}
p.mittel {
font-size: 14pt;
}
p.klein {
font-size: 12pt;
}
</style>
</head>
<body>
<p style="text-align: center;">Bild 1:</p>
<div style="text-align: center;">
<img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt="">
<p class="mittel">"Eis"</p>
<p class="klein">Acryl auf Leinwand<br>60 x 50cm</p>
</div>Mach erst mal dein CSS richtig, dann sehen wir weiter:
bei dir steht...
p {
color:#FFFFFF;
font-size:1,5 em;
font-family:arial, "lucida console", sans-serif; /* Schriftart */
}
color: #000000;
}
Das ist schon mal falsch... erstens muss es heißen 1.5em - Punkt statt Komma und kein Leerzeichen zwischen 1.5 und em!
... zeitens... warum steht das 'color: #000000;' außerhalb der der geschweiften Klammer? Das gehört da mit rein.. also
p {
color:#FFFFFF;
font-size: 1.5em;
font-family:arial, "lucida console", sans-serif; /* Schriftart */
color: #000000;
}Bitte.. lerne die Grundlagen.. da gibt es reichlich Tutorials im Netz!!!!
HTML und CSS bietet diverse Möglichkeiten, um das zu realisieren.
Du hast zB die Möglichkeit auch Überschriften zu nutzen.. von groß <h1></h1> ... bis klein <h6></h6> ... oder eben auch <p></p> als Standardtextabsatzschrift.
Wobei... <h1></h1> darf/sollte nur einmal pro Seite verwendet werden!.. eben als Hauptseitenüberschrift.
Aber sowas zB wäre für dich nutzbar
<h1>Meine Bilder</h1>
<h3>Bild 1</h3>
<p>Bildbeschreibung</p>
... usw
oder, da du in deinem Entwurf ja schon mit <p>'s arbeitest, könntest du mehrere p.klassen im CSS definieren...
CSS zusätzlich zu dem p, was bei dir schon drin steht, noch folgendes:
p.mittel {
font-size: 14pt;
}
p.klein {
font-size: 12pt;
}
und im HTML dann...
<p>Meine Bilder</p>
<p class="mittel">Bild 1</p>
<p class="klein">Bildbeschreibung</p>
... usw
Wie meinst du das? ... einige Wörter?
Etwas genauer solltest du schon beschreiben, was du willst.
Oh je... bitte lerne mal die Grundlagen - diese Frage könntest du dir mit einem Blick selbst beantworten!
Für welches HTML Element legst du die Formatierungen für die Schrift fest... hmmm... schwierig?
... und ... taucht dieses HTML Element irgendwo im deinem Code auf? .. also ich seh da nichts.
Nebenbei.. bei der Erstellung von style-Anweisungen sollte man, da CSS sich kaskadierend verhält, immer die übergeordneten Elemente (Elternelemente) zuerst und erst dann die nachgeordneten Elemente.
also zuerst 'body' ... dann 'h5'
Warum... h5 ist im body drin und die Eigenschaften body werden an h5 vererbt. .. unter anderem auch Schriftfarbe, -Art und Größe!
Also man braucht definitiv keinen kostenpflichtigen Editor, um ein paar Zeilen Code zu erstellen. Es gibt genügend 'freie' Editoren zum downloaden - frag den Herrn Go...gle und er wird es für dich finden - musst dann nur den für dich passenden aussuchen.
Diese Editoren sind dann auch in der Lage PHP Code zu bearbeiten.
Das wäre aber nur der erste Schritt und eigentlich müsstest du damit ja auch schon fertig sein, denn deine existierende Seite ist ja nicht vom Himmel gefallen, die musst du ja irgendwie erstellt haben!
Zu Schritt 2! Um mit PHP lokal auf einem Rechner zu arbeiten, muss du auf deinem Rechner einen 'LocalHost' installieren, damit er PHP Dateien darstellen kann. Mit so einem 'LocalHost' verhält sich dann der Rechner genau so, wie ein Server im Internet. Du kannst also deine selbst geschriebenen PHP Codes in Ruhe zu Hause erstellen und testen, ohne auf einen Internet Server zugreifen zu müssen!.. da fällt mir ein, die Domain, wo deine Seite anschließend laufen soll, muss natürlich PHP fähig sein. Ist sie das? Manche Freehoster bieten ja nur den Speicherplatz ohne Zusatzfunktionen (zB PHP) an.
Aber jetzt LocalHost... gehe auf diese Seite https://www.apachefriends.org/de/download.html und lade dir für dein Betriebssystem den Xampp (PHP Version 7) herunter.
Wie man diesen Xampp installiert und dann startet dafür gibt es etliche Anleitungen im Netz... wieder hilft dir Herr Go...gle.
Und wenn du das alles soweit auf die Reihe bekommen hast, melde dich wieder.
Womit willst du anfangen? ... kannst du auf deinem Rechner mit PHP arbeiten - oder brauchst du erst mal Hilfe, wie du eine PHP Arbeitsumgebung ans Laufen bekommst?
Das wirst du am besten mit PHP einrichten können - ist aber bestimmt nicht so einfach zu realisieren, da du, wie du selbst schreibst, mit PHP wenig Erfahrung hast.
Die Vorgehensweise ist allerdings nicht besonders schwierig.
Richte auf der Seite einen Passwort geschützten 'Adminbereich' ein, wo dein Klient sich einloggen und Dinge bearbeiten kann.
Lagere die Teile, die er bearbeitet können soll in externe Dateien aus (ggf. eine Datenbank) und verknüpfe die ausgelagerten Anteile mit PHP in das Hauptdokument - im Prinzip einfach, kann aber in der Praxis zu einigen Problemen führen, wenn es um mehr als nur das Einbinden von einfachen Texten geht.
Bilder einfügen und/ oder ändern wird da schon deutlich aufwändiger. Aber vielleicht solltest du zum Üben erst mal anfangen und es mit einfachen Textelementen versuchen. Auf die Probleme wirst du dann schon von ganz alleine stoßen.
Klar, den sicheren PHP Aufbau für eine Passwortabfrage gibt es.... allerdings 'unknackbar' ist nichts! Jedoch ist der Aufwand, um einen solchen Passwortschutz zu knacken ziemlich hoch und von einem Laien sicherlich nicht zu leisten. Das Gute bei einer PHP Lösung ist ja, man sieht nicht den Code, sondern nur die Antwort des Servers auf eine richtige oder falsche Eingabe.
Und ja... wenn du eine PHP Lösung nutzt, dann muss deine Seite, in der du diesen PHP Code einbaust, natürlich auch die Endung .php bekommen.
Schreibe bitte in deinen Link zum Stylesheet die komplette Adresse - > http://www.malerei2000.de/style2000.css
Also so:
<link rel="stylesheet" type="text/css" href="http://http://www.malerei2000.de/style2000.css">
oder, wenn die Index.html und das Stylesheet im selben Verzeichnis liegen..
<link rel="stylesheet" type="text/css" href="style2000.css">