"Forçar" apenas scroll left

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

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

@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 =/

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

@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)

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 =)

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;
}

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 ;)

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?

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

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... =/

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

>
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%; }