comportement de positionnement étrange lors de l'utilisation des images et du texte

Question

jsFiddle

Je suis en train d'images de sortie et le texte horizontalement. Les éléments de texte utilisent le jQuery Cycle Lite Plugin pour parcourir une liste de mots. Comme vous pouvez le voir dans le jsFiddle ci-dessus, les éléments de texte de cyclisme sont sur la page, mais pour une raison quelconque, le positionnement des éléments est foiré. Certains éléments du texte apparaissent dans/sur les images, puis il y a un tas empilé les uns sur les autres à la fin. Qu'est-ce qui cause ça?

Je sais qu'il y a des plugins, comme jQuery Masonry, qui peuvent être en mesure de positionner automatiquement les éléments, mais je dois maintenir l'ordre que le HTML les affiche tous. Tout ce dont j'ai vraiment besoin, c'est d'avoir les éléments de texte entrecoupés de photos afin qu'ils soient tous visibles, et qu'ils ne se mélangent pas et ne s'affichent pas les uns sur les autres.

Merci d'avoir lu.

EDIT:

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script> 

      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="a"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="b"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="c"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="d"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="e"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="f"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="g"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="h"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="i"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="j"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 

Javascript:

$(document).ready(function() { 
    $('#a').cycle(); 
    $('#b').cycle(); 
    $('#c').cycle(); 
    $('#d').cycle(); 
    $('#e').cycle(); 
    $('#f').cycle(); 
    $('#g').cycle(); 
    $('#h').cycle(); 
    $('#i').cycle(); 
    $('#j').cycle(); 
}); 

EDIT 2:

Voici une image représentant ce que je suis en train de faire. Les zones bleues sont les images et les zones rouges représentent la zone dans laquelle je veux que le texte apparaisse.

Answer 1

Ok, après votre édition, voici une version qui fait exacte ment ce que vous voulez: jsfiddle.net/PcD8njsfiddle.net/AcPxx

Je pris la liberté de TinyURL-ification vos images, comme ils ont fait le code difficile à manier. Aussi, pour la concision, j'ai enlevé le wrapper <a> tags. Vous pouvez les rajouter si vous le souhaitez.

Enfin, j'ai retiré les id s des cycleurs, car ils n'étaient pas nécessaires dans le contexte du code que vous nous avez fourni.

Answer 2

Je soupçonne que l'utilisation d'un <span>, un élément en ligne, fait partie de la question de la mise en page, comme la démo utilise un <div>, qui est un élément de niveau bloc. Une recherche plus poussée montre que vos éléments span[id] n'ont pas de hauteur spécifiée (comme ils sont en ligne), donc obtiennent une hauteur implicite de 0px. D'où l'étrange empilement.

Answer 3

Est-ce que pas tout à fait comprendre ce que vous essayez de faire
+ votre exemple sur jsFiddle est un peu cassé est ici une plus simplifiée (je l'espère) la version de votre balisage http://jsfiddle.net/avipinto/F95x3/2/
je mets les travées entre les images pour montrer la transition entre les images que vous avez fourni la même image à tous.

Si tout votre problème est le positionnement du texte ci-dessous le diaporama puis donnez le conteneur de la hauteur des images.
si vous voulez titre différent à chaque image - regardez la source de la page du plugin - il utilise le code suivant:

$('#slideshow3').cycle({ 
     delay: 2000, 
     speed: 500, 
     before: onBefore 
    }); 

    function onBefore() { 
     $('#title').html(this.alt); 
    } 

et html:

<div id="slideshow3" class="pics"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Panama City" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Heading to the water" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Danny" /> 
</div> 

beaucoup plus élégante et accessible que crachant portées partout

Hope this helps