login  Naam:   Wachtwoord: 
Registreer je!
 Forum

ruimte tussen border om foto (Opgelost)

Offline adventure - 11/03/2014 22:47
Avatar van adventureNieuw lid Ik wil graag een witte border om een foto plaatsen. Dit lukt wel alleen je ziet een heel klein randje(opening) tussen de foto en de border, de border sluit dus niet mooi aan op de foto. Waar zou de fout kunnen zitten?
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="margin: auto; margin-top: 20px; width: 972px; height: 300px;">
  2.     <img src="1.jpg" height="300" width="300" style="margin-right: 20px; border: 3px solid #FFFFFF" alt="">
  3.    <img src="2.jpg" height="300" width="300" style="margin-right: 20px; border: 3px solid #FFFFFF" alt="">
  4.     <img src="3.jpg" height="300" width="300" style="border: 3px solid #FFFFFF" alt="">
  5. </div>

6 antwoorden

Gesponsorde links
Offline Thomas - 11/03/2014 23:25 (laatste wijziging 11/03/2014 23:43)
Avatar van Thomas Moderator Mogelijk border, margin of padding. Als je al deze attributen een waarde geeft is je probleem wellicht opgelost. Het kan ook helpen deze attributen expliciet de waarde "0" te geven, als je deze niet wilt gebruiken.

EDIT: ook kan het helpen de spaties en enters tussen de <img /> te verwijderen.

Dus alles aan elkaar plakken : <div><img /><img /><img /></div>

Of de images laten floaten ofzo (display: block, float: left). Maar dan moet je ze in een div-container stoppen om er een "rand" omheen te maken denk ik; dit zou je kunnen bereiken met een div met een achtergrondkleur, en de image die erin zit heeft een margin met de afmetingen van je border, als je dit begrijpt.
Offline marten - 12/03/2014 08:15
Avatar van marten Beheerder Wanneer je add ons voor je browser gebruikt kan je zeer makkelijk zien waar de waarde weg komt. Onderstaand een screenshot van de webdeveloper toolbar van Chrispedrick.

http://www.sitemasters.be/marten/voorbeeld.png
Offline adventure - 12/03/2014 09:19
Avatar van adventure Nieuw lid Ik heb echt al van alles geprobeerd. De img apart in een div zetten, hoogte/breedte waardes aan de div geven maar ik krijg het echt niet weg. De border sluit gewoon niet aan.
Offline marten - 12/03/2014 09:23
Avatar van marten Beheerder Heb je een screenshot van wat je nu hebt? Of een stukje code?
Offline adventure - 12/03/2014 09:35
Avatar van adventure Nieuw lid Ik heb de code nu weer hetzelfde gelaten als hierboven.
Offline Thomas - 12/03/2014 11:27
Avatar van Thomas Moderator Ah, dit ben ik al eerder tegengekomen inderdaad. Je kunt dit oplossen door display: block; float: left; toe te voegen aan de afbeeldingen. Als je dit niet doet voegen sommige (?) browsers een soort van spatie toe achter je afbeeldingen. Dit verhindert je dan om afbeeldingen "luchtdicht" te verpakken in een container.

Let er trouwens op dat je image borders de breedte en hoogte van de ingenomen ruimte vergroot.
De correct afmetingen van je div zouden dus moeten zijn:

breedte: 3x300 (afmetingen afbeeldingen breedte) + 3x3x2 (border afbeelding links + rechts) + 40 (marges) = 958.

hoogte: 300 (afmetingen afbeelding hoogte) + 3x2 (border afbeelding boven + onder) = 306.

Zoiets dus:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="margin: auto; margin-top: 20px; width: 958px; height: 306px;">
  2.     <img src="pixel.gif" height="300" width="300" style="margin-right: 20px; border: 3px solid #FFFFFF; display: block; float: left;" alt="">
  3.     <img src="pixel.gif" height="300" width="300" style="margin-right: 20px; border: 3px solid #FFFFFF; display: block; float: left;" alt="">
  4.     <img src="pixel.gif" height="300" width="300" style="border: 3px solid #FFFFFF; display: block; float: left;" alt="">
  5. </div>
Bedankt door: adventure
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s