+ Antworten
Ergebnis 1 bis 9 von 9

Thema: div responsive und gleich hoch

  1. #1
    War schon öfter hier
    Registriert seit
    06.10.2010
    Ort
    nahe düren
    Beiträge
    158
    Bedankte sich
    31
    Erhielt 3 Danksagungen
    in 3 Beiträgen

    Standard div responsive und gleich hoch

    Hallo,

    ich wüsste gern, ob es möglich ist, "div"s sowohl responsiv als auch gleich hoch zu gestalten?
    In den divs zeige ich einen Link an.
    Leider habe ich bisher immer nur eine Ansicht für sich erzeugen können.

    Ich verwende das tpl Rebase.

    CSS:
    Code:
    /* responsive */
    div.span3.fourdivs {display: flex;}
    
    div.span3.fourdivs a {display:block;}
    Code:
    /* gleich hoch */
    #flex-container {
       display: -webkit-flex;
       display: -ms-flex;
       display: flex;
       -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
    }
    
    .panel-test2 {
    	display: -webkit-flex; 
    	display: -ms-flexbox; 
    	display: flex;
    	width: 29%;
    	float: left;
    }
    .panel-test2  a {display:block;}

    HTML
    HTML-Code:
    <div class="row-fluid">
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
    </div
    <div class="row-fluid">
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
      <div class="span3 fourdivs"><a href="#">Test</a></div>
    </div
    Ein Beispiel: link

    Vielen Dank für jede Hilfe!

  2. #2
    Verbringt hier viel Zeit Avatar von Dudlhofer
    Registriert seit
    11.02.2009
    Ort
    da wo Bayern am schönsten ist
    Beiträge
    575
    Bedankte sich
    29
    Erhielt 184 Danksagungen
    in 149 Beiträgen

    Standard

    Du musst die Höhe halt festlegen, z.B. mit
    Code:
    div.span3.fourdivs {display: flex; min-height:200px;}
    Dann sieht's so aus:
    Zwischenablage01.jpg

    Wenn der Text länger wird als die Höhe hergibt, könnte man da entweder die abweichende Höhe zulassen, oder per "overflow:hidden" abschneiden.

    ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦ EXTRA BAVARIAM NULLA VITA ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦


  3. #3
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.190
    Bedankte sich
    134
    Erhielt 2.316 Danksagungen
    in 2.182 Beiträgen
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  4. #4
    War schon öfter hier
    Registriert seit
    06.10.2010
    Ort
    nahe düren
    Beiträge
    158
    Bedankte sich
    31
    Erhielt 3 Danksagungen
    in 3 Beiträgen

    Standard

    Vielen Dank,

    @Dudlhofer: Wenn ich das mache, sieht es in der mobilen Ansicht ganz furchtbar aus.

    @FINWICK: Leider verstehe ich js nicht wirklich und bei GitHub steht auch nicht, wie man das dann in den Joomla- Content einbindet.

  5. #5
    War schon öfter hier
    Registriert seit
    06.10.2010
    Ort
    nahe düren
    Beiträge
    158
    Bedankte sich
    31
    Erhielt 3 Danksagungen
    in 3 Beiträgen

    Standard

    @FINWICK: In einem Artikel habe ich TableSorter erfolgreich verwendet. Vllt. schaffe ich js ja doch...
    • Ich habe das Script heruntergeladen,
    • in Joomla installiert
    • und das Beispiel (wohl falsch) angepasst:

    HTML-Code:
    {source}
    <script src="&lt;code" javascript="" type="text/javascript">//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"</script>
    <script src="/media/jui/js/jquery.matchHeight.js&lt;/script" javascript="" type="text/javascript">
    (function() {
       /* matchHeight example */
       $(function() {
          // apply matchHeight to each item container's items
          $('.row-fluid').each(function() {
             $(this).children('.span3 fourdivs').matchHeight({
                byRow: byRow
              });
          });
       });
    })();
    </script>
    {/source}
    Wo könnte denn der Fehler sein?
    Geändert von Eierkopf (09.11.2018 um 14:54 Uhr)

  6. #6
    Verbringt hier viel Zeit Avatar von Dudlhofer
    Registriert seit
    11.02.2009
    Ort
    da wo Bayern am schönsten ist
    Beiträge
    575
    Bedankte sich
    29
    Erhielt 184 Danksagungen
    in 149 Beiträgen

    Standard

    Zitat Zitat von Eierkopf Beitrag anzeigen
    @Dudlhofer: Wenn ich das mache, sieht es in der mobilen Ansicht ganz furchtbar aus.
    Das lässt sich ja durch entsprechende Breakpoints regeln.

    Dein Beispielcode ist wegen des fehlenden "[" am Ende bei "/HTML]" evtl. verwurstelt worden, oder kommen die "&lt" in der 2. und 3. Zeile aus Deinem Original?
    Geändert von Dudlhofer (08.11.2018 um 19:33 Uhr)

    ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦ EXTRA BAVARIAM NULLA VITA ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦


  7. #7
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.190
    Bedankte sich
    134
    Erhielt 2.316 Danksagungen
    in 2.182 Beiträgen

    Standard

    Zitat Zitat von Eierkopf Beitrag anzeigen
    @FINWICK: In einem Artikel habe ich TableSorter erfolgreich verwendet. Vllt. schaffe ich js ja doch...
    • Ich habe das Script heruntergeladen,
    • in Joomla installiert
    • und das Beispiel (wohl falsch) angepasst:

    HTML-Code:
    {source}
    <script src="<code" javascript="" type="text/javascript">//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"</script>
    <script src="/media/jui/js/jquery.matchHeight.js</script" javascript="" type="text/javascript">**********
    (function() {
       /* matchHeight example */
       $(function() {
          // apply matchHeight to each item container's items
          $('.row-fluid').each(function() {
             $(this).children('.span3 fourdivs').matchHeight({
                byRow: byRow
              });
          });
       });
    })();
    </script>
    {/source}
    Wo könnte denn der Fehler sein?
    Überprüfe ob jquery.min.js schon auf der Seite eingebunden ist, mehrfach eingebunden ergeben nur Fehler bei der Ausführung des Scriptes.
    Im Browser in der Konsole dann überprüfen, ob Fehler gemeldet werden.
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  8. #8
    War schon öfter hier
    Registriert seit
    06.10.2010
    Ort
    nahe düren
    Beiträge
    158
    Bedankte sich
    31
    Erhielt 3 Danksagungen
    in 3 Beiträgen

    Standard

    Ich teste das mal...
    Angehängte Grafiken
    Geändert von Eierkopf (09.11.2018 um 15:19 Uhr)

  9. #9
    War schon öfter hier
    Registriert seit
    06.10.2010
    Ort
    nahe düren
    Beiträge
    158
    Bedankte sich
    31
    Erhielt 3 Danksagungen
    in 3 Beiträgen

    Standard

    Ich habe in einem Joomla-Artikel, wo TableSorter läuft, die Codezeile
    HTML-Code:
    <script src="<code" javascript="" type="text/javascript">//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"</script>
    entfernt. In der FF-Konsole werden beide Scripte angezeigt - die Funktion zum Sortieren steht aber nicht zur Verfügung.


    Was mich irritiert: offenbar wird das matchHeight.js nicht geladen:
    scr.2JPG.JPG
    Wahrscheinlich liegt da der Fehler, den ich leider nicht erkennen kann.

+ Antworten

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein