"Forçar" apenas scroll left

[lucaswxp 22]

Eae galera o/

Estou com uma dúvida muito noob aqui.

Quero fazer isso:

Quando o conteudo chega no limite da div, ela quebra a linha, mas eu quero que continue, para usar o scroll.

HTML:

<div id="mygallery" class="stepcarousel">
<div class="belt" style="width:500px">

<div class="panel">
<a href="#">1</a>
</div>

<div class="panel">
<a href="#">3</a>
</div>

<div class="panel">
<a href="#">4</a>

</div>

<div class="panel">
<a href="#">5</a>
</div>

<div class="panel">
<a href="#">6</a>
</div>
</div>
</div>

CSS:

div#mygallery{
  float: left;
}


.stepcarousel{
border: 5px solid transparent;
overflow: scroll; /*leave this value alone*/
width: 205px;
height: 50px; /*Height should enough to fit largest content's height*/
}


.stepcarousel .panel{
float: left;
margin:0 5px; 
min-width: 15px;
height: 16px;
background-color: #ffcc00;
text-align: center;
padding: 0 0px 1px 0px;
margin-top:1px;
vertical-align: middle;
}

Eu só consegiu colocando um width fixo para ".belt", mas eu quero que isso seja automatico... Alguém tem uma idéia?

[João Prado 64]

Não entendi muito bem sua dúvida

 

Tire o width da class .belt e ao invés de overflow:scroll na class .stepcarousel coloque overflow:auto

 

estranho o erro pois já era pra estar funcionando

[Cesão 1]

lucaswxp, faça o seguinte. Deixe sua div com width:auto e crie um overflow-x:auto; overflow-y:hidden;

[lucaswxp 22]

@Mooio

Não entendi muito bem sua dúvida

Eu quero que os links da paginação continuem "indo" e criem o scroll.

A situação aqui não está assim: Quando os links da paginação (1,2,3,4,5,...) chegam no limite da div stepcarousel - que tem 205px - eles "descem", vão pra linha de baixo. Mas oque eu quero, é que eles continuam na horizontal (sem quebrar a linha) e com scroll (para poder ver o restante).

 

Tire o width da class .belt e ao invés de overflow:scroll na class .stepcarousel coloque overflow:auto

O width era so pra conseguir o efeito deseja (com o width da certo no belt, mas teria que ser "dinamico"). Tentei e nada =/

 

 

@Cesão:

Nada =/

[Evandro Oliveira 331]

.stepcarousel .panel { white-space: nowrap; }

[lucaswxp 22]

@Evandro

É exatamente o efeito desta propriedade que eu preciso. Mas não deu certo usando ele aqui @.@ Coloquei no panel e nada (também tentei em outros elementos)

[lucaswxp 22]

Ae pessoal, consegui fazer.

Foi com JS/jQuery (queria que fosse com CSS =/):

<script type="text/javascript">
        $(document).ready(function(){
            var width=0;

            $('.panel').each(function(index, panel){
                width += $(panel).outerWidth(true)
            })
            
            $('.belt').css('width', width);
        })
</script>

Eu peguei o width de todos os panels, somei, e setei este valor para o belt.

Bom, se alguém aí souber como faço sem tocar em JS, a dúvida ainda é válida =)

[Evandro Oliveira 331]

aplique o white-space na .belt

 

Se não der certo, tente converter para listas

 

<div id="mygallery" class="stepcarousel">
   <ul class="belt">
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
       <li><a href="#">6</a></li>
   </ul>
</div>

 

Nas configurações do carousel, troque 'panel' por 'belt li' e por fim, aplique as regras:

 

.belt {
    white-space: nowrap;
    width: 500px;
}

.belt li {
    float: left;
    margin-left: 15px;
}

[João Prado 64]

Entendi agora, o correto é colocar mesmo o width fixo para belt pois se não tiver um width ou ele aumenta acompanhando ou ele quebra a linha.

 

Sugiro que aplique as dicas do Evandro quanto a utilização de listas ;)

[lucaswxp 22]

Colocando o width da certo, mas o problema é que o numero de "li" e variavel (por isso utilizei o JS, pra pegar o width de cada um).

Sendo variavel, nao tem como eu setar um width... =/

Então nao tem jeito sem definir o width?

[João Prado 64]

Mas definir o width não muda em nada

 

por exemplo, se você definiu um width fixo caso o conteúdo passe este tamanho ai ele cria a barra de rolagem entendeu?

 

coloque o width igual da div pai que seria a stepcarousel http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[lucaswxp 22]

Mas definir o width não muda em nada

se você definiu um width fixo caso o conteúdo passe este tamanho ai ele cria a barra de rolagem entendeu?

Sim sim, entendi. Mas é pra isso que usei o JS, para o width ir alterando-se de acordo com filhos (li) de .belt

 

coloque o width igual da div pai que seria a stepcarousel

Eu não posso fazer isso, porque stepcarousel é um scroll (overflow:scroll), entao o tamanho e determinado pela barrade rolagem, por assim dizendo... =/

[João Prado 64]

cara, sinceramente eu não sei

 

fiz vários testes aqui e nenhum funcionou, todos com o mesmo resultado, quebra de linha e sem barra de rolagem

 

vamos esperar para ver se alguém tem a solução

[Evandro Oliveira 331]

Colocando o width da certo, mas o problema é que o numero de "li" e variavel (por isso utilizei o JS, pra pegar o width de cada um).

Sendo variavel, nao tem como eu setar um width... =/

Então nao tem jeito sem definir o width?

 

suba a regra um nível:

#mygallery { width: 500px; }

.belt { white-space: nowrap; width: 100%; }