Joomla!NL - responsive tabel

responsive tabel

01 sep 2013 23:08

#1

Joomla 2.5.14

Op een breedte van 800 pixel wil ik een soort tabel met 4 kolommen maken en pakweg 20 rijen.
Eerste rij met foto's welke een hyperlink hebben naar de betreffende pagina.
Tweede rij beschrijving van de foto (naam etc)
Derde rij weer foto's
Vierde rij weer beschrijving van de foto's
et cetera.

Met een tabel is dit geen probleem toch, natuurlijk klopt.
ECHTER, aangezien deze tabel 800 pixels groot is komt hij niet in zijn geheel op een smartphone.
Met andere woorden, dat onderdeel van de website is niet responisve.

Weet iemand hoe dit op te lossen. Heb reeds getracht 4 tabellen van 1 kolom en 2 rijen naast elkaar te zetten, maar dat gaat op één of andere manier niet.
Zodra ik de code van een nieuwe tabel invoer onder de vorige, komen de tabellen automatisch onder elkaar, en dus ook de plaatjes met bijbehorende tekst.

Of is daar een andere oplossing voor ?

TonGeul
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 119

responsive tabel

02 sep 2013 08:32

#2

De enig juiste oplossing voor een responsive layout is om dit met divs te maken.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37440

responsive tabel

02 sep 2013 09:01 - 02 sep 2013 09:06

#3

Astrid, kan je mij een voorzetje hiervoor geven ? heb nu staan (maar dit plaatst de tabellen dus onder elkaar) :

Code:

<table style="width: 200px;" border="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

<table style="width: 200px;" border="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table style="width: 200px;" border="0">

<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

<table style="width: 200px;" border="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

enz......

Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

TonGeul
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 119

responsive tabel

02 sep 2013 09:47 - 02 sep 2013 09:47

#4

Ton,
Probeer het eens zo (Dus niet met de tabel-codes waar je in je voorbeeld met werkt):

Code:

<div style="width: 100%; clear: left;">
	<div style="width: 50%; float: left; text-align: left;">Hier de inhoud van deze 'cel' op de eerste regel
	</div>
	<div style="width: 50%; float: left;">Hier de inhoud van deze 'cel' op de eerste regel
	</div>
</div>
<div style="width: 100%; clear: left;">
	<div style="width: 50%; float: left; text-align: left;">Hier de inhoud van deze 'cel' op de tweede regel
	</div>
	<div style="width: 50%; float: left;">Hier de inhoud van deze 'cel' op de tweede regel
	</div>
</div>

Procentuele waarden voor de breedte gebruiken, anders wordt het niet responsive.

Met vriendelijke groet,
Wouter Compactweb.nl

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum.

Wil je Joomla!NL steunen? Dat kan met een donatie.

WoodyF4u
Moderator + Nieuwsteam
Berichten: 11277

responsive tabel

02 sep 2013 18:41

#5

Woody,

Zou graag wat meer inzicht in deze codes willen hebben.
Als ik dit zo toe pas, komen de blokken onder elkaar te staan.
Niet zo verwonderlijk denk ik, omdat alles geforceerd links staat, volgens de codes.
De paginabreedte is standaard 950 px, de afbeeldingen 200 px dus zou ik er toch 4 naast elkaar moeten kunnen plaatsen.

TonGeul
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 119

responsive tabel

02 sep 2013 21:22

#6

Beetje zelf stoeien is natuurlijk altijd leuk en leerzaam.
Kijk ook maar eens naar dit voorbeeld waarin een tabel wordt opgebouwd:

Code:

<div class="table">
  <div class="row">
    <div class="cell">info</div>
    <div class="cell">info</div>
  </div>
  <div class="row">
    <div class="cell">info</div>
    <div class="cell">info</div>
  </div>
</div>

Ik denk dat die opzet je wel verder zal helpen.

Met vriendelijke groet,
Wouter Compactweb.nl

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum.

Wil je Joomla!NL steunen? Dat kan met een donatie.

WoodyF4u
Moderator + Nieuwsteam
Berichten: 11277

Laatste nieuws

Welkom bij Joomla!NL

responsive tabel

responsive tabel

responsive tabel

responsive tabel

responsive tabel

responsive tabel

responsive tabel

Laatste forumberichten

Wil je Joomla!NL steunen?