Ga naar inhoud

css probleem


anoniem

Aanbevolen berichten

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&copy; 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
Link naar reactie
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).
Link naar reactie
  • 2 weken later...
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"
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...