Vielleicht mit timeline.
Tabellen sind auf Mobilgeräten Teufelszeug. Es gibt aber spezielle Templates, die auf Lebensläufe spezialisiert sind. Schau mal hier.
Hi,
hier mal eine Lösung für dich, wie du Geräte-abhängig deine Layouts und Styles anpassen kannst.
Unter Joomla 5.3 kannst du eine user.css anlegen und dann mit media-queries arbeiten.
Angenommen, du arbeitest mit xampp, dann kannst du deine user.css erstellen im Ordner: /xampp/htdocs/<dein-webspace-name>/media/templates/site/<dein template-name z.B. cassiopeia>/css/
Diese user.css wird dann automatisch eingebunden in dein Web-Styling.
In dieser user.css kannst du dann z.B. folgendes angeben:
@media (max-width: 600px) { /* Anpassung Styling NUR für Geräte mit 600 Pixel Bildschirmbreite oder weniger */
/* Eigentliches Styling */
body.itemid-??? .meinLebenslauf-container {
max-width: 400px;
font-weight: bold !important;
usw...
}
}Das !important ist manchmal wichtig, wenn ein Style anderswo vordefiniert wird für ein bestimmtes Element und du es aber unbedingt überschreiben möchtest. Sonst siehst du die Änderungen nicht. "body.itemid-101" und ".meinLebenslauf-container" sind CSS-Selektoren, die du mit dem Drücken von F12 im HTML-Code einsehen kannst. Die starten meistens mit "div class="<css-selektor-name> ...". "itemid-101" z.B. ist einfach nur eine Bezeichnung für ein bestimmtes Menu-Item und stellt sicher, dass dein CSS Styling nur für das bestimmte Menu-Item erstellt wird und nicht über alle Menus hinweg der "body" angepasst wird. @media (max-width: 600px) stellt sicher, dass dein Styling innerhalb nur für Geräte mit einer Bildschirmbreite von maximal 600 Pixel übernommen wird.
Somit brauchst du dann auch keine Extensions sondern hast vollständige Kontrolle über dein Styling. Alles weitere kannst du online finden. HTML-Code kopieren kannst, indem du, wenn du F12 gedrückt hast und einen HTML-Bereich anklickst, dann Rechtsklick und "HTML bearbeiten", dann öffnet sich ein Feld und du kannst ins Feld klicken, Strg+A markiert alles, Strg+C kopiert das Markierte. Dann kannst du, wenn du willst, es in einen Chatbot deiner Wahl speisen (ich empfehle Claude.ai). Versuche aber, dabei was zu lernen und nicht blind einfach Code kopieren.
LG Meilinger
Man kann bestimmt auch mit Joomla Core arbeiten ... wichtig wäre zu wissen, wie du dir vorstellst, wie das Lebenslauf aussehen soll...
Tabellen sind auf Mobilgeräten Teufelszeug.
Mit ein bischen Aufwand funktionieren Tabellen auch auf Mobilgeräten sehr gut. (z.B.https://www.ig-lilienthal.de/index.php/termine-menu)
Insbesondere bei Komponenten, die manchmal auch mit Tabellen arbeiten (z.B. JEvents) geht es gar nicht anders als sich Methoden für die Darstellung auf Mobilgeräten einfallen zu lassen.
Immer wieder gerne genommen:
Responsive Tables, by web-eau.net - Joomla Extension Directory
Tabellen sollen für Daten verwendet werden, nicht für layouts.
Ich würde sowas as Definition List (DL) anlegen.
Das ist semantisch korrekt und man kann es bei Bedarf mit ein bisschen css sehr einfach gut aufpeppen. Hier ganz ohne css, nur Bootstrap:
<dl class="row d-flex">
<dt class="col-sm-12 col-md-3">Name</dt>
<dd class="col-sm-12 col-md-9">Jan Johansen</dd>
<dt class="col-sm-12 col-md-3">Geburstdatum</dt>
<dd class="col-sm-12 col-md-9">20.12.2003</dd>
<dt class="col-sm-12 col-md-3">Ausbildung</dt>
<dd class="col-sm-12 col-md-9">Schule in dinkelsbühl</dd>
</dl>Mit fistlady's Vorschlag werde ich beginnen.
Hab's ausprobiert. Funktioniert tadellos:
Mobile Version:
Liebe Grüße
Christine
Ich würde sowas as Definition List (DL) anlegen.
firstlady Jetzt bin ich schon so lange im Geschäft, aber die Definition Lists hatte ich noch nicht auf dem Radar. Und Dein Beispiel ist unmittelbar verständlich! Danke!
Ich glaube, dass bei meinen Websites demnächst ein paar Tabellen verschwinden werden ....
