WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 06.03.2017 17:14:15

dedra
Member

3 oder 4 Text / Bild"spalten"

möchte ich nebeneinander darstellen - das klappt super in einer Tabelle.
Doch diese Technik funktioniert nicht mehr wenn die Seite responsiv - sprich auf einem Smartphone angeschaut wird.
Wie kann ich das anders lösen?

Die Headlines sollen <h2> haben, Text darunter <normal> - wie gesagt mangels Ahnung habe ich ne Tabelle genommen und die Worte reingesetzt,
nun aber das Problem wenn ich die Seite auf nem Handybrowser anschaue - da schiebe ich die Tabelle weit nach links um alles zu sehen - und es sieht bescheiden aus. Wer hat so etwas besser gelöst - und wie?

Offline

#2 06.03.2017 17:19:38

byteworker
Member

Re: 3 oder 4 Text / Bild"spalten"

Teasers kann genau das, hier findest Du das Modul:

http://wbce.at/de/module/teasers.php

Offline

Liked by:

dedra

#3 06.03.2017 17:58:38

florian
Administrator

Re: 3 oder 4 Text / Bild"spalten"

Im einfachsten Fall kannst Du das mit <div>s lösen, die du nebeneinander stellst, z.B. so:

<div class="item">
<h2>Headline</h2>
<p>Text</p>
</div>

<div class="item">
<h2>Headline</h2>
<p>Text</p>
</div>

<div class="item">
<h2>Headline</h2>
<p>Text</p>
</div>

Im CSS definierst Du dann

.item {
width:29%;
padding:1%;
margin:1%;
float:left;
}

@media screen and (max-width:600px) {
  .item {
    width:100%;
    padding:1% 0;
   float:none;
  }
}

Die @media screen-Anweisung (die beiden } am Ende sind korrekt) bewirkt, dass auf kleineren Displays (<600 Pixel) die Blöcke unter- statt nebeneinander erscheinen.


Wenn Du das nur 1x brauchst, kannst Du das theoretisch sogar in einem WYSIWYG-Abschnitt so umsetzen, dann ist es allerdings arges Gefrickel, ggf. Textänderungen vorzunehmen, ohne dass der CKE da die Divs zerhaut.

D.h. Du könntest einen Itemz-Abschnitt dafür anlegen und in diesem dann in der Kopfzeile die Styledefinition, für Item dann

<div class="item">
<h2>[NAME]</h2>
<p>[LONG1]</p>
</div>

Wenn Du mehr als drei/vier Itemz hast, die nicht nur neben-, sondern auch untereinander hübsch angeordnet werden sollen, müsstest Du entweder Itemz-Gruppen verwenden, d.h. in jeder Grupe sind dann iimmer genau 3 Itemz. Die Kopfzeile der Gruppe müsste dann lauten

<div class="gruppe">

und die Fußzeile

</div>

Und im Stylesheet wäre noch zu ergänzen

.gruppe {
clear:both;
}

...oder Du verwendest dieses praktische jQuery-Script, das alle Blöcke auf dieselbe Höhe trimmt:

<script language="JavaScript">
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.item');
});


$(window).resize(function(){
  equalheight('.item');
});
</script>

Das würde dann in die Itemz-Fußzeile gehören.
Mit Hintergrundfarben und zusätzlich Margin lassen sich damit nette Dinge machen.

Ach so, Bilder lassen sich mit Itemz natürlich auch einfügen, der Platzhalter heißt [PICTURE] und wird so verwendet:

<img src="[PICTURE]" />

Und damit das Bild nicht herausragt, ist es sinnvoll, noch im Stylesheet zu ergänzen:

.item img {
width:100%;
height:auto;
}

Genau betrachtet ist das ganze wohl in der Tat das, was Teasers von Haus aus mitbringt, aber man kann ja auch den umständlichen Weg gehen.

Offline

#4 06.03.2017 18:12:57

grindbatzn
Guest

Re: 3 oder 4 Text / Bild"spalten"

Wenn ich annehme, dass du die Tabelle schon hast...

Du musst im Quellcode angeben: <table class="responsivetable" ...

Wenn du ein halbwegs modernes Template hast, hast du in der template.css (der Name kann variieren) ziemlich unten etwas wie:

@media screen and (max-width: 480px) {
....
}
da drin gib folgende Zeile dazu:

table.responsivetable, table.responsivetable tr, table.responsivetable th,  table.responsivetable td {display:block; width:99%;}

(ungetestet, aber sollte tun)

EDIT / Nachtrag:
Man muss aber sagen, dass die Lösung von Florian die weitaus bessere ist. Tabellen sind etwas problematisch, es kommt oft zu unverständlichen Fehlern.
Diese Variante von mir ist nur dann sinnvoll, wenn man "schnell mal" Tabellen-Design aufs Handy bringen will - oder wenn sich Tabellen eben nicht vermeiden lassen.

Last edited by grindbatzn (06.03.2017 18:31:38)

#5 07.03.2017 10:36:50

dedra
Member

Re: 3 oder 4 Text / Bild"spalten"

Vielen Dank für die rasche Hilfe, das mit dem Modul ist eine feine Sache - aber auch die weiteren Hinweise werde ich mir anschauen und ausprobieren.
Macht bitte weiter so - ganz tolle Leistung!
SG Dedra

Offline

Board footer

Powered by FluxBB

up