5545 sujets

Sémantique web et HTML

rebonjour, alors voilà le souci, j'ai un carousel qui affiche des images qui n'ont pas toute les mêmes dimensions, de ce fait, j'ai mes boutons de navigation (flèche droite et gauche) qui change de place à chaque changement d'image et j'aurai voulu savoir si il était possible de les fixer afin d'avoir un affichage plus homogène et éviter la sensation de saut d'image à chaque changement.

Voici le code

<div class="row">
    <div id="my_carousel" class="carousel slide col-md-offset-1 col-md-10" data-ride="carousel" >
        <!-- Bulles -->
        <ol class="carousel-indicators">
         
<?php
$donnees=mysql::query('SELECT * FROM accueil');
 while ($donne = $donnees->fetch())
        {
            if($e==0)
            {
                ?>
                    <li data-target="#my_carousel" data-slide-to="<?=$e; ?>" class="active"></li>
                <?php   
                $e++;
            }
            else
            {          
                 
                ?>
                <li data-target="#my_carousel" data-slide-to="<?=$e; ?>"></li>
                <?php   
                $e++;
            }  
         
        }
        ?>
        <!-- Slides -->
        </ol>
        <div class="carousel-inner">
        <?php
        $t=0;
        $img=mysql::query('SELECT * FROM accueil');
while ($donnes = $img->fetch())
        {
             
             
            if ($t==0)
            {
                 
                ?>
                <div class="item active"> 
                <div class="carousel-page col-md-offset-3">
                <img src="images/accueil/<?=$donnes['image']; ?>" class="img-responsive" style="margin:0px auto;" />
                </div>
                <div class="carousel-caption"></div>
                </div>  
             
                <?php
                $t++;
            }
            else
            {
                 
                ?>
                <div class="item">
                <div class="carousel-page col-md-offset-3">
                <img src="images/accueil/<?=$donnes['image']; ?>" class="img-responsive" style="margin:0px auto;" />
                </div>
                <div class="carousel-caption"></div>
                </div>           
                <?php
            }
        }
?>
</div>
<!-- Contrôles -->
        <div>
            <a class="left carousel-control" href="#my_carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#my_carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        </div>
</div>


j'ai bien pensé à mettre une image de fond transparente au format max mais j'aime pas cette solution et mettre toute les images à la même taille n'est pas envisageable (déformation, pixellisation ect...)

Merci d'avance pour vos réponses.

PS : Merci de pas prendre compte de l'optimisation du code, je m'y attellerai quand celui-ci fonctionnera parfaitement.