anoniem Geplaatst: 13 december 2010 Delen Geplaatst: 13 december 2010 Hallo, iedereen, ik heb een probleem met mijn website. [code:1:af092568ae] <html> <head> <title>image gallery</title> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(function() { $("img").bind("contextmenu", function(e) { e.preventDefault(); }); }); $("img").click(function() { return false; }); </script> <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { $('#gallery a').css({opacity: 0.0}); $('#gallery a:first').css({opacity: 1.0}); $('#gallery .caption').css({opacity: 0.7}); $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); setInterval('gallery()',6000); } function gallery() { var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); var caption = next.find('img').attr('rel'); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); $('#gallery .content').html(caption); } </script> <style type="text/css"> /* General styling */ *{margin:0;} body{background:url('background.png') repeat-x #808080;text-align:center; } #wrapper{width:100%;margin:0 auto;} /*header styling*/ #header{height:400px;margin:0 auto} #header img{margin-top:70px;} /*menu styling*/ #menu{margin:0 auto;margin-top:50px;width:1058px;height:70px} #menu table{width:450px;margin:0 auto;} #menu tr{width:500px;margin:0 auto;} #menu td{width:150px;margin:0 auto;height:40px;} td#big{width:200px;} #menu a{width:150px;margin:0 auto;text-decoration:none;color:#e2e2e2;font-size:25px;font-family:"Coolsville";font-weight:bolder;testletter-spacing:1;} #menu a:hover,#menu a:active{color:#202020;} /* content styling */ #content{margin:0 auto;margin-bottom:25px;padding:50px 0px;height:600px;width:1058px;} #photosinspotlight{border: 1px solid #d5d5d5;background:#f4f4f4;width:250px;height:600px;float:left;} #page{float:left;margin-left:50px;width:740px;border: 1px solid #d5d5d5;background:#f4f4f4;padding:5px;padding-bottom:25px;} .article{border-bottom:1px solid #d5d5d5;padding-bottom:10px;} .articleinner{} .title{font-size:xx-large;font-family:Helvetica;font-weight: bold;text-shadow: 0 1px 0 #fff;line-height: 1.1em;} .titlemargin{height:10px;width:100%;} /* slideshow styling */ .clear { clear:both } #gallery { position:relative; height:360px } #gallery a { float:left; position:absolute; } #gallery a img { border:none; } #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute; bottom:0; } #gallery .caption .content { margin:5px } #gallery .caption .content h3 { margin:0; padding:0; color:#1DCCEF; } copyright{margin:50px;font-size:small;font-weight:lighter;} </style> </head> <body> <div id="wrapper"> <div id="header"> <img src="banner.jpg" /> </div> <div id="menu"> <table> <tr> <td><a href="x.html">Home</a></td> <td><a href="photos.html">Photos</a></td> <td id="big"><a href="#">About me</a></td> </tr> </table> </div> <div id="content"> <div id="photosinspotlight"> </div> <div id="page"> <div class="article"> <span class="title">Example</span> <div class="titlemargin"></div> <div class="articleinner"> <div id="gallery"> <a href="#" class="show"> <img src="http://mikesmikkel.webuda.com/media/IMG_1257.JPG" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<a href='#'>Flowing Rock</a>"/></a> </a> <a href="#"> <img src="http://mikesmikkel.webuda.com/media/IMG_1257.JPG" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>"/> </a> <div class="caption"><div class="content"></div></div> </div> <div class="clear"></div> </div> </div> <div class="article"> <span class="title">Example</span> <div class="titlemargin"></div> <div class="articleinner"> <img style="width:512px; height:384px;" onclick="nocopy();" src="http://mikesmikkel.webuda.com/media/IMG_1257.JPG" alt="test" class="active" /> </div> </div> </div> <div id="copyright">copyright mikesmikkel productions© 2010</div> </div> </body> [/code:1:af092568ae] En [url=http://mikesmikkel.webuda.com/newstyle.html]hier[/url] is een werkend voorbeeld. Nu mijn foto's komen niet op de juiste plaats en mijn copyright ook niet. De foto moet bij de caption staan en de copyright moet 50px van de pagina afstaan. Iemand een oplossing? Alvast bedankt, Mike Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 Je mist een hekje voor copyright. [code:1:11b8673a11]copyright{margin:50px;font-size:small;font-weight:lighter;}[/code:1:11b8673a11] Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 En de doctype ontbreekt. Verder adviseer ik om je opmaak, structuur en scripts van elkaar te scheiden. Je hebt nu alles (PHP, HTML, CSS en JS) in één bestand door elkaar staan, en dat maakt het erg onoverzichtelijk. Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 nu werkt het nog niet Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 [code:1:908d5872af]#copyright{margin:50px 0 0 0;font-size:small;font-weight:lighter;}[/code:1:908d5872af] en als dat niet werkt probeer je gewoon; [code:1:908d5872af]#copyright{padding:50px 0 0 0;font-size:small;font-weight:lighter;}[/code:1:908d5872af] en als dat niet werkt eerst een doctype erboven. Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 Hebben jullie soms ook een oplossing voor het probleem met de slideshow? Quote Link naar reactie
anoniem Geplaatst: 13 december 2010 Auteur Delen Geplaatst: 13 december 2010 Ik heb geen idee. Maar dit kan volgens mij al niet: Probeer het eens zonder die position:absolute; zou ik zeggen. #gallery a { float:left; position:absolute; } Quote Link naar reactie
anoniem Geplaatst: 16 december 2010 Auteur Delen Geplaatst: 16 december 2010 Ik voel me vereerd dat je mij via een pb om hulp vraagt, dus zal ik proberen een steentje bij te dragen. ik zie nu pas dat je een pb gestuurd hebt, terwijl die maandag al was verstuurd. om te beginnen zijn de div-jes niet goed afgesloten: [code:1:2578a20f87] <body> <div id="wrapper"> <div id="header"> <img src="banner.jpg" /> </div> <div id="menu"> <table> <tr> <td><a href="newstyle.html">Home</a></td> <td><a href="#">Photos</a></td> <td id="big"><a href="#">About me</a></td> </tr> </table> </div> <div id="content"> <div id="photosinspotlight"> </div>[/code:1:2578a20f87] de div-jes met id="wrapper" en id="content" hebben geen </div> waar die twee </div> tags moeten komen weet ik niet precies, want het is nogal onoverzichtelijk met al die verschillende divs in elkaar genesteld. Het zou mij dan ook niet verbazen als je de helft weg zou kunnen laten. Je zou eens kunnen proberen zo min mogelijk div-jes te gebruiken en die via position: absolute op hun plaats te zetten. verder is je logo belachelijk groot. ik heb een scherm met 1680x1050 en het neemt de helft van het beeld in beslag, dan blijft er erg weinig ruimte over voor het belangrijkste van de site: namelijk de foto's. nu moet ik eerst scrollen voordat ik de kleine foto helemaal kan zien. over je slidehow: dit lijkt mij niet handig, je maakt een array met twee keer dezelfde afbeelding:[code:1:2578a20f87] var path = new Array(); // LIST OF SLIDES path[0] = "http://mikesmikkel.webuda.com/media/IMG_1257.JPG"; path[1] = "http://mikesmikkel.webuda.com/media/IMG_1257.JPG"; [/code:1:2578a20f87] zo kun je natuurlijk nooit testen of het script werkt. volgens mij wordt het script nu helemaal nooit gebruikt in de pagina. voor zover ik kan zien wordt de functie swapImage() helemaal nergens aangeroepen. en als je maar één caption gebruikt, moet die ook niet in een Array. nu wisselt de tekst "The Time Through Ages." af met undefined omdat een array minimaal twee items moet hebben: [code:1:2578a20f87] var caption = new Array(); // LIST OF CAPTİONS caption[0] = "The Time Through Ages."; [/code:1:2578a20f87] als laatste vindt ik het onzin om rechts klikken op een afbeelding uit te schakelen, want er zijn ook andere manieren om de afbeeldingen te downloaden. ik heb bijvoorbeeld zonder problemen je logo en IMG_1257.JPG kunnen downloaden. (uiteraard alleen om de pagina in dreamweaver te kunnen bekijken). Quote Link naar reactie
anoniem Geplaatst: 24 december 2010 Auteur Delen Geplaatst: 24 december 2010 Hoe zou je dit dan doen met position: absolute? Quote Link naar reactie
anoniem Geplaatst: 24 december 2010 Auteur Delen Geplaatst: 24 december 2010 [quote:245f6fd5b6="PepijnG"]Ik voel me vereerd dat je mij via een pb om hulp vraagt, [/quote:245f6fd5b6] Jou ook al? :-) Quote Link naar reactie
anoniem Geplaatst: 24 december 2010 Auteur Delen Geplaatst: 24 december 2010 Ja mij ook al :P divjes positioneren met position:absolute kan bv op deze manier. [code:1:23e6220ed3] div { border: 0px solid #000000; position: absolute;} div#Top { top: 20px; left: 20px; height: 50px; width: 800px;} div#Content { top: 80px; left: 20px; height: 900px; width: 800px; overflow: auto;}[/code:1:23e6220ed3] Het eerste stukje is voor alle divjes. in dit voorbeeld zijn er dus 2 divjes, 1 met id="Top" en 1 met id="Content" Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen