Support » Thema en CSS/opmaak » Twee tabellen naast elkaar

  • Opgelost Hansi2124

    (@hansi2124)


    Ik gebruik het StandardPack (Child Theme) en met de plugin Websimon Tables heb ik 3 tabellen gemaakt. De eerste wil ik links, de tweede rechts en de derde links (of gecentreerd, dat maakt niet uit).
    Het gaat mij om tabel 2. Deze staat nu rechts, maar ik wil die ook ter hoogte hebben staan van tabel 2. Ik heb nu deze CSS code:

    <p style="text-align: left;">[ws_table id="1"]<div align="right">
<table>
[ws_table id="2"]
</table>
</div></p>
    
    <p style="text-align: left;">[ws_table id="3"]</p>

    Hoe krijg ik dat voor elkaar?
    http://www.picobelloleiden.nl

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • 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
    3. <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)
    2. #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.

    Thread starter Hansi2124

    (@hansi2124)

    Ik krijg het helaas niet voor elkaar zoals ik het hebben wil.
    Hoe het er nu uitziet met bovenstaande wijzigingen is dat tabel 1 goed staat (dat was ook niet het probleem), maar tabel 2 en 3 staan naast elkaar en zijn slechts gedeeltelijk zichtbaar. Om te hele tabel te kunnen zien moet je scrollen. Dat is uiteraard niet de bedoeling.
    Ook wil ik graag tabel 2 naast tabel 1.

    Zie ik misschien iets over het hoofd?

    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.

    Thread starter Hansi2124

    (@hansi2124)

    Ik heb moed gehouden en: het is uiteindelijk goed gekomen! 😉

    Bovenstaande heb ik uitgevoerd. Het resultaat was dat frame 1 nog niet juist werd weergegeven. Scrollen was nog steeds noodzakelijk.
    Door de width te veranderen naar 39% (was 25%) is dit opgeheven. Ook was frame 1 niet goed uitgelijnd met tabel 3 en de andere items aan de linkerkant. Dat heb ik verholpen door de linkermargin van 4 naar -20 te brengen.

    Dat </li> hier niet in thuis hoorde, was mij gelukkig gelijk al duidelijk. 😉
    Ik kan nu verder met de website naar mijn hand te zetten.
    Heel erg bedankt voor deze hulp!

    Goed om te horen.
    Graag gedaan

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

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Twee tabellen naast elkaar’ is gesloten voor nieuwe reacties.