5568 sujets

Sémantique web et HTML

(Résolu) Nivo Slider et déclaration doctype

Bonjour,



Dès que je déclare un doctype sur ma page html, j'ai un décalage sous mon slider équivalent à toutes mes images bout à bout...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      
        
        
        
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>sie</title>
        
        
        
        <link rel="stylesheet" type="text/css" media="all" href="CSS/960.css" />
        <link rel="stylesheet" type="text/css" media="all" href="CSS/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="CSS/style.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="CSS/nivo-slider.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/default/default.css"/>
        
        
        
        <link rel="stylesheet" type="text/css" media="screen" href="CSS/lightbox.css" />
            
      

        <script type="text/javascript" src="JS/prototype.js"></script>
        <script type="text/javascript" src="JS/scriptaculous.js?load=effects,builder"></script>
        <script type="text/javascript" src="JS/lightbox.js"></script>
        
        
        
                      
                 
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
        <script type="text/javascript"> 
            jQuery.noConflict()(document).ready(function(){

            jQuery.noConflict()("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

            jQuery.noConflict()("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		jQuery.noConflict()(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		jQuery.noConflict()(this).parent().hover(function() {
		}, function(){	
			jQuery.noConflict()(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			jQuery.noConflict()(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			jQuery.noConflict()(this).removeClass("subhover"); //On hover out, remove class "subhover"
                });

            });
        </script>
        
        
        
        <script type="text/javascript" src="JS/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
                jQuery.noConflict()(window).load(function() {
                   jQuery.noConflict()('#slider').nivoSlider({
                    effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
                    slices:15, // For slice animations
                    animSpeed:500, // Slide transition speed
                    pauseTime:3000, // How long each slide will show
                    directionNav:true, // Next and Prev navigation
                    directionNavHide:true, // Only show on hover
                    controlNav:true, // 1,2,3... navigation
                    keyboardNav:true, // Use left and right arrows
                    pauseOnHover:true, // Stop animation while hovering
                    manualAdvance:false, // Force manual transitions
                    captionOpacity:0.8, // Universal caption opacity
                    prevText: 'Prec', // Prev directionNav text
                    nextText: 'Suiv' // Next directionNav text
                    });
                });
        </script>
     

    </head>
    
    
    
    
    
    
    <body>
        <div class="container_16">
        
            <div id="trame-fond" class="grid_16">   
                
                
                
            
              <div id="header">
                  
               <div id="logo" class="grid_9">
                      <a href="/"><img src="images/logo-large.png" alt="Logo Team 4 Racing"  ></img></a>
                  </div>
                  
                  
                  <div id="fond-coordonnees" class="grid_4">

                    <div id="coordonnees">

                     </div>

                  </div>
                  	
            <!-- SLIDESHOW -->



            <div id="slideshow" class="grid_14 alpha">

                <div class="slider-wrapper theme-default">


                    <div id="slider" class="nivoslider">
                        <a href="#"><img src="images/slide/grand1.png" alt=""/></a>
                        <a href="#"><img src="images/slide/grand2.png" alt=""/></a>
                        <a href="#"><img src="images/slide/grand3.png" alt=""/></a>
                        <a href="#"><img src="images/slide/grand4.png" alt=""/></a>
                        <a href="#"><img src="images/slide/grand5.png" alt=""/></a>
                        
                       <!-- <a href="fabrication.html"><img src="images/slide/slide3.png" alt=""/></a>
                        <a href="even.html"><img src="images/slide/slide4.png" alt=""/></a>
                        <a href="#"><img src="images/slide/slide5.png" alt=""/></a>-->
                    </div>


                </div>
            </div>


Si je l'enlève, je n'ai plus le problème....
Modifié par dionaea (07 Sep 2011 - 01:43)
Résolu.

j'avais fait pas mal de modif et la class de mon slider était erronée....
nivoslider au lieu de nivoSlider....
Sujet clos
Aller à