Foto met irritant wit randje, hoe krijg ik dat randje weg?

Status
Niet open voor verdere reacties.
L

lippe

Gebruiker
Lid geworden
10 mei 2012
Berichten
12
Wanneer ik een jpg plaats op mijn website zit er een irritant wit randje langs die foto, zodat je ook echt kunt zien dat die Jpg geplaatst is op een achtergrond. Hoe krijg ik dat witte randje weg? Heb er al een Tif en een Gif, maar dat mocht niet baten...
Greetz,
Dennuz
 
Je hebt waarschijnelijk de atribuut border niet in je img tag.

Probeer dit eens:
border="0"

Voorbeeld:
<img src="smiley.gif" alt="Smiley face" border="0" />
 
Jawel, ik heb dit er staan:

<body style="background-color:#000000; height: 100%">
<table border="0" cellpadding="4" cellspacing="0" style="width:100%; height: 100%">
<tr>
<td width="100%" align="center">
<a href="home.html"><img src="images/logoenter.jpg" width="350" height="155" border="0">

Greetz
 
Probeer het ook eens in je a href te zetten:
<a href="home.html" border="0">
 
Hoi lippe,
Probeer dit eens *):
HTML: 
...
<img src="images/logoenter.jpg" width="350" height="155" style="border:0">
Als dat niet werkt, zal het ergens anders in zitten, bv. als in de css voor alle <a>'s een padding is opgegeven, of iets in de tabel-opmaak.
Maar er zijn ook andere mogelijkheden waarom dat witte randje verschijnt!
Heb je een link naar een voorbeeld-pagina, zodat we het in werking kunnen zien?

Met vriendelijke groet,
CSShunter
___________
*) border="..." is bij een image een "deprecated" (achterhaalde) eigenschap om in de html-code te gebruiken.
Zie ook hier in dit topic.
 
Hoi lippe,
Kijk, daarom is het altijd het beste om de patiënt in levende lijve online te zien. ;)

Blijkt: het randje kan niet met de html of css worden weggehaald, want ...
... het is geen code die het randje heeft gemaakt! :D


  • Het is het img zelf, waar het randje in zit.
  • Header-afbeelding homepage: ook!

Tegen een witte achtergrond zie je het niet, wel op een zwarte achtergrond of bij uitvergroting:

scklogo-ori.jpg

originele jpg

scklogo-ori-8x.png

rechterbovenhoek origineel,
8 keer vergroot

scklogo-nw.png

nieuwe versie:
scklogo-nw.png​

Probeer de laatste maar eens.

Met vriendelijke groet,
CSShunter
 
Hoeft niet,
een png doet het net zo goed op een website (en hier beter: met betere kwaliteit dan de jpg, en ook met minder kB's).
Downloaden, uploaden, en even de naam wijzigen in de code van de pagina.

Zie ook bv. hier: Images optimaliseren en hier: Image saving.
 
Ik heb die jpg's gemaakt met Corel Draw, zou ik daar iets niet goed gedaan hebben zodat er steeds een wit randje ontstaat?
 
Dat is PaintShopPro? Daar gebruik ik een oude versie van. Bij mij kan zo'n randje ontstaan:
  • als ik een deel van een afbeelding uitknip en daarbij in de selectie-eigenschappen het "doezelen" op meer dan 0 staat,
  • of als het "anti-aliassen" is ingeschakeld.

doezelen.png


  • Als je niet een selectie uitknipt, maar juist een selectie opvult door het verfemmertje er in om te kieperen, gebeurt hetzelfde als de selectie niet messcherp is.
  • Bij grillige selecties met de lasso of het toverstokje kan trouwens hetzelfde gebeuren. Soms moet zo'n selectie juist vloeiend verlopen, maar soms ook niet.

Met doezelen en/of anti-alias wordt er nl. een verlooptintje bij gemaakt, dat in principe naar transparant wegloopt (als je in laagjes werkt). Maar voeg je alle lagen samen, en is wit de achtergrondkleur ipv zwart, dan wordt het transparant naar wit = een grijstint ertussenin.

Met vriendelijke groet,
CSShunter
 
Okey, tenx, CorelDraw is idd een soort van PaintShop pro, en werkt min of meer hetzelfde. Inderdaad gebruik ik meestal het vulgereedschap, ff uitknippekn dus?! Het exporteren naar png is tot nog toe afdoende, nogmaals bedankt voor je tips!
Cheerz,
Lippe
 
Hoi Lippe,
De top.png heeft nog steeds een wit randje rondom, zie ik. Je ziet er alleen het bovenrandje van, omdat de afbeelding 1202*220px groot is, en de <div>'s waar ie gecentreerd in zit, maar 950*200px.
En er speelt nog iets, blijkt bij het analyseren van deze png. Hij is opgeslagen met een zg. alpha-kanaal waarin transparantie geregeld wordt. In dit geval is het allerbuitenste randje van de png (1px rondom) semi-transparant. Dat kan je zien als je even de background van de #imHeader op yellow zet ipv zwart.

Als het even kan, moet een png zonder transparantie opgeslagen worden: minder kans op ongelukken en vaak een forse winst aan kB's omdat een alpha-kanaal extra bestandsgrootte vraagt (bij elke pixel moet vastgelegd worden of en hoeveel transparantie deze bevat).
Dat zal ergens verstopt zitten in de CorelDraw instellingen bij het opslaan. Of: vlak voor het tot png maken: origineel opslaan, dan "Alle lagen samenvoegen", en dan opslaan als png.

Nog een paar dingetjes:
  • Images altijd zo klein mogelijk uitknippen *) > minder bestandsgrootte, en snellere pagina. Met css kan een image (of background-image) altijd op de goede plaats gerangeerd worden.
  • Ook het aantal kleuren in een png is van belang. Vaak (en ook hier) kan het aantal kleuren, zonder op het oog enig kwaliteitsverlies, teruggebracht worden van 16 miljoen naar 256 (!). Ook dat scheelt vaak fors in bestandsgrootte. Eerst het origineel apart opslaan, en in PSP6 dan via het menu Kleuren > optie "Kleurdiepte verminderen" en experimenteren met de opties daarvan.

Resultaat: deze sck-top-nw.png van 15kB (was: 30kB).

Je zet 'm er in met:
Code: 
...
#imHeader {
    background-position: center 20px;
    }

Met vriendelijke groet,
CSShunter
____________
*) Kan ook zonder een rechthoekige selectie te maken. Hier: background van het tekenprogramma op zwart zetten, met de toverstaf (of hoe dat ding ook heet) alle zwart aan de buitenkant selecteren (zonder doezelen af anti-alias), selectie omkeren, en dan "Afbeelding > Bijsnijden tot selectie". Dan hou je precies het minimum over. Vaak doe ik er met "Afbeelding > Doekgrootte..." nog L/R of boven/onder een paar pixeltjes bij om mooie afgeronde aantallen te krijgen (hier: van 728*164px naar 730*165px).
 
Enorm bedankt csshunter! Ik probeerde gisteren onze site op een ipad van een vriend, maar de pagina's van de muziek (The Sound) en de pagina's van de band (The Band) konden niet worden geopend, enig idee waarom niet?
 
Je bedoelt dat dan de muziek niet afspeelt?
Dat zit 'm waarschijnlijk in het <object type="application/x-mplayer2" ...>, dat een Windows Media Player plugin oproept, of de Windows Media Player wil installeren. Daar kan een iPad denkelijk niet mee overweg.

Je zou zelf een universele player op de site kunnen zetten, die geschikt is voor alle Operating Systems / browsers.

Met vriendelijke groet,
CSShunter
 
Hé, ik merk nog iets anders.
In Firefox, Chrome, Opera en Safari wordt wel de muziek op de homepage afgespeeld, maar niet die op de pagina's van The Sound!

Dat zit in de css, waarmee de player aan het zicht onttrokken wordt:
Code: 
#imObj3_00 {
    display: none;
}
Dan wordt het <object> met de player niet ingeladen, en dus niet afgespeeld.

Oplossing:
Code: 
#imObj3_00 {
    display: block;
    visibility: hidden;
}
Nu wordt ie wel ingeladen, maar toch niet afgebeeld op scherm. :)

Blijft over de vraag: doet de homepage-player het wel op de iPad? Dan zou het bovenstaande ook voor de iPad moeten werken.
En: wat is er precies met de pagina's met de bandleden aan de hand op de iPad? Wat opent er daar niet?

Met vriendelijke groet,
CSShunter
 
O, ik bedenk opeens een voor de hand liggend alternatief voor een ingebouwde Windows Media Player: YouTube! :)

Oftewel: je zet je video-bestanden gewoon op YouTube,
en je trekt uit de YouTube-pagina de code om ze in te sluiten (embedden) op je pagina.

Vermoedelijk heeft YouTube er wel voor gezorgd dat ze ook op Ipads e.d. af te spelen zijn.
Kan je eens met 1 stuks proberen; lukt 't, dan de rest ook.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan