web-dev-qa-db-fra.com

débordement: masqué ne fonctionne pas

Bonjour à tous, le débordement me cause des difficultés: caché. En gros, j'essaie de cacher le débordement d'une liste non ordonnée située dans un div. Je ne sais pas pourquoi cela ne fonctionne pas bien. Au lieu de le cacher, cela me permet de passer d'une disposition horizontale à une disposition verticale. La liste non ordonnée est carrousel et le conteneur est liste. Mon code est ci-dessous:

CSS:

div.body .container .images {
 background: url(/images/images-background.jpg);
 height: 62px;
 margin-bottom: 17px;
 width: 384px;
}
div.body .container .images #images-previous {
 cursor: pointer;
 float: left;
}
div.body .container .images #images-next {
 cursor: pointer;
 float: left;
}
div.body .container .images .list {
 float: left;
 overflow: hidden;
 vertical-align: top;
 width: 336px;
}
div.body .container .images .carousel {
 margin-bottom: 6px;
 margin-top: 8px;
 width: 336px;
}

Mon code:

<div class="images">
 <div id="images-previous"><img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" /></div>
 <div class="list">
  <ul class="carousel">
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li> 
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>    
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <!---
   <cfset i=1>
   <cfloop condition="i lte images.recordcount">
    <cfoutput><li><img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" /></li></cfoutput>
    <cfset i=i+1>
   </cfloop>
   --->
  </ul>
 </div>
 <div id="images-next"><img src="/images/images-next.jpg" width="24" height="62" alt="Next" /></div>
 <div class="clear"></div>

Merci pour l'aide.

cssoverflowhtml
101
Darren

Ok si quelqu'un d'autre a ce problème, cela peut être votre réponse:

Si vous essayez de masquer des éléments positionnés en absolu, assurez-vous que le conteneur de ces éléments positionnés en absolu est relativement positionné.

353
Darren

Réellement...

Pour masquer un élément absolu positionné, le conteneur position doit être n'importe quoi sauf static. Cela peut être relative ou fixed en plus de absolute.

71
rw-nandemo

En plus des réponses fournies:

cela ressemble à un élément parent (celui avec overflow:hidden) ne doit pas être display:inline. Passage à display:inline-block a travaillé pour moi.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
5
Miloš Đakonović