Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 14. März 2021 11:04

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

[GELÖST] Tabellen unterschiedlich formatieren

Hallo,

ich habe zwar das letzte Problem noch nicht endgültig gelöst, aber schon ein neues - wahrscheinlich trivial, aber ich komm nicht auf die Lösung.

Ich habe eine Webseite, auf der ich mehrere Content-Blöcke darstelle. In zwei der Content-Blöcke ("Öffnungszeiten" und "Preise & Leistungen") werden Tabellen dargestellt, die ich aber unterschiedlich formatieren möchte. Die erste Tabelle wird so dargestellt, wie ich es möchte, die zweite aber leider auch genauso. Ich habe die (erste) Tabelle im Stylesheet folgendermaßen formatiert (table.nebeneinander dient der Formatierung einer weiteren Tabelle, die hier aber unkritisch ist):

table, th, td {
        border-collapse: collapse;
        padding: .3em .5em;
}

table {
        margin-left: 1em;
}

table.nebeneinander {
        float:left;
        margin-right: .2em;
}

td {
        background-image: linear-gradient(#f9f9f9, #e3e3e3);
        border-left: thin solid #666;
        border-right: thin solid #666;
}

th {
        background-color: #666;
        color: #fff;
        border: thin solid #666;
}

Die zweite Tabelle soll im Grunde genommen die Hintergrundfarbe des Elternelementes ([[$dusky_pink]]) bekommen und keine Ränder haben. Dazu habe ich sie anschließend folgendermaßen formatiert:

td.flip-box-table {
        background-image: none;
        border: no-border;
        color: black;
}

th.flip-box-table {
        background-color: [[$dusky_pink]];
        color: black;
}

Die Tabellen werden im TinyEditor geschrieben. Ich habe versucht, den zweiten Content-Block im Template mittels

... <div class="flip-box-back">
 	<div class="w3-container flip-box-table">
 	    {$Block_four nocache}
	</div>
    </div>

einzufassen bzw. (als das nicht klappte) versucht, die zweite Tabelle direkt im Editor mit Hilfe von

<div class="flip-box-table">
    <table>
    ...
    </table>
</div>

zu formatieren, aber die Darstellung der Tabelle ist immer noch wie bei der ersten Tabelle.

Ich bin mir ziemlich sicher, dass der Fehler trivial und wahrscheinlich zwischen meinen Ohren liegt, aber trotzdem komme ich nicht drauf.


Man ist so alt, wie man sich fühlt...

Offline

#2 15. März 2021 02:52

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Tabellen unterschiedlich formatieren

Der Fehler ist einfach nur der: Es gibt kein "td.flip-box-table" im Quelltext. (also kein <td class="flip-box-table">)
Da gibt es nur ein div mit der Klasse "flip-box-table" und darin befindet sich einfach nur eine Tabelle ohne Klassen.
Richtig wäre es so:


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#3 15. März 2021 10:11

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Tabellen unterschiedlich formatieren

Danke NaN,

ich hatte mich da auf die Ausführungen des SelfHTML-Wiki verlassen, nach denen ein Klassenselektor mit einem Typselektor durch <Klassenselektor>.<Typselektor> kombiniert werden kann.

Aber mit Deinen Hinweisen läuft es jetzt problemlos.


Man ist so alt, wie man sich fühlt...

Offline

#4 15. März 2021 10:20

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Tabellen unterschiedlich formatieren

ich hatte mich da auf die Ausführungen des SelfHTML-Wiki verlassen

Das ist ja auch richtig so.
Aber die Klassen im Stylesheet müssen sich doch auch im HTML Code wiederfinden.
Wenn Du kein <td class="flip-box-table"> im Code hast, bringt auch im CSS ein "td.flip-box-table" nichts. Du kannst doch nur das formatieren, was existiert.

Also entweder im HTML dem <td> die Klasse hinzufügen, oder im CSS mit Hilfe des Übergeordneten <div> auf die Tabellenzelle zugreifen.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#5 15. März 2021 18:22

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Tabellen unterschiedlich formatieren

Danke NaN,

ich hatte beides "geistig verknüpft" und dann doch durcheinander gewürfelt. Aber jetzt funktioniert es und ich weiß es für die Zukunft (hoffentlich roll ) besser.


Man ist so alt, wie man sich fühlt...

Offline