Geen witruimte

vrijdag 19 augustus 2022 14:48

Acties:

0 Henk 'm!

Topicstarter

Mijn vraag:

Ik wil een aantal jpg-bestandjes van 200x200 presenteren als één afbeelding.
Ik had gedacht dit te doen met een tabel: <table width="100%" border="0" cellspacing="0" cellpadding="0">.
In Dreamweaver ziet het er goed uit, maar in de browser Edge verschijnt rondom de tabel en tussen de regels (rows) een witruimte. Hoe krijg ik deze weg?

vrijdag 19 augustus 2022 20:53

Soultaker

(Dreamweaver? Welk jaar is het?)

Een alternatief voor de tabel is om de plaatjes in divs te stoppen, bijvoorbeld:

HTML:

<div>
   <div>
      <img src="plaatje-rij-1-kolom-1.jpg">
      <img src="plaatje-rij-1-kolom-2.jpg">
      ...
      <img src="plaatje-rij-1-kolom-N.jpg">
    </div>
   <div>
      <img src="plaatje-rij-2-kolom-1.jpg">
      <img src="plaatje-rij-2-kolom-2.jpg">
      ...
      <img src="plaatje-rij-2-kolom-N.jpg">
    </div>
   <div>
      <img src="plaatje-rij-M-kolom-1.jpg">
      <img src="plaatje-rij-M-kolom-2.jpg">
      ...
      <img src="plaatje-rij-M-kolom-N.jpg">
    </div>
</div>

Vervolgens moet je zorgen dat de divs geen padding en margin hebben zodat alles netjes aansluit.

Je kunt ook alle plaatjes in één div stoppen en met display:grid de layout verzorgen.

vrijdag 19 augustus 2022 14:58

Acties:

0 Henk 'm!

CyBeRSPiN

sinds 2001

Open je web developer toolbar, dan kun je zien hoe het komt. Mogelijk zitten er nog margins / paddings op de tr of td.

vrijdag 19 augustus 2022 17:12

Acties:

0 Henk 'm!

Mjan

Topicstarter

Goeie tip om de developer toolbar te gebruiken. Alles staat op 0.

table {
border-collapse: separate;
text-indent: initial;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}

Toch wordt door <td> 4 pixels witruimte gecreëerd.

Het wijzigen van de 'display' instelling doet deze pixels wel verdwijnen, maar dan gaat de indeling van de plaatjes er ook aan en/of is een deel van de tabel niet meer zichtbaar.

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
border-top-color: inherit;
border-right-color: inherit;
border-bottom-color: inherit;
border-left-color: inherit;
}

vrijdag 19 augustus 2022 17:15

Acties:

+1 Henk 'm!

Pjottski

🦍 Monkey 🦍

Cascading Stylesheet:

1	border-collapse: collapse;

Denk dat je daar de oplossing in moet zoeken.

Dit is mijn uitspraak en daar zult u het mee moeten doen

vrijdag 19 augustus 2022 17:32

Acties:

0 Henk 'm!

Mjan

Topicstarter

Dat heb ik al geprobeerd en het maakt geen verschil.

<Td> geeft 204 pixels aan, maar <Tr> ook

[ Voor 29% gewijzigd door Mjan op 19-08-2022 17:35 ]

vrijdag 19 augustus 2022 20:53

Acties:

Beste antwoord ✓
+1 Henk 'm!

Soultaker

(Dreamweaver? Welk jaar is het?)

Een alternatief voor de tabel is om de plaatjes in divs te stoppen, bijvoorbeld:

HTML:

<div>
   <div>
      <img src="plaatje-rij-1-kolom-1.jpg">
      <img src="plaatje-rij-1-kolom-2.jpg">
      ...
      <img src="plaatje-rij-1-kolom-N.jpg">
    </div>
   <div>
      <img src="plaatje-rij-2-kolom-1.jpg">
      <img src="plaatje-rij-2-kolom-2.jpg">
      ...
      <img src="plaatje-rij-2-kolom-N.jpg">
    </div>
   <div>
      <img src="plaatje-rij-M-kolom-1.jpg">
      <img src="plaatje-rij-M-kolom-2.jpg">
      ...
      <img src="plaatje-rij-M-kolom-N.jpg">
    </div>
</div>

Vervolgens moet je zorgen dat de divs geen padding en margin hebben zodat alles netjes aansluit.

Je kunt ook alle plaatjes in één div stoppen en met display:grid de layout verzorgen.

vrijdag 19 augustus 2022 21:39

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Mjan schreef op vrijdag 19 augustus 2022 @ 14:48:
<table width="100%"

Daar zit denk ik ook (deel) van je probleem. Waarom maak je die tabel zo breed als z'n container?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 19 augustus 2022 22:10

Acties:

0 Henk 'm!

0xDEADBEEF

Is pagination een vereiste? Want met ImageMagick kan je er éen afbeelding van maken.

"Religion is an insult to human dignity. With or without it you would have good people doing good things and evil people doing evil things. But for good people to do evil things, that takes religion." - Steven Weinberg

zaterdag 20 augustus 2022 01:14

Acties:

+1 Henk 'm!

Verwijderd

Even diep in mijn geheugen gravend: de img zijn inline elementen (als gewone karakters). dus moet je ze weergeven als display: inline-block. (En dan geen spaties er om heen)

zaterdag 20 augustus 2022 07:18

Acties:

0 Henk 'm!

eheijnen

Wat mee gespeeld.
Heeft een <table> en een de optie met <div> elementen.
Zoals Rob al zei mag de <table width=> niet op 100% staan. Die kun je weglaten of je geeft de tabel de breedte en hoogte van het aantal images opgeteld, dan is de tabel fixed voorwat grootte aangaat.

HTML:

<html>
<head>
    <title></title>
    
    <style>
        .divImg { float: left; }
        div { clear: both; }
    </style>
</head>
<body>

    <table border="0" cellspacing="0" cellpadding="0">

        <tr>
            <td><img src="red.png"></td>
            <td><img src="green.png"></td>
            <td><img src="red.png"></td>
        </tr>
        
        <tr>
            <td><img src="green.png"></td>
            <td><img src="red.png"></td>
            <td><img src="green.png"></td>
        </tr>
        
    </table>
    
    <br>
    
    <div>
        <img src="red.png" class="divImg">
        <img src="green.png" class="divImg">
        <img src="red.png" class="divImg">
    </div>

    <div>
        <img src="green.png" class="divImg">
        <img src="red.png" class="divImg">
        <img src="green.png" class="divImg">
    </div>
        
</body>
</html>

Wie du mir, so ich dir.

zaterdag 20 augustus 2022 14:37

Acties:

0 Henk 'm!

Mjan

Topicstarter

Ik ben er met de oplossing van Soultaker uitgekomen. In eerste instantie had ik nu witruimte tussen de kolommen, maar ik kwam erachter dat er geen spaties en entercodes tussen de img-bestanden mogen zitten. Ziet er nu goed uit.

Ik ga op een later moment nog naar het voorstel van 0xDEADBEEF kijken, maar ik vond ImageMagick met zijn commandoregels niet makkelijk te doorgronden. daar moet ik echt een keer voor gaan zitten.

Hartelijk dank voor alle support. Super!

zaterdag 20 augustus 2022 15:50

Acties:

0 Henk 'm!

0xDEADBEEF

Mjan schreef op zaterdag 20 augustus 2022 @ 14:37:
Ik ben er met de oplossing van Soultaker uitgekomen. In eerste instantie had ik nu witruimte tussen de kolommen, maar ik kwam erachter dat er geen spaties en entercodes tussen de img-bestanden mogen zitten. Ziet er nu goed uit.

Ik ga op een later moment nog naar het voorstel van 0xDEADBEEF kijken, maar ik vond ImageMagick met zijn commandoregels niet makkelijk te doorgronden. daar moet ik echt een keer voor gaan zitten.

Hartelijk dank voor alle support. Super!

spoiler:

https://www.google.com/se...ick+vertical+stitch+image

De keerzijde is dat het uiteindelijke bestand nogal groot wordt, en je zo te lezen tegen de dimensie-limieten van JPEG aan kan lopen.

"Religion is an insult to human dignity. With or without it you would have good people doing good things and evil people doing evil things. But for good people to do evil things, that takes religion." - Steven Weinberg

Vraag

Beste antwoord (via Mjan op 20-08-2022 14:33)

Alle reacties