célula com scroll

pessoluc · Dezembro 24, 2006

Salve!

Estou com uma dúvida sobre como aplicar uma solução que vi no maujor.com em

http://www.maujor.com/dicas/tdscroll.php

sobre criar scroll numa célula, no dreamweaver.

Ele fala sobre usar uma DIV.

Consigo criar estilos CSS e aplicar a elementos, mas como se cria e aplica uma DIV ?

obrigado, um abraço

Luciano

Beraldo · Dezembro 24, 2006

css

#div1{
  width: 300px;
  height: 128px;
  overflow: auto;
}

html

<div id="div1">
Conteúdo da div 1
</div>

O que vem após o sustenido no CSS é o id de uma div; o que vem após um ponto (.) é o nome de uma classe (class), que pode ser atribuída a vários elementos simultanemente.

[]'s

pessoluc · Dezembro 24, 2006

Olá Roberto!obrigado pela resposta!Não entendo a 'diferença' entre CODE e HTML, isto é,uma coisa é você criar um estilo DENTRO DA PAGINA DE ESTILOS CSS... que fica disponível para você aplicar a outros elementos.Outra coisa seria posicionar esse pequeno código DIV direto no código da célula... e isso não sei como fazer.Por exemplo, eu crio a célula onde vou jogar um texto. E quero que a célula tenha scroll.Daí coloco essas especificações 'ao lado' de onde a célula aparece, no código geral......?Como exatamente posicionar o código da DIV no código da célula?Muito obrigado!! :)abraço!Luciano

css
#div1{  width: 300px;  height: 128px;  overflow: auto;}
html
<div id="div1">Conteúdo da div 1</div>
O que vem após o sustenido no CSS é o id de uma div; o que vem após um ponto (.) é o nome de uma classe (class), que pode ser atribuída a vários elementos simultanemente.[]'s

Beraldo · Dezembro 24, 2006

Não entendo a 'diferença' entre CODE e HTML, isto é,

uma coisa é você criar um estilo DENTRO DA PAGINA DE ESTILOS CSS... que fica disponível para você aplicar a outros elementos.

Ãhn? :blink: Apenas coloquei CODE pois o fórum não possui uma tag para CSS, assim como há para HTML.

Não estou entendendo qual é a sua dúvida. Você tentou fazer da forma como está no site do Maujor?

O que você não conseguiu entender?

pessoluc · Dezembro 24, 2006

Salve Roberto!

ah! ok, confundi com o sinal 'code' da sua resposta... :)

Mas vamos lá:

minha dúvida está em:

1- como criar a DIV.

Escrevo esse codezinho na página de estilos?

Em qualquer altura da página de estilos?

Ou deve estar de algum modo associado ao estilo de texto usado na célula?

2- como aplicar a DIV à célula em questão.

Tentei, observando o modelo do Maujor.

Criei uma

div1 {

width: 500px;

height: 300px;

overflow: auto;

}

e coloquei, na página de estilos CSS, logo abaixo de um dos estilos usados na célula.

Então, no código geral, coloquei assim <td> <div1> conteúdo da célula </div1> </td>....

... mas ainda não está funcionando...

abraço, obrigado pela resposta!

Luciano

Não estou entendendo qual é a sua dúvida. Você tentou fazer da forma como está no site do Maujor?

O que você não conseguiu entender?

Beraldo · Dezembro 24, 2006

1- como criar a DIV.

Escrevo esse codezinho na página de estilos?

Em qualquer altura da página de estilos?

Ou deve estar de algum modo associado ao estilo de texto usado na célula?

Você pode colocar esse código CSS num arquivo somente com os estilos (estlos.css, por exemplo) ou na própria página, dentro da tag <style>. Não há lugar específico para inseri-lo, mas note uma coisa:

Este exemplo aplica o estilo a todas as div's

div{
  /*  estilos */
}

Este aplicará somente a div's dentro das tags <td>, as quais, obrigatoriamente, devem estar dentro de tabelas. Note que todas as div's inseridas em <td>'s ficarão com este estilo:

table td div{
  /*  estilos */
}

Para aplicar um estilo somente a determinadas div's, você pode criar uma classe:

<style type="text/css">
.classeComRolagem{
  overflow: auto;
}
</style>
</head>
<body>
<div class="classeComRolagem">
</div>
</body>
</html>

O que vai no atributo class é o nome da classe sem o ponto (.) inicial.

2- como aplicar a DIV à célula em questão.

Tentei, observando o modelo do Maujor.

Você quer saber como colocar a div dentro da tabela? Se for:

<table width="400" border="0">
<tr>
<td>
<div>Conteúdo da div</div>
</td>
</tr>
</table>

Se ainda não tiver entendido, não hesite e pergunte novamente! :)

[]'s

pessoluc · Dezembro 24, 2006

Beraldo!

cara, muito grato pela ajuda!

mandei, numa mensagem para você, o endereço pra você visualizar o que estou tentando fazer....

agradeço mesmo a sua força.

Retomo aqui possivelmente amanhã.

FELIZ NATAL!! :)

abraço.

LP

pessoluc · Dezembro 25, 2006

Salve Beraldo!agora acho que consegui.... usando a tal <div id="div1"> que falaste. Creio que ela é que funcionou de fato, talvez nem importe mesmo o estilo CSS que eu tinha criado antes para o texto da célula... ainda vou fazer uns testes, apenas o padding top = "0" ainda não está totalmente ok.... apareceu uma folguinha ali, mas já resolveu 99%! - Valeu!abraçoLuciano

pessoluc · Dezembro 27, 2006

Olá Beraldo!

voltando ao tópico....

consegui um resultado bem interessante, a princípio, trabalhando com a DIV, que até então não sabia como usar...

criei uma "div1" na página de estilos como se fosse um estilo novo, porém sem o ponto inicial, mas com # (sustenido), conforme você me disse.

#div1 {

width: 398px;

height: 240px;

border: 1px dotted #000000;

padding-top: 10px;

padding-left: 10px;

padding-right: 90px;

overflow: auto;

}

depois acrescentei os comandos em linha no código:

<div id="div1"> antes do conteúdo da célula

e

</div> depois do conteúdo da célula

o resultado ficou como mostra a figura, visto pelo FIREFOX - e assim deve ficar!

Imagem Postada

Entretanto, visto pelo Internet Explorer de Mac, versão 5, aparece como abaixo:

Imagem Postada

Pergunto-me se seria possivel uniformizar a visualização tambem para o Explorer.....

abraços

LP

Salve Beraldo!

agora acho que consegui.... usando a tal <div id="div1"> que falaste.......

pessoluc · Dezembro 27, 2006

É isso....sem falar que no Explorer 5 não funciona rolar o conteúdo da célula pela rodinha do mouse. Só desce pela barra de rolagem mesmo. E a página toda fica com a "altura" equivalente ao conteúdo da célula...... eita Explorer de Mac extinto..... não sei como aparece na versão mais nova de PC.abs LP

Beraldo · Dezembro 27, 2006

Aqui funconou direitinho no FF 2 e no IE 7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#div1{	width: 230px;	height: 120px;	border: solid 1px red;	overflow: auto;}</style><title>Teste</title></head><body><div id="div1">Salve!<br />Estou com uma dúvida sobre como aplicar uma solução que vi no maujor.com em[url="http://www.maujor.com/dicas/tdscroll.php"]http://www.maujor.com/dicas/tdscroll.php[/url]sobre criar scroll numa célula, no dreamweaver.Ele fala sobre usar uma DIV.<br />Consigo criar estilos CSS e aplicar a elementos, mas como se cria e aplica uma DIV ?<br /><br />obrigado, um abraço<br />Luciano</div></body></html>

Funciona com a rolagem do mouse também.

Se você não conseguir resolver, poste a dúvida na sala Webstandards, que lá o pessoal manja de diferenças entre IE e FF; ;)

[]'s

DaPaz · Dezembro 29, 2006

Olá! Gente.

Tentando ajudar, eu testei na minha máquina e obtive os seguintes resultados:

IE 6.0 - Tudo Ok! (para botão do mouse e para rodinha);

FireFox 2 - Tudo OK! IDEM ao IE.

NetScape 8.1 - Funciona o botão do mouse mas a rodinha não responde.

Abraços.

DaPaz

pessoluc · Dezembro 29, 2006

Salve Beraldo e DaPaz!!

agradeço muito as respostas!

Vcs estão me dizendo que no IE 6 e 7 a caixa de texto se estende até o limite direito do site? É isso?

Porque, notem, é exatamente a diferença que procurei mostrar nas figuras que postei acima. No IE 5 (mac) a caixa de texto pára antes, não vai até a extrema direita. Fora a questão da rolagem.

ops, o ender

http://www.lgpessoa.com/LP2007/texto.html

vcs não mandariam um screenshot? :)

obrigado! abraços

Luciano

DaPaz · Dezembro 29, 2006

Olá! Pessoluc.

As minhas observações iniciais só valem para o funcionamento do mouse.

Quanto a célula com scroll notei o seguinte:

IE 6.0 - A célula com scroll fica centralizada e não chega a ponta direita, ou seja, é reduzida.

FireFox 2 - A célula não fica centralizada e vai até a ponta direita, ou seja, fica maior.

NetScape 8.1 - IDEM ao Firefox.

Esses navegadores nos enlouquecem, né?

Abraços.

DaPaz

Salve Beraldo e DaPaz!!

agradeço muito as respostas!

Vcs estão me dizendo que no IE 6 e 7 a caixa de texto se estende até o limite direito do site? É isso?

Porque, notem, é exatamente a diferença que procurei mostrar nas figuras que postei acima. No IE 5 (mac) a caixa de texto pára antes, não vai até a extrema direita. Fora a questão da rolagem.

ops, o ender

http://www.lgpessoa.com/LP2007/texto.html

vcs não mandariam um screenshot? :)

obrigado! abraços

Luciano

pessoluc · Dezembro 29, 2006

Salve DaPaz!!obrigado pela resposta!!pois é.... dificil programar pra 'todos'...De todo modo acredito que se estiver 'a contento' no IE 6 e 7 e no Firefox, já ta valendo.Ainda vou testar um dos outro modos de aplicar a DIV sugeridos pelo Beraldo,ou seja, criando uma 'class' e aplicando essa class à DIV, algo como.....<div class="celulascroll">ao invés de colocar os parâmetro diretamente na DIV.Assim que tiver novidades eu posto aqui!Abraço!e BOM ANO pra você! :)Luciano

Arquivado

célula com scroll

Recommended Posts

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

DaPaz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DaPaz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pessoluc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante