Twee tabellen naast elkaar

Hi hansi2124,

Vooraf:

• Maak een back-up van je site
• Maak de wijzigingen in een childtheme

Om dit te bereiken moet je twee dingen aanpassen:

1. de tekst van je pagina
2. de css-code van style.css

Stap 1: aanpassen pagina

1. open de pagina en klik de TEKST-tab bovenaan het edit veld
2. Vervang de inhoud met de volgende code

<div id="frame1">

    <h1>
        frame one - deze kop kan je veranderen / verwijderen
    </h1>

    <p>
        [ws_table id="1"]
    </p>

</div> <!-- einde frame1 -->
<div id="frame2">
<h1>
        frame two - deze kop kan je veranderen / verwijderen
    </h1>
<p>
    [ws_table id="2"]
</p>
</div> <!-- einde frame2 -->
<div id="frame3">
<h1>
        frame three - deze kop kan je veranderen / verwijderen
    </h1>
<p>
    [ws_table id="3"]
</p>
</div> <!-- einde frame3 -->

STAP 2: aanpassen css-code

1. voeg deze code toe aan style.css (van het childtheme)

#frame1 {
            display: block;
            float: left;
            width: 25%; /*breedte alle frames samen kleiner dan 100% houd rekening met marges en padding!!*/
            height: 400px; /*zelf aan te passen - bv op de hoogste van de drie of 'auto'*/
            margin: 4px 20px 4px 4px; /*volgorde: boven - rechts - onder - links; hier: de rechtermarge bepaalt de tussenruimte:  20px */
            overflow: auto;
            padding: 0 16pt; /*ruimte tussen rand frame en tekst*/
        }
        #frame1 h1 { margin-top: 0; }
		#frame2 {
            display: block;
            float: left;
            width: 25%;/*breedte alle frames samen kleiner dan 100% houd rekening met marges en padding!!*/
            height: 400px; /*zelf aan te passen - bv op de hoogste van de drie of 'auto'*/
            margin: 4px 20px 4px 4px; /*volgorde: boven - rechts - onder - links; hier: de rechtermarge bepaalt de tussenruimte:  20px */
            overflow: auto;
            padding: 0 16pt; /*ruimte tussen rand frame en tekst*/
        }
        #frame2 h1 { margin-top: 0; }

		#frame3 {
            display: block;
            float: left;
            width: 25%; /*breedte alle frames samen kleiner dan 100% houd rekening met marges en padding!!*/
            height: 400px; /*zelf aan te passen - bv op de hoogste van de drie of 'auto'*/
            margin: 4px 20px 4px 4px; /*volgorde: boven - rechts - onder - links; hier: de rechtermarge bepaalt de tussenruimte:  20px */
            overflow: auto;
            padding: 0 16pt; /*ruimte tussen rand frame en tekst*/
        }
        #frame3 h1 { margin-top: 0; }

Tip: Installeer ‘one click childtheme’ plug-in om eenvoudig een childtheme te maken.

Hi Hansi2124,

Het op maat maken van tabellen en frames is altijd een puzzel die wat ‘proberen en rommelen’ oplevert, voor het goed zit.

Het is van achter m’n scherm niet te zeggen wat er precies niet goed is gegaan.

Daarom heeft het volgende het meeste kans op succes [ is geen garantie 😉 helaas]
Maak eerst een back-up van style.css

!in de tekst-tab van de edit-pagina:

1. WIS de hele inhoud van de pagina / begin een hele nieuwe pagina
2. Plaats eerst [tijdelijk] een regel tekst
3. Plaats de afbeelding
4. plaats onder de afbeelding een tijdelijke tekst
5. [!in de tekst-tab van de editor!] Plak de volgende AANGEPASTE code ONDER de rest van de pagina.

   <div id="frame1">
   
       <h1>
           frame one
       </h1>
   
       <p>
           [ws_table id="1"]
       </p>
   </div> <!-- einde frame1 -->
   <div id="frame2">
   <h1>
           frame two
   </h1>
   <p>
       [ws_table id="2"]
   </p>
   </div> <!-- einde frame2 -->
   
   Tijdelijke tekst
   <h1>
           Tabel 3  zonder frame
       </h1>
   <p>
       [ws_table id="3"]
   </p>
   </li>

   Stap 2:
   Om de breedte van de tabellen aan te passen:

   Verander style.cssals volgt:

   #frame1 {
               display: block;
               float: left;
               width: 25%; /*breedte alle frames samen kleiner dan 100% houd rekening met marges en padding!!*/
               height: 400px; /*zelf aan te passen - bv op de hoogste van de drie of 'auto'*/
               margin: 4px 20px 4px 4px; /*volgorde: boven - rechts - onder - links; hier: de rechtermarge bepaalt de tussenruimte:  20px */
               overflow: auto;
               padding: 0 16pt; /*ruimte tussen rand frame en tekst*/
           }
           #frame1 h1 { margin-top: 0; }
   		#frame2 {
               display: block;
               float: left;
               width: auto;
               height: 400px; /*zelf aan te passen - bv op de hoogste van de drie of 'auto'*/
               margin: 4px 20px 4px 4px; /*volgorde: boven - rechts - onder - links; hier: de rechtermarge bepaalt de tussenruimte:  20px */
               overflow: auto;
               padding: 0 16pt; /*ruimte tussen rand frame en tekst*/
           }
           #frame2 h1 { margin-top: 0; }
   </li>

   NB! De opmaak voor frame3 is dus verdwenen; Tabel 3 staat nu nog wel in de pagina, maar niet meer in een frame, en de waarden voor de frames 1 en 2 zijn aangepast.

• Sla alle veranderingen op en controleer het resultaat.

Gaat het nu de goeie kant op?

• Verwijder voorzichtig de tijdelijke teksten.

Mocht ook dit niet werken, dan is er altijd nog een plan B-C-D…
Houd moed.

Goed om te horen.
Graag gedaan

Vergeet niet om de vraag als ‘opgelost / resolved te taggen [rechter zijbalk]