[Resolvido] Problema com rolagem horizontal

[Denis Lins 0]

Olá galera do iMasters.

 

Aqui estou eu, deee novo, com problemas com CSS...

 

O problema agora é o seguinte:

 

Eu tenho uma div pai, com 900px de largura, e com overflow-x: scroll.

 

Dentro dela, tenho um ul sem largura (width: auto).

 

O problema, é que os elementos li nao ficam na mesma linha, eles quebram para baixo, nao ficam na area da barra de rolagem :S

 

Acredito que seja por causa da largura de 900px da div pai. Mas se eu colocar maior, alem de f**** com o layout do site, ainda nao apresenta a barra de rolagem.

 

Alguém sabe como resolver isso?

[Paulo de Tarso F. M. 24]

Nos mostre como está fazendo, poste um link para sua página preferencialmente...

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[William Bruno 1501]

<li> é um elemento nivel de bloco por default, por isso, ficarão um embaixo do outro, a menos que você peça para ficar lado a lado.

 

você deu float neles ? definiu uma largura para cada um ?

[Evandro Oliveira 331]

Primeiro, fuja de overflow-x. Não é xBrowser.

 

Segundo, por padrão, qualquer tipo de apresentação textual digital segue uma quebra de linha após elementos de espaçamento, desde que a quebra automática esteja habilitada.

 

Para desabilitar a quebra, definimos a regra

 

elemento { white-space: nowrap }

todo o conteúdo de elemento terá a formatação de quebra por espaçamentos removida - desde que, segundo a dica do William, sejam elementos inline - dando o efeito de horizontal overflow

 

na prática:

 

<div id="qualquer_coisa">
   <ul>
       <li>Termo 1</li>
       <li>Termo 2</li>
       <li>Termo 3</li>
       <li>Termo 4</li>
       <li>Termo 5</li>
       <li>Termo 6</li>
       <li>Termo 7</li>
       <li>Termo 8</li>
   </ul>
</div>

 

#qualquer_coisa { overflow: auto; white-space: nowrap; width: 150px; }
ul li { float: left }

[Denis Lins 0]

você deu float neles ? definiu uma largura para cada um ?

Sim sim, tudo sim.

 

O que está acontecendo, é que eles estão respeitando a largura da div pai (900px) e nao do ul (auto).

 

Eles quebram de 3 em 3 :S

 

EDIT: nao tinha visto o post de cima, vou testar agora.

 

Não deu certo :S

 

Deem uma olhada pra ver se estou fazendo certo:

 

<div style="overflow: auto; white-space: nowrap; width: 900px; height: 250px;">
<ul class="desc" id="cases" style="white-space: normal;">
    <li style="background: url(<?php echo PATH; ?>/images/desc_empty.gif) no-repeat left bottom;"><p class="emptyDesc">Cases &<br />Clientes</p></li>
    <?php echo $cases; //php que insere as linhas ?>
</ul>
</div>

Aqui está o link, para que voces entendam o que estou querendo dizer:

 

http://treeti.com.br/tree/cases/

[William Bruno 1501]

a largura do UL é igual a largura do pai dele, portanto 900px de width no UL, esse é o 'auto' dele, 100% do elemento pai.

 

Se só cabe 3 LI em 900px, então acontece a quebra.

Oque você queria fazer ?

[Evandro Oliveira 331]

style="white-space: normal;"

 

você fez no pai, e desfez no filho.

[Denis Lins 0]

Oque você queria fazer ?

Eu quero que os li's fiquem um do lado do outro, e que tenha a barra de rolagem horizontal para a navegação.

 

você fez no pai, e desfez no filho.

é porque se eu nao colocar isso, o texto fica sem quebra de linha.

 

Ja tirei pra testar, mas tambem nao funcionou, continua quebrando os li's.

[William Bruno 1501]

Eu quero que os li's fiquem um do lado do outro, e que tenha a barra de rolagem horizontal para a navegação.

 

Então dá uma largura pro UL suficiente para caber os LIs lado a lado:

<ul class="desc" id="cases" style="width: 4000px;">

como pelo visto é 'dinâmico', pode deixar esse cálculo a cargo do php:

 

Largura_UL = Quantidade_de_Itens * Largura_de_cada_item + 'px';

[Evandro Oliveira 331]

Não precisa, William, ele pode definir a overflow como visible e obrigar a UL a expandir

 

#qualquer_coisa { width: 200px; overflow: auto; }
	ul { white-space: nowrap; overflow: visible; }
	ul li { display: inline; list-style: none; white-space: normal }

Falha minha, confundi o comportamento do float com o inline

 

E como eu já expliquei, o white-space deve ser colocado no Elemento que recebe ou não a quebra.

Se você colocar no UL, descamba tudo =S

[Denis Lins 0]

e o tópico ta bombando! kk

 

Cara, ta acontecendo uma coisa muito estranha.

 

Fiz a gambiarra que o willian sugeriu, e funciona.

 

Mas no internet explorer 7 nao! :s

 

Vizualizem no ie7 para voces verem: http://treeti.com.br/tree/cases/

 

A barra fica lá, mas voce mexe ela, e o conteudo nao mexe T_T

 

A sugestão do evandro tambem nao resolveu. Copiei e colei o que voce escreveu, mas nao deu.

 

Tenso isso!

[William Bruno 1501]

Ai 'até funciona' @Evandro (desculpa pelo d no outro topico),

mas como ele precisa manipular o boxmodel, melhor ele declarar:

 

display: inline-block;

doque apenas inline

[Denis Lins 0]

Nao deu certo isso nao .. Estou fazendo certo?

 

// ul
<ul class="desc" id="cases" style="white-space: nowrap; overflow: visible;">

// li
<li style="margin: 0 31px 0 0; display: inline-block; list-style: none; white-space: normal">

[Evandro Oliveira 331]

Denis, fala pra mim que essa div não tá aí só pra fazer a rolagem, né????

 

ul { white-space: nowrap; width: 200px; overflow: scroll }
ul li { white-space: normal; display: inline }

 

Bruno para dar suporte ao câncer, não dá pra usar inline-block <_<

 

solução:

 

<li><div>conteúdo de bloco</div></li>

[William Bruno 1501]

Bruno para dar suporte ao câncer, não dá pra usar inline-block <_<

 

Cara, não conheço nenhum bug do IE6 com inline-block..

[Evandro Oliveira 331]

Cara, não conheço nenhum bug do IE6 com inline-block..

 

 

IE 6/7 accepts the value only on elements with a natural display: inline.

http://www.quirksmode.org/css/display.html

 

LI => elemento de bloco => problemas

[Denis Lins 0]

Era sim evandro! ahsuahsuahsuhas

 

Não da esparro pow! kkk

 

Tenha calma, tem duas semanas que estou mexendo com CSS apenas :P

 

Mas galera, me ajudem então a resolver o problema da barra de rolagem que não se movimenta, talvez assim seja mais fácil!

 

Eu consegui definir a largura, tudo tranquilo. No firefox funciona certinho. No chrome também. No IE8, tambem!

 

Mas nos nossos amigos IE6 e IE7 nao :S

 

Alguem sabe como resolver?

[Evandro Oliveira 331]

aplicou a última revisão do CSS que te passei??

 

 

some com a DIV daí, define a largura direto no UL, overflow: auto, white-space: nowrap

 

define as LI como inline (SÓ ISSO, PELO AMOR) e qualquer alteração de bloco que precisar ser feita, necessitará das duas uma: ou você envolve o conteúdo da li numa div, ou define o display do conteúdo como bloco

 

[realtime Edit]: Notei que você usa <li><p class="case"></p></li>. Perfeito! aplique todas as border, margin e padding na classe .case

[Denis Lins 0]

Evandro, consegui aqui.

 

Realmente funciona tranquilo.

 

Mas...

 

Só funciona sem elementos de bloco dentro do li.

 

Se eu colocar uma div, ele quebra de uma em uma. Eu dou um float: left nas divs e...?

 

Volta o mesmo problema.

 

Sugestões? :s

[Evandro Oliveira 331]

A marcação abaixo deve solucionar o seu problema

 

 

<ul>
			<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut molestie lorem. Praesent mauris arcu, vestibulum ac aliquet eu, ultrices non eros. Etiam ullamcorper mi id lectus consectetur ultrices.</span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
		</ul>

 

 

 

ul {
				height: 130px;
				overflow: auto;
				width: 600px;
				white-space: nowrap;
			}
			
			ul li {
				display: inline;
			}
			
			ul li span {
				border: 1px solid #000;
				display: inline-block;
				height: 100px;
				overflow: hidden;
				white-space: normal;
				width: 150px;
			}