Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

css probleem

Anoniem
PepijnG
10 antwoorden
  • 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 hier 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
  • Je mist een hekje voor copyright.
    [code:1:11b8673a11]copyright{margin:50px;font-size:small;font-weight:lighter;}[/code:1:11b8673a11]
  • 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.
  • nu werkt het nog niet
  • [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.
  • Hebben jullie soms ook een oplossing voor het probleem met de slideshow?
  • 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;
    }
  • 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).
  • Hoe zou je dit dan doen met position: absolute?
  • [quote:245f6fd5b6="PepijnG"]Ik voel me vereerd dat je mij via een pb om hulp vraagt, [/quote:245f6fd5b6]
    Jou ook al? :-)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.