nicht angemeldet Kryptophäe
Kryptophäe
Rolf B
Robert B.
Rolf B
Kryptophäe
Rolf B
Kryptophäe
Rolf B
Kryptophäe
Rolf B
Hi zusammen,
ich hab früher viel in HTML und CSS gemacht, aber das ist locker 15 Jahre her.
Jetzt habe ich mir für WordPress ein Visitenkarten-Theme gekauft, leider stand da keine Versionshinweise dabei und ich dachte, das wird mit der aktuellen Version bestimmt gehen. Leider nein, Installation schlägt fehl :(
Jetzt habe ich mir gedacht, okay dann passe ich einfach das HTML an und lade es direkt auf den FTP hoch. Alle Hinweise, so als wäre es über WP installiert worden, lasse ich natürlich drinnen.
Ich bin schon weit gekommen, aber leider hören dann meine kentnisse an einigen Punkten auf :(
Da wollte ich fragen, könnt und wollt ihr dabei helfen?
Schade das so überhaupt keine Reaktion kommt 😟
Dann mal 'ne konkrete frage.
Ich versuche nun seit einer Weile folgende Änderung, bekomme es aber nicht hin.
Wie im Bild zu sehen sind beider Blöcke gleich. Ich würde gerne den unteren Block tauschen. Sprich das Bild nach rechts und die 2 Textblöcke nach links. Der Text in den Textblöcken soll dann rechts ausgerichtet werden.
<!-- ABOUT ME2 -->
<section id="about" class="block-section">
<div class="clearfix my-profile">
<div class="my-pict" >
<div class="overfly">
<div class="text-botttom">
<h2 class="text-uppercase color-dark text-bold">Mister Mustermann</h2>
</div>
</div>
</div>
<div class="my-desc">
<div class="bg-secondary clearfix">
<div class="inner-text">
<p >Gemeinsam möchten wir dazu beitragen, dass sich jeder Tag für unsere Kunden besser anfühlt. Wir glauben daran, dass wahre Schönheit von innen kommt und dass ein gepflegtes Äußeres das Selbstbewusstsein stärkt. Deshalb nehmen wir uns die Zeit, zuzuhören und auf die Wünsche jedes Einzelnen einzugehen. Unser Ziel ist es, eine Atmosphäre zu schaffen, in der sich jeder wohl und verstanden fühlt. Ob bei einer Beratung, Behandlung oder einfach nur beim Austausch – wir möchten, dass unsere Kunden sich bei uns gut aufgehoben und inspiriert fühlen. Denn nur so können wir gemeinsam das Beste aus jedem Menschen herausholen und ihn auf seinem individuellen Weg begleiten.</p>
</div>
</div>
<div class="bg-dark clearfix">
<div class="inner-text">
<p class="no-margin color-light ">
<strong class="fix-width-100"><i class="fa fa-calendar margin-right-5"></i> Geburtstag</strong> : 29.08.1978<br/>
<strong class="fix-width-100"><i class="fa fa-phone margin-right-5"></i> Telefon</strong> : +49 176 311 62 930<br/>
<strong class="fix-width-100"><i class="fa fa-envelope margin-right-5"></i> E-Mail</strong> : mustermann@example.com<br/>
<!--<strong class="fix-width-100"><i class="fa fa-location-arrow margin-right-5"></i> Adresse</strong> : 1234 Jalan Road, Fake City, IS 421 123.<--><br/>
</p>
</div>
</div>
</div>
</div>
</section><!-- END ABOUT ME2 -->
Habt vielen Dank
Hallo Kryptophäe,
du hast keine konkrete Frage gestellt, da fühlte sich keiner angesprochen. Jetzt ist's konkreter. Ob es der beste Weg ist, das Wordpress-HTML abzufangen und statisch hochzuladen, sei dahingestellt.
Lässt man die eigentlichen Inhalte mal aus, sieht das HTML-Fragment so aus:
<section id="about" class="block-section">
<div class="clearfix my-profile">
<div class="my-pict" >
...
</div>
<div class="my-desc">
...
</div>
</div>
</section><!-- END ABOUT ME2 -->
Wenn Du das Problem mit dem Editor lösen willst, dann sollte es doch genügen, wenn Du die Zeilen, die zum <div class="my-pict"> gehören, hinter den Block von >div class="my-desc"> verschiebst.
Also so:
<section id="about" class="block-section">
<div class="clearfix my-profile">
<div class="my-desc">
...
</div>
<div class="my-pict" >
...
</div>
</div>
</section><!-- END ABOUT ME2 -->
Ob das gelingt oder nicht, hängt davon ab, wie positionssensibel das CSS ist. Aber da wir das nicht kennen... - NEIN, poste bitte nicht dein gesamtes Stylesheet. Versuch's erstmal und wenn es schräg aussieht, geh mit dem Inspektor ran und vergleiche Mr. und Mrs. Sampleman, ob da was mit :first-child oder :last-child oder ähnlichem als Selektor verwendet wird. Vielleicht findest Du es auch direkt in der CSS Datei, wenn Du nach .my-profile suchst.
Viel Glück!
Rolf
Na ja, ich wollte erstmal freundlich Fragen, ob es okay ist 🙈
Tatsächlich habe ich heute kurz mit dem Autor Kontakt gehabt. Es ist gar keine WP Template, sondern ein HTML Template.
Vielen Dank, werde mich morgen wieder dran setzten und das umsetzen.
Moin,
Wie im Bild zu sehen sind beider Blöcke gleich. Ich würde gerne den unteren Block tauschen. Sprich das Bild nach rechts und die 2 Textblöcke nach links. Der Text in den Textblöcken soll dann rechts ausgerichtet werden.
Der folgende Code sieht nach einer Art „Template“ aus, die in Deinem Beispiel zweimal verwendet wird. Damit die unterschiedlich sind, musst Du
Unabhängig davon möchte dieser Code aufgeräumt und modernisiert werden:
<!-- ABOUT ME2 --> <section id="about" class="block-section">
Eine ID muss – das sagt schon der Name – eindeutig sein. Sofern das Template nicht noch irgendwie verarbeitet wird, gibt es in Deinem Beispiel anschließend zwei Sections mit der gleichen ID.
<div class="clearfix my-profile">
Dieses div ist das einzige Kind der section, d.h. es ist sehr wahrscheinlich überflüssig.
<div class="my-pict" > <div class="overfly"> <div class="text-botttom"> <h2 class="text-uppercase color-dark text-bold">Mister Mustermann</h2> </div> </div> </div>
Hierzu fällt mit das Zitat #2613 ein.
<div class="my-desc"> <div class="bg-secondary clearfix"> <div class="inner-text"> <p >Gemeinsam möchten wir dazu beitragen, dass sich jeder Tag für unsere Kunden besser anfühlt. Wir glauben daran, dass wahre Schönheit von innen kommt und dass ein gepflegtes Äußeres das Selbstbewusstsein stärkt. Deshalb nehmen wir uns die Zeit, zuzuhören und auf die Wünsche jedes Einzelnen einzugehen. Unser Ziel ist es, eine Atmosphäre zu schaffen, in der sich jeder wohl und verstanden fühlt. Ob bei einer Beratung, Behandlung oder einfach nur beim Austausch – wir möchten, dass unsere Kunden sich bei uns gut aufgehoben und inspiriert fühlen. Denn nur so können wir gemeinsam das Beste aus jedem Menschen herausholen und ihn auf seinem individuellen Weg begleiten.</p> </div> </div>
Noch mehr Matroschka-Code … Ist das dort eigentlich Dein Text oder ein Beispiel?
<div class="bg-dark clearfix"> <div class="inner-text"> <p class="no-margin color-light "> <strong class="fix-width-100"><i class="fa fa-calendar margin-right-5"></i> Geburtstag</strong> : 29.08.1978<br/> <strong class="fix-width-100"><i class="fa fa-phone margin-right-5"></i> Telefon</strong> : +49 176 311 62 930<br/> <strong class="fix-width-100"><i class="fa fa-envelope margin-right-5"></i> E-Mail</strong> : mustermann@example.com<br/> <!--<strong class="fix-width-100"><i class="fa fa-location-arrow margin-right-5"></i> Adresse</strong> : 1234 Jalan Road, Fake City, IS 421 123.<--><br/> </p> </div> </div>
Mir scheint, dass dieser Text gerne eine Liste sein möchte (vielleichte eine dl). Dann kannst Du auch die Icons per CSS an die gewünschte Stelle generieren lassen ohne das i-Element von Font [not really] Awesome missbrauchen zu lassen. „Bei dem Aufwasch“ können dann auch die Leerzeichen vor den Doppelpunkten entfernt und eventuell Telefonnummer und Email verlinkt werden.
Interessant ist übrigens, dass die Adresse eine „Fake City“ angibt, die Email-Adresse allerdings anscheinend nicht.
</div> </div> </section><!-- END ABOUT ME2 -->
Habt vielen Dank
Wofür auch immer 😉
Viele Grüße
Robert
Hallo Robert,
HUIuiui - über die unzureichende Adressverfakung kommt man auf die Seite des Auftraggebers und das editiere ich dann schnell mal raus; das dürfte nicht im Sinne der Kryptophäe sein.
Es zeigt sich wieder mal: Einmal nicht aufgepasst, und mit Geheimhaltung ist es nichts mehr. Haarige Sache, das…
haarig ist auch, was diese Seite tut: Es gibt keinen Cookie-Dialog, sie selbst setzt auch keine Cookies, aber sie bindet Fonts direkt von Google ein und möchte auch Google Maps einbinden. Dass das keinen DSGVO-Unfall gibt, liegt nur daran, dass die Einbindung irrtümlich über http erfolgt, aber die Seite mit https ausgeliefert wird. Deswegen blockiert der Browser den Zugriff.
Fonts von Google kopiert man sich besser auf den eigenen Server, und zwar nicht nur die CSS-Datei, sondern auch die darin referenzierten Font-Dateien. Das ist ein bisschen Arbeit, aber keine Raketenwissenschaft. Ich habe im Webfonts-Artikel im Wiki die Infobox zum Datenschutz mal nach vorne gezogen und prominenter gemacht -> Datenschutz. Je nach Fontanbieter kann man die Fonts auch von deren Server holen, das setzt aber voraus, dass der keine Drittanbieter-Cookies setzt und braucht definitiv einen Abschnitt in der Datenschmutzerklärung.
Die Verwendung von Maps muss der Anwender EXPLIZIT erlauben, weil man sonst mit Kekskrümeln der Datenkrake geflutet wird. Das nicht zu tun ist ein offenes Scheunentor für die Abmahnabteilung der „Wettbewerbspartner“.
Rolf
Hallo Robert,
HUIuiui - über die unzureichende Adressverfakung kommt man auf die Seite des Auftraggebers und das editiere ich dann schnell mal raus; das dürfte nicht im Sinne der Kryptophäe sein.
Es zeigt sich wieder mal: Einmal nicht aufgepasst, und mit Geheimhaltung ist es nichts mehr. Haarige Sache, das…
Vielen Dank dafür war aber keine bewusste Verschleierung. Immerhin soll sie am Ende ja sowieso öffentlich zugänglich sein.
haarig ist auch, was diese Seite tut: Es gibt keinen Cookie-Dialog, sie selbst setzt auch keine Cookies, aber sie bindet Fonts direkt von Google ein und möchte auch Google Maps einbinden. Dass das keinen DSGVO-Unfall gibt, liegt nur daran, dass die Einbindung irrtümlich über http erfolgt, aber die Seite mit https ausgeliefert wird. Deswegen blockiert der Browser den Zugriff.
Dem wollte ich mich ganz am Schluss widmen. Größte Baustelle wird es das responsive layout sein. Jetzt mit Bootstrap v3.3.1 als css framework gelöst sieht es alles andere als schön aus.
Fonts von Google kopiert man sich besser auf den eigenen Server, und zwar nicht nur die CSS-Datei, sondern auch die darin referenzierten Font-Dateien. Das ist ein bisschen Arbeit, aber keine Raketenwissenschaft. Ich habe im Webfonts-Artikel im Wiki die Infobox zum Datenschutz mal nach vorne gezogen und prominenter gemacht -> Datenschutz. Je nach Fontanbieter kann man die Fonts auch von deren Server holen, das setzt aber voraus, dass der keine Drittanbieter-Cookies setzt und braucht definitiv einen Abschnitt in der Datenschmutzerklärung.
Ich arbeite das Grobe von oben nach unten ab. Einiges habe ich schon geändert und rausgeworfen. Das Google Maps Teil sollte sowieso raus
Die Verwendung von Maps muss der Anwender EXPLIZIT erlauben, weil man sonst mit Kekskrümeln der Datenkrake geflutet wird. Das nicht zu tun ist ein offenes Scheunentor für die Abmahnabteilung der „Wettbewerbspartner“.
Rolf
Auch an dich ein Dank 😀
Moin,
Wie im Bild zu sehen sind beider Blöcke gleich. Ich würde gerne den unteren Block tauschen. Sprich das Bild nach rechts und die 2 Textblöcke nach links. Der Text in den Textblöcken soll dann rechts ausgerichtet werden.
Der folgende Code sieht nach einer Art „Template“ aus, die in Deinem Beispiel zweimal verwendet wird. Damit die unterschiedlich sind, musst Du
- entweder zwei Templates daraus machen, die Du verwendest,
- oder mit CSS die Reihenfolge tauschen; @Rolf B hat dazu schon einen Tipp in Richtung CSS gegeben.
Ja, das habe ich gemacht. About me und About me2. In 2 habe ich es auch geschafft das Bild zu änder. Ich scheitere aber an der CSS, da die Formatierung dann absolut daneben ist 😟
Unabhängig davon möchte dieser Code aufgeräumt und modernisiert werden:
Ich habe es ja als WordPress Vorlage gefunden und auch so gekauft. Jetzt hat sich ja herausgestellt, das ist nur eine HTML-Vorlage. Wenn ich die Optik hinbekommen sollte, lasse ich sowieso den Validator darüber laufen und schaue mal, was der sagt. Wird sicherlich aber noch ein halbes Jahrhundert gehen 😂
<!-- ABOUT ME2 --> <section id="about" class="block-section">Eine ID muss – das sagt schon der Name – eindeutig sein. Sofern das Template nicht noch irgendwie verarbeitet wird, gibt es in Deinem Beispiel anschließend zwei Sections mit der gleichen ID.
Werde ich nachher mal schauen, Danke. Eindeutige ID.
<div class="clearfix my-profile">Dieses
divist das einzige Kind dersection, d.h. es ist sehr wahrscheinlich überflüssig.<div class="my-pict" > <div class="overfly"> <div class="text-botttom"> <h2 class="text-uppercase color-dark text-bold">Mister Mustermann</h2> </div> </div> </div>Hierzu fällt mit das Zitat #2613 ein.
<div class="my-desc"> <div class="bg-secondary clearfix"> <div class="inner-text"> <p >Gemeinsam möchten wir dazu beitragen, dass sich jeder Tag für unsere Kunden besser anfühlt. Wir glauben daran, dass wahre Schönheit von innen kommt und dass ein gepflegtes Äußeres das Selbstbewusstsein stärkt. Deshalb nehmen wir uns die Zeit, zuzuhören und auf die Wünsche jedes Einzelnen einzugehen. Unser Ziel ist es, eine Atmosphäre zu schaffen, in der sich jeder wohl und verstanden fühlt. Ob bei einer Beratung, Behandlung oder einfach nur beim Austausch – wir möchten, dass unsere Kunden sich bei uns gut aufgehoben und inspiriert fühlen. Denn nur so können wir gemeinsam das Beste aus jedem Menschen herausholen und ihn auf seinem individuellen Weg begleiten.</p> </div> </div>Noch mehr Matroschka-Code … Ist das dort eigentlich Dein Text oder ein Beispiel?
Ich arbeite dran, sowohl am Text als auch am Matroschka-Code 🙈
<div class="bg-dark clearfix"> <div class="inner-text"> <p class="no-margin color-light "> <strong class="fix-width-100"><i class="fa fa-calendar margin-right-5"></i> Geburtstag</strong> : 29.08.1978<br/> <strong class="fix-width-100"><i class="fa fa-phone margin-right-5"></i> Telefon</strong> : +49 176 311 62 930<br/> <strong class="fix-width-100"><i class="fa fa-envelope margin-right-5"></i> E-Mail</strong> : mustermann@example.com<br/> <!--<strong class="fix-width-100"><i class="fa fa-location-arrow margin-right-5"></i> Adresse</strong> : 1234 Jalan Road, Fake City, IS 421 123.<--><br/> </p> </div> </div>Mir scheint, dass dieser Text gerne eine Liste sein möchte (vielleichte eine
dl). Dann kannst Du auch die Icons per CSS an die gewünschte Stelle generieren lassen ohne dasi-Element von Font [not really] Awesome missbrauchen zu lassen. „Bei dem Aufwasch“ können dann auch die Leerzeichen vor den Doppelpunkten entfernt und eventuell Telefonnummer und Email verlinkt werden.Interessant ist übrigens, dass die Adresse eine „Fake City“ angibt, die Email-Adresse allerdings anscheinend nicht.
</div> </div> </section><!-- END ABOUT ME2 -->
Habt vielen Dank
Wofür auch immer 😉
Viele Grüße
Robert
Na, vielen Dank für eure Hilfe
Da die Visitenkarte es Online kommt, gabs da keine bewusste Verschleierung
Hallo Kryptophäe,
die Originalseite ist ja sicherlich nicht deine Testspielwiese.
Hast Du eine Testseite online? Dann könnten wir draufgucken.
Rolf
Hallo Kryptophäe,
die Originalseite ist ja sicherlich nicht deine Testspielwiese.
Hast Du eine Testseite online? Dann könnten wir draufgucken.
Rolf
Aktuell ja, habs gestern schnell mal hochgeladen zum Testen.
Hab jetzt mal den aktuell stand hochgeladen, zu finden unter http://test.hhpvgbr.de/
Hallo Kryptophäe,
danke. Ich erinnere mich so schlecht - ist die non-Test Seite auch noch im Aufbau oder ist das euere reguläre, publizierte Webvisitenkarte, die bereits die existierende Seite von Frau S abgelöst hat? Wenn hhpvgbr regulär bekanntgemacht ist, dann scheint mir, dass Du da was kaputt gemacht hast. Das Bild von Frau S fehlt, Contact ist englisch, einige Lorem Ipsums geistern herum und die Kontaktangaben sind Mumpitz.
Bytheway - seid ihr sicher, dass hhpvgbr.de eine gute Domain ist? Okay, hhpv.de ist als Redirect zur HAPEV weg. Meine erste Idee war haar-und-haut.de, das ist leider verkauft, an wen auch immer, der Inhalt ist verschimmelt. Wie wär's mit haar-und-hautpflege.de oder haar-und-hautprodukte.de? Beide sind frei, und das liest sich deutlich geschmeidiger als hhpvgbr.de (tippen wird's eh kaum einer, der Surfer von heute klickt auf Links...).
Rolf
Hallo Kryptophäe,
Hallo Rolf
danke. Ich erinnere mich so schlecht - ist die non-Test Seite auch noch im Aufbau oder ist das euere reguläre, publizierte Webvisitenkarte, die bereits die existierende Seite von Frau S abgelöst hat? Wenn hhpvgbr regulär bekanntgemacht ist, dann scheint mir, dass Du da was kaputt gemacht hast. Das Bild von Frau S fehlt, Contact ist englisch, einige Lorem Ipsums geistern herum und die Kontaktangaben sind Mumpitz.
Das ist alles noch im Aufbau und nichts ist fertig. Auch die URL ist nicht final, aber eventuell bleibt es auch so. Soll einfach nur unsere GbR widerspiegeln ohne Anspruch auf ein Google Ranking oder gefunden werden. Ich hab meinen aktuellen Bearbeitungsstand einfach mal hochgeladen, weil ich sehen wollte wie es online aussieht. Scripte und PHP. Unter der Subdomain http://test.hhpvgbr.de/ sollte zumindest der Header und der erste Block mit Frau S. funktionieren. Zumindest bei mir in Firefox
Bytheway - seid ihr sicher, dass hhpvgbr.de eine gute Domain ist? Okay, hhpv.de ist als Redirect zur HAPEV weg. Meine erste Idee war haar-und-haut.de, das ist leider verkauft, an wen auch immer, der Inhalt ist verschimmelt. Wie wär's mit haar-und-hautpflege.de oder haar-und-hautprodukte.de? Beide sind frei, und das liest sich deutlich geschmeidiger als hhpvgbr.de (tippen wird's eh kaum einer, der Surfer von heute klickt auf Links...).
Wie gesagt, noch unentschlossen. Eventuell bleibt es aber auch so, da keinerlei Anspruch auf irgendwas 😆 Mit verschimmeltem Inhalt meinst du den alten HTML-Code?
Habs auch mal versucht mit mobirise nachzubauen. Geht ganz gut, ist aber bei weitem nicht so flexibel, sieht nicht so gut aus (mouse over beim Bild oder den JS) und ich würde nichts lernen 😂
Rolf
Hallo Kryptophäe,
ich habe jetzt mal draufgeguckt und gehe davon aus, dass Du die Änderungsvorschläge noch nicht umgesetzt hattest.
id="about" ist nur dann ein Problem, wenn Du diese ID im CSS zum Styling einsetzen möchtest ODER wenn Du mittels Hash-Teil der URL die Seite direkt dahin positionieren möchtest (also https://hhpvgbr.de#about). Wenn Du diesen HTML-Teil direkt im Zugriff hast, würde ich Dir die IDs about_kerstin und about_heiko vorschlagen.
Im CSS hast Du dann das Problem, dass das Bild nicht als Bild, sondern als Hintergrundbild geladen wird. Mit Hilfe des div.overfly wird es dann „elegant“ pastellisiert, indem es mit 70% transparentem Weiß überlagert wird. Wenn ihr das toll findet, na gut. Andernfalls solltest Du die 0.7 in Zeile 1183 von style.css kleiner machen.
In der Stelle musst Du eh ran. In Zeile 1170 wird dem my-pict Bereich das Hintergrundbild zugeordnet, das musst Du trennen. Mit den oben vorgeschlagenen IDs könntest du das so lösen, dass Du die background-image Zeile herauslöst und direkt dahinter zwei weitere Regeln einfügst:
#about_kerstin .my-pict {
background-image: url(../images/kerstin-pict.jpg);
}
#about_heiko .my-pict {
background-image: url(../images/heiko-pict.jpg);
}
Im Moment hast Du für die zweite Visitenkarte ein .my-pict2 draus gemacht, wodurch aber die 7 existierenden Regeln für die Klasse my-pict im Stylesheet nicht mehr angewendet werden. Für my-pict2 finde ich hingegen gar keine Regel.
Benenne die Klasse wieder zurück, verwende unterschiedliche IDs, und dann klappt das so, wie ich gezeigt habe.
Kleiner Kritikpunkt an dem Weiß-auf-Schwarz Infobereich: Da wird Fettschrift mit <strong> erzeugt. Das strong-Element formatiert nebenbei fett, ja, hat aber auch die Semantik von "Dies ist besonders wichtig". Und das sehe ich hier nicht. Es ist einfach die Beschriftung einer Information. Hier würde das <label>-Element passen, finde ich, das Du im Stylesheet per
.myprofile .mydesc label {
font-weight: bold;
display: inline-block;
width: 8em;
}
stylen kannst. Breitenfestlegungen mit Klassen, so wie es Bootstrap macht, sind der Grund, warum dieses Produkt oftmals auch Bootcrap genannt wird. Aber es ist halt ein CSS-Framework, da gehört das dazu. Generische CSS-Klassen, die NUR dazu dienen, bestimmten Elementen bestimmte Eigenschaften zu geben, sind falsch verstandenes CSS. CSS ist nur zum geringen Teil generisch, es muss immer spezifisch für die darzustellende Seite oder Gruppe von Seiten sein. Ins HTML gehört eigentlich nichts hinein, was nur zu Layout-Zwecken dient. Die Ausnahme sind diverse divs, die man als Träger von Formatierungsmerkmalen braucht. Wenn man es damit übertreibt, kommt die Matroschka-Struktur heraus, die schon erwähnt wurde.
Habs auch mal versucht mit mobirise nachzubauen. Geht ganz gut, ist aber bei weitem nicht so flexibel, sieht nicht so gut aus (mouse over beim Bild oder den JS) und ich würde nichts lernen 😂
Das ist das Problem mit KI. Zum einen ist sie immer nur so gut wie die Regeln, die man ihr gegeben hat, zum anderen verkümmert damit die EI (eigene Intelligenz). Aber Du willst dein Geld ja eigentlich mit Pflegeprodukten verdienen statt mit Softwareentwicklung…
Rolf
Hallo Kryptophäe,
ich habe jetzt mal draufgeguckt und gehe davon aus, dass Du die Änderungsvorschläge noch nicht umgesetzt hattest.
Guten Morgen Rolf,
bis jetzt nein. Zu allem Überfluss bin ich auch noch umgezogen und genug zu tun 😂
id="about" ist nur dann ein Problem, wenn Du diese ID im CSS zum Styling einsetzen möchtest ODER wenn Du mittels Hash-Teil der URL die Seite direkt dahin positionieren möchtest (also https://hhpvgbr.de#about). Wenn Du diesen HTML-Teil direkt im Zugriff hast, würde ich Dir die IDs about_kerstin und about_heiko vorschlagen.
Im CSS hast Du dann das Problem, dass das Bild nicht als Bild, sondern als Hintergrundbild geladen wird. Mit Hilfe des div.overfly wird es dann „elegant“ pastellisiert, indem es mit 70% transparentem Weiß überlagert wird. Wenn ihr das toll findet, na gut. Andernfalls solltest Du die 0.7 in Zeile 1183 von style.css kleiner machen.
In der Stelle musst Du eh ran. In Zeile 1170 wird dem my-pict Bereich das Hintergrundbild zugeordnet, das musst Du trennen. Mit den oben vorgeschlagenen IDs könntest du das so lösen, dass Du die background-image Zeile herauslöst und direkt dahinter zwei weitere Regeln einfügst:
#about_kerstin .my-pict { background-image: url(../images/kerstin-pict.jpg); } #about_heiko .my-pict { background-image: url(../images/heiko-pict.jpg); }
Hab mich jetzt mal hier ran gemacht, ist aber nur noch schlimmer geworden 😂
Wünsche allen einen schönen Sonntag