Likes: 
Nu ik weer eens wat tijd heb, vroeg een collega mij of ik een een site wou maken voor zijn hobby (fotografie, meer bepaald urban exploring). Voor mij geen probleem, en samen met hem een ontwerp uitgewerkt. Tot hiertoe geen probleem
Voor zijn fotos te laten zien wou hij een bepaald script (opensource uiteraard) gebruiken dat, door middel van ajax, zijn fotos goed tot hun recht laat komen.
Echter vecht dit script serieus met mijn CSS.
Als je even kijkt naar http://kris.derocker.name/tony/index.htm en http://kris.derocker.name/tony/fotos.htm zie je duidelijk 2 verschillen :
- onderaan zie bij fotos.htm de balk weg die de groene lijn laat rondgaan
- bij fotos.htm komt de thumbnail tegen tegen de linkerrand ipv onder de >>> van >>> Fotos lichtplan Gent
Beide problemen ontstaan vermoedelijk door een fout in de CSS file. Echter zit ik er al uren naar te kijken, zonder iets te vinden.
Als er hier mensen zouden zijn die hier eens een blik op willen werken en hopelijk het antwoord vinden : ik ben jullie eeuwig dankbaar
Mijn CSS file : http://kris.derocker.name/tony/css.css
CSS file van Highslide : http://kris.derocker.name/tony/highslide/highslide.css
Broncode index.htm
Broncode fotos.htmCode:<html> <head> <title>???</title> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="bg"> <br><br><br> <div id="menu"> <div id="topMenu"> </div> <div id="bodMenu"> <p><a href="index.htm">Start</a></p> <p><a href="index.htm">Over mij</a></p> <p><a href="index.htm">Gastenboek</a></p> <p><a href="fotos.htm">Fotos</a></p> <p><a href="index.htm">Contacteer mij</a></p> </div> <div id="botMenu"> </div> </div> <div id="text"> <div id="topText"> </div> <div id="bodText"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique est ac elit. Vivamus mollis, tortor porttitor placerat pulvinar, ante justo blandit quam, ut scelerisque lectus risus ac lectus. Quisque convallis. Quisque tempor risus et sapien. Maecenas est neque, laoreet in, sodales et, semper eget, velit. Maecenas et tortor eu libero aliquam luctus. Etiam turpis metus, tincidunt et, tempor quis, cursus et, quam. Aenean ac est quis quam fermentum gravida. Quisque pellentesque neque sed tortor. Vivamus imperdiet erat vel diam. Morbi venenatis risus a sapien. Etiam dolor. Etiam quis enim. Integer eget quam at velit molestie sollicitudin. Etiam sit amet eros et nunc fermentum ultricies. Quisque accumsan nunc non dui. Etiam semper libero sed ligula. Suspendisse bibendum. Maecenas et tellus sed magna bibendum pharetra. Nulla est ligula, tempus ultrices, venenatis mattis, pharetra sed, lectus.<br><br> Aliquam et nibh. Pellentesque urna. Mauris at justo aliquam arcu commodo luctus. Nulla facilisi. Donec quis tellus a felis condimentum imperdiet. Suspendisse ut dolor. Nunc diam sapien, facilisis vel, elementum vestibulum, convallis a, ipsum. Quisque neque erat, porttitor in, bibendum a, rhoncus nec, libero. Duis pretium pretium felis. Nunc non velit. Morbi est. Proin elit dolor, venenatis eu, elementum id, sodales id, velit.<br><br> </p> </div> <div id="botText"> </div> </div> </div> </body> </html>
Code:<html> <head> <title>???</title> <link href="css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="./highslide/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="./highslide/highslide.css" /> <script type="text/javascript"> hs.graphicsDir = './highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white'; hs.fadeInOut = true; hs.numberPosition = 'caption'; hs.dimmingOpacity = 0.75; // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } }); </script> </head> <body> <div id="bg"> <br><br><br> <div id="menu"> <div id="topMenu"> </div> <div id="bodMenu"> <p><a href="index.htm">Start</a></p> <p><a href="index.htm">Over mij</a></p> <p><a href="index.htm">Gastenboek</a></p> <p><a href="fotos.htm">Fotos</a></p> <p><a href="index.htm">Contacteer mij</a></p> </div> <div id="botMenu"> </div> </div> <div id="text"> <div id="topText"> </div> <div id="bodText"> <p> >>> Fotos lichtplan Gent<br><br> <div class="highslide-gallery"> <a id="ghentbynight" href="./fotos/ghentbynight/01.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="./fotos/ghentbynight/thumb.jpg" /> </a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> <div class="hidden-container"> <a href="./fotos/ghentbynight/02.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> <a href="./fotos/ghentbynight/03.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> <a href="./fotos/ghentbynight/04.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> <a href="./fotos/ghentbynight/05.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> <a href="./fotos/ghentbynight/06.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) <a href="./fotos/ghentbynight/07.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) <a href="./fotos/ghentbynight/08.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) <a href="./fotos/ghentbynight/09.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) <a href="./fotos/ghentbynight/10.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) <a href="./fotos/ghentbynight/11.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'ghentbynight' })"></a> <div class="highslide-caption"> 11 Maart 2009 - Ghent by Night (cursus fotografie) </div> </div> </div> </p> </div> <div id="botText"> </div> </div> </div> </body> </html>
Quote
, echter merkte ik zojuist pas op dat het eerste plaatje nu geen tekst eronder heeft als je erop klikt.... Daar zit nu dus iets niet goed.
