Bildgröße in Tabelle festlegen.

spruenki · 5. Dezember 2020

Hallo zusammen,

ich arbeite an unserer Schulwebsite und finde für folgendes Problem keine Lösung. Darüber bin ich mir auch nicht sicher, ob es ein echtes Joomla-Problem ist und habe daher gezögert hier zu posten, versuche es aber aus lauter Verzweiflung doch:

Unter Ansprechpartner habe ich eine Tabelle angelegt und diese über eine custom-css mittig festgelegt:

Code

table {
    max-width: 60%;
    background-color: transparent;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;

}

In diese Tabelle habe ich eine neue gepackt und dieser die Klasse "partner" zugeordnet:

Code

table.partner {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;

}

Dort sind die Bilder hinterlegt die alle die gleiche Größe besitzen. Allerdings werden diese nicht gleich groß dargestellt und bei Skalieren des Fensters verschiebt sich alles. Ich habe schon versucht die Bilder als eine Klasse zu definieren und die Bilder darüber in ihrer Größe zu fixieren - erfolglos.

Wie kann ich die Bilder in eine Größe bringen, die proportional immer gleich ist?

Alles Gute weiterhin!

Frank

Lui_brempt · 5. Dezember 2020

Tabellen zum Layouten zu nutzen ist nicht sinnvoll!

Vielleicht legst du die Ansprechpartner als Kontakte an und stellst dann eine entsprechende Liste oder Blogdarstellung der Kontakte auf der Seite dar.

Auf dem Handy ist die Darstellung nicht gut.

Das dürfte auch am Tabellenkonstrukt liegen m

Klappi · 5. Dezember 2020

Moin Frank,

falls du alle Bildere in der Tabelle table.partner gleich gross haben möchtest, füge deiner CSS folgende Anweisung hinzu:

table.partner img {

width: 80px;

}

Probiere mal aus, ob das geht, ersetze gegebenenfalls die px durch %. Oder die 80 durch eine andere Zahl. Dann sollte es funktionieren.

Gruss

Thomas

LukasHH · 5. Dezember 2020

ich würde es ohne Tabelle machen und stattdessen mit DIV-Container. Es sollte ja auch Responsive sein und da ist eine Tabelle hierfür nicht die Beste Wahl. Da in dem Template Bootstrap 2 enthalten ist, wäre es ggf. auch ratsam sich ein Template mit Bootstrap 3 bzw. 4 zu wählen.

Ab J4 ist Bootstrap 4 der Standard und da sollten die Templates angepasst / ausgetauscht werden.

Solltest Du doch bei der Tabelle bleiben wollen, wäre hier ein Vorschlag. Wobei die erste Zeile hierbei eine zusätzliche Klasse "img" bekommen müsste.

CSS

table {
 max-width:60%;
 background-color:transparent;
 border-spacing:0;
 margin-left:auto;
 margin-right:auto
}
table.partner {
 max-width:90%;
 margin-left:auto;
 margin-right:auto
}

table.partner tr.img td {
    width:25%;
    height:250px;
}

table.partner tr.img img{
    width:100%;
    height: 100%;
}

Alles anzeigen

LukasHH · 5. Dezember 2020

Problematisch hierbei sind auch die langen Bezeichnungen wie "Unterstufenkoordinatorin:". Diese bleiben in der vollen breite stehen und beeinflussen die Breite der Zelle. Wenn Du das Fenster verkleinerst, dann siehst Du das. Die Spalte der "Unterstufenkoordinatorin" bleibt in voller Breite stehen und die anderen werden umso schmaler. Da nützt die Angabe der gleichen Spaltenbreite auch nichts.

Das kann man mit CSS umgehen, wenn man diesen einen automatischen Zeilenumbruch mitgibt. Ob dieser schön ist, muss man selbst sehen.

Code

table.partner p {
    hyphens: auto;
}

spruenki · 6. Dezember 2020

Hallo zusammen,

vielen Dank für eure zahlreichen Hinweise. Ich habe jetzt erstmal die Bilder in der Tabelle auf eine Breite von 140px festlegen können.

Zitat von Klappi

table.partner img {
width: 80px;
}

Für das Erste reicht es.

Zitat von Lui_brempt

Tabellen zum Layouten zu nutzen ist nicht sinnvoll!
Vielleicht legst du die Ansprechpartner als Kontakte an und stellst dann eine entsprechende Liste oder Blogdarstellung der Kontakte auf der Seite dar.
Auf dem Handy ist die Darstellung nicht gut.
Das dürfte auch am Tabellenkonstrukt liegen m

Das werde ich auch mal probieren - mal sehen wie es funktioniert.

Zitat von LukasHH

wäre es ggf. auch ratsam sich ein Template mit Bootstrap 3 bzw. 4 zu wählen. [FF]

Danke, ganz wichtiger Hinweis . Damit steht wohl eine komplette Überarbeitung an

Zitat von LukasHH
Problematisch hierbei sind auch die langen Bezeichnungen wie "Unterstufenkoordinatorin:". Diese bleiben in der vollen breite stehen und beeinflussen die Breite der Zelle. Wenn Du das Fenster verkleinerst, dann siehst Du das. Die Spalte der "Unterstufenkoordinatorin" bleibt in voller Breite stehen und die anderen werden umso schmaler. Da nützt die Angabe der gleichen Spaltenbreite auch nichts.

Das kann man mit CSS umgehen, wenn man diesen einen automatischen Zeilenumbruch mitgibt. Ob dieser schön ist, muss man selbst sehen.
Code
table.partner p {
    hyphens: auto;
}

- wieder etwas Neues gelernt!

Nochmals vielen Dank für die Hilfe und euch allen einen schönen zweiten Advent!

Grüße

Frank