Bildgröße in Tabelle festlegen.

  • 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

  • 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

  • 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

  • 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.


  • 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;
    }
  • 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.

    table.partner img {

    width: 80px;

    }

    Für das Erste reicht es.


    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.


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

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



    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;
    }

    :thumbup: - wieder etwas Neues gelernt!


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

    Grüße

    Frank