ik ben bezig met het maken van een website, en daarbij gebruik ik lightbox. Daarvoor heb ik een tutorial gevolgd, waar hier een voorbeeld van is weergegeven:
http://www.mijnhomepage.nl/lightbox/lightbox-voorbeeld.html
Je ziet dat er om de thumbnails geen rand zit, zoals het hoort. maar op mijn webpagina waar ik dat ook wil gebruiken, zitten er blauwe randjes omheen, zoals hier te zien is:
Ik heb echt geen idee hoe ik dit weg kan krijgen, doe ik iets verkeerd? zou iemand misschien weten hoe ik die blauwe randjes weg kan krijgen?
alvast bedankt voor de reacties
quote:Dat, maar dan in je CSS file als je het een beetje netjes wil doen.Op woensdag 5 mei 2010 20:21 schreef -Datdus- het volgende:
border="0"
quote:hij zei in html vandaarOp woensdag 5 mei 2010 20:22 schreef Tijn het volgende:
[..]
Dat, maar dan in je CSS file als je het een beetje netjes wil doen.
#lightbox a img{ border: none; }
is dat niet hetzelfde?? of moet die border nog ergens anders staan?
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
| 1 2 3 4 | { border-width: 0; } |
Dan is 'ie helemaal goed.
quote:Niet alle browsers tekenen standaard een border om een plaatje. WebKit doet dat niet, maar andere browsers (IEOp woensdag 5 mei 2010 20:27 schreef -Datdus- het volgende:
ie zeker? in chrome is hij prima.
) wel.ik weet niet hoe ik het wegkrijg.
dan heb je misschien een link-color aanstaan
quote:Op woensdag 5 mei 2010 20:29 schreef Tijn het volgende:
Dat is de CSS van de Lightbox zelf. Het probleem heeft niks met de Lightbox te maken, maar met het feit dat de gelinkte plaatjes op je website niet zijn vormgegeven. Je moet gewoon in "mijn.css" even typen:
[ code verwijderd ]
Dan is 'ie helemaal goed.
Dankje wel! de blauwe rand is nu weg Topic kan gesloten worden