headershadow

Page content

tabellen naast elkaar

Dit onderwerp bevat 5 reacties, heeft 0 stemmen, en is het laatst gewijzigd door  SunAssid 7 jaren, 8 maanden geleden.

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Auteur
    Berichten
  • #584749

    Ronald
    Lid

    Voor een site over strandmeubilair moet ik op de begin pagina drie rijen van 4 breed met plaatjes zetten. Alleen deze plaatjes moeten allemaal een omlijning hebben. Ik zat dus te denken aan tabellen. Maar ik krijg niet 4 tabellen naast elkaar. Ze komen automatisch onder elkaar te staan. Hoe kan ik dit het beste oplossen?

    #643150

    Ik denk dat je 4 verschillende tabellen hebt gemaakt. Maar wat je moet doen is 1 tabel maken met 3 rijen en 4 kollommen. Hier een voorbeeldje.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.

    <table border="1">
      <tr>
        <td><img src="foto1.jpg"></td>
        <td><img src="foto2.jpg"></td>
        <td><img src="foto3.jpg"></td>
        <td><img src="foto4.jpg"></td>
      </tr>
        <tr>
        <td><img src="foto5.jpg"></td>
        <td><img src="foto6.jpg"></td>
        <td><img src="foto7.jpg"></td>
        <td><img src="foto8.jpg"></td>
      </tr>
      <tr>
        <td><img src="foto9.jpg"></td>
        <td><img src="foto19.jpg"></td>
        <td><img src="foto11.jpg"></td>
        <td><img src="foto12.jpg"></td>
      </tr>
    </table>

    Hiermee zou het naar mijn mening moeten lukken veel succes er nog mee.

    #643164

    Ik raad je aan om een lijst te gebruiken en de list-items met de float-property naast elkaar te positioneren.
    Het bespaard je code, en het is flexibeler in opmaak.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.

    <ul class="fotos">
    <li><img src="foto.jpg" alt="" /></li>
    <li><img src="foto.jpg" alt="" /></li>
    <li><img src="foto.jpg" alt="" /></li>
    <li><img src="foto.jpg" alt="" /></li>
    </ul>

    Vervolgens kun mbv CSS een rand om de afbeeldingen krijgen:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.

    ul#fotos li
    {
    float: left; /* of display: inline */
    }
    ul#fotos li img
    {
    border: 2px solid #fc0;
    }

    #643168

    SunAssid,

    Het nadeel van een ul is dat de margin en padding niet hetzelfde in FF en IE zijn. Zo staat hij bijvoorbeeld in FF een stuk meer naar rechts dan in IE.

    Greetz,
    Flepstepper

    #643406

    Niet als je de margin en padding beide op 0 zet. Dan is er niets aan de hand. Vervolgens kun je een van de twee aanpassen, waar beide browsers vervolgens hetzelfde op zullen reageren.

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.