Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 15:52

Estou pretendendo trocar tabelas usadas no layout por divs (na verdade, li que não mais é recomendado utilizar tabela como elemento de layout, a não ser para exibição de resultados de consultas em banco de dados; e, se isso tiver fundamento, quero me adequar).

Utilizando uma tabela, consigo adequá-la bem ao espaço ao redor, e, internamente, consigo centralizar vertical e horizontalmente, imagem e texto, lado a lado, cada um numa célula da tabela.

Estou tentando fazer isso com a div, mas estão acontecendo três situações negativas em confronto com a utilização de tabela.

a) não estou conseguindo adequar a div em seu espaço exterior.

b) quando utilizo o modo responsivo do Firefox, ao se ir diminuindo a largura da janela ao máximo que se puder, no código com a tabela, o texto não se sobrepõe à imagem, mas, com o código com a div, o texto se sobrepõe à imagem, e gostaria de evitar isso.

c) tenho a impressão de que a centralização vertical não está correta.

Qual a maneira correta de ser fazer o que quero usando a div? O código que estou adaptando dá para ser melhorado se não estiver totalmente incorreto?

Mesmo aparentemente funcionando adequadamente o código com a tabela, ele está correto? Pode ser melhorado, também? Como faço para colocar as larguras da célula no CSS?

Abaixo, o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body{margin: 4px} /*CSS DA TABELA*/ .tabela_estilo { width: 100%; background-color: #b3ecff; border-color: #ccc; border-style: solid; border-width: 1px; height: 72px; line-height: 72px; padding:2px; border-spacing: 0; font-family: arial; font-style: normal; font-size: 2.8em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: black; text-align: center; margin: 0; } /*CSS DA DIV*/ #div_estilo { width: 100%; vertical-align:middle; height: 72px; padding:2px 4px 2px 4px; background-color: #ddff99; border-color: #ccc; border-style: solid; border-width: 1px; position: relative; display: table; font-family: arial; font-style: normal; font-size: 2.8em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: black; margin: 2px; } #div_estilo p{*position:absolute;top:50%;display:table-cell;vertical-align:middle} #div_estilo .span_img { vertical-align:middle; text-align: center; width: 45%; display: inline-block; *position: relative; top: 50% } #div_estilo .span_txt { vertical-align:middle; text-align: center; width: 55%; display: inline-block; *position: relative; top: 50% } img{ max-width: 200px; height: auto; } </style> </head> <body> <table class="tabela_estilo"> <tr> <td width="45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></td></td> <td width="55%">Texto</td> </tr> </table> <br><br> <div id="div_estilo"><p><span class="span_img"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></span><span class="span_txt">Texto</span></p></div> </body> </html>

Grato
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 16:08

Tabela é bem melhor para trabalhar com valores de tamanho indefinido, ou seja, que podem vir de um banco de dados por exemplo.
No seu código como você disse os elementos não ficam sobrepostos quando reduz a largura da tela.

O alinhamento vertical parece correto.

Quanto a largura da coluna como são duas larguras diferentes você pode fazer do modo que fez ou criar a classe para cada coluna.

Dê também uma olhada nesse post que mostra como criar tabela com divs http://codigosnaweb.com/forum/Como-ter- ... _8885.html
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 17:15

Você pode me ajudar a corrigir o código da div que postei? Há, nele, como fazer o texto não se sobrepor à imagem? Ou tem de se usar o código do link que você passou para evitar essa sobreposição? Ou há outra forma de se fazer isso com div? Ou, ainda, para se evitar isso somente com tabela?

No caso que postei, não virão dados do banco de dados. Usarei para um link, com texto e imagem estáticos.

Eu li que estão banindo o uso das tabelas do layout por ser muito código para se interpretar em se comparando tabela com div, e se recomendando o uso de div, principalmente para o desenvolvimento para dispositivos móveis.

Mas me parece que, em algumas situações, para se conseguir o resultado que se consegue com tabelas, ao se usar div, se usaria um número delas equivalente à tabela, linha e célula, ou até mais, como no código que você postou.

O que é melhor: usar a própria tabela, ou usar a div imitando a tabela (conforme o código do link que você forneceu)?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 17:31

Você pode fazer assim:

<div style="display:table;" class="tabela_estilo"> <div style="display:table-row;width:100%"> <div style="display:table-cell;vertical-align:middle;width:45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div> <div style="display:table-cell;vertical-align:middle;width:55%">Texto</div> </div> </div>

Ai você pode usar o estilo inline como está ou criar a classe e aplicar na div correspondente.

Não acho que as tags de tabela vão ser extintas. Mas por exemplo, se você procurar um layout responsivo, que pode ser usado ao mesmo tempo em computador e celular ele provavelmente vai ser feito com divs. Isso porque é mais fácil por exemplo organizar ou mudar a estrutura, por exemplo, mudar de modo retrato para paisagem.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 17:42

Vou testar o que você fez.

Há uns meses, eu estava testando uns exemplos do site W3Schools, e me pareceram taxativos quanto a se desestimular o uso de tabelas. Inclusive, no exemplo dela, a informação é de que não deve ser usada em layout. Senti-me incomodado, de certa forma, pois uso muitas tabelas, pois estou readaptando um layout que criei há vários anos. Ou que puder, pretendo trocar por div, por isso quero conseguir fazer com elas o que faço com tabelas.

Neste artigo, já antigo, a crítica é em razão ao uso indiscriminado de div's, por ser neutra e não ter função semântica: http://www.maujor.com/tutorial/divmania.php. Não sei se hoje a impressão mudou.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 17:56

Acho que a maioria dos sistemas de hoje em dia trabalha com divs ou li para estruturar o conteúdo.

Se puder trabalhar com divs é bem melhor. Até baixar um layout responsivo e trabalhar sobre a estrutura dele.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 18:37

Entendi. Neste caso, estou adaptando o layout para responsivo.

Isto aqui é uma gambiarra?

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

O código com div não queria respeitar a margem direita, não deixando espaço do lado direito, “colando” no limite da janela do navegador. Lembrei-me de que usei isto certa vez.

Com isso, o funcionamento dos dois códigos me parece que ficou igual.

Eis o código da tabela e o da simulação da tabela com div, que você sugeriu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{margin: 4px} /*CSS DA TABELA*/ .tabela_estilo { width: 100%; background-color: #b3ecff; border-color: #ccc; border-style: solid; border-width: 1px; height: 72px; line-height: 72px; padding:2px; border-spacing: 0; font-family: arial; font-style: normal; font-size: 2.8em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: black; text-align: center; margin: 0; } img{ max-width: 200px; height: auto; } </style> </head> <body> <table class="tabela_estilo"> <tr> <td width="45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></td></td> <td width="55%">Texto</td> </tr> </table> <br><br> <div style="display:table;" class="tabela_estilo"> <div style="display:table-row;width:100%"> <div style="display:table-cell;vertical-align:middle;width:45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div> <div style="display:table-cell;vertical-align:middle;width:55%">Texto</div> </div> </div> </body> </html>

Estou pesquisando, mas você pode indicar como tiro o estilo das div's para colocá-lo no código CSS, separando, nele, tabela, célula e linha?

Vou tentar um exemplo deste link: http://stackoverflow.com/questions/3003 ... -tables-td.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 18:57

Creio que consegui tirar o CSS da tag nas div's. Veja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{margin: 4px} /*CSS DA TABELA*/ .tabela_estilo { width: 100%; background-color: #b3ecff; border-color: #ccc; border-style: solid; border-width: 1px; height: 72px; line-height: 72px; padding:2px; border-spacing: 0; font-family: arial; font-style: normal; font-size: 2.8em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: black; text-align: center; margin: 0; } /*CSS DA DIV SIMULANDO TABELA*/ .tabela_estilo_div { width: 100%; display:table; background-color: #b3ecff; border-color: #ccc; border-style: solid; border-width: 1px; height: 72px; line-height: 72px; padding:2px; border-spacing: 0; font-family: arial; font-style: normal; font-size: 2.8em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: black; text-align: center; margin: 0; } .linha_tabela_estilo_div { display:table-row; width:100% } .celula_imagem_tabela_estilo_div { display:table-cell; vertical-align:middle; width:45% } .celula_texto_tabela_estilo_div { display:table-cell; vertical-align:middle; width:55% } img{ max-width: 200px; height: auto; } </style> </head> <body> <table class="tabela_estilo"> <tr> <td width="45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></td></td> <td width="55%">Texto</td> </tr> </table> <br><br> <div class="tabela_estilo_div"> <div class="linha_tabela_estilo_div"> <div class="celula_imagem_tabela_estilo_div"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div> <div class="celula_texto_tabela_estilo_div">Texto</div> </div> </div> </body> </html>

Está certo?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 19:48

O objetivo do asterisco é que o código funcione em todos os navegadores. Tanto o modo que você fez quanto o do link podem ser usados.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 20:11

Desculpe. Sim. Compreendi. Refiro-me ao código entre as chaves. Não fui claro.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 20:13

Ou melhor. É isso que você quis dizer e não entendi? Esse código é para tal finalidade?
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 20:25

Por favor. Somente mais uma dúvida. Creio que tenho feito errado. Quando uso hover, eu destaco somente o que quero que se modifique ao se sobrepor o mouse? Por exemplo: se quero que mude a cor de fundo e a cor da borda, coloco somente esses itens no seletor com hover? Não preciso repetir mais nenhuma outra propriedade: largura, altura, etc.?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

08-11-2016 21:16

Está correto. As vezes você tem que usar uma determinada linha para aplicar o efeito em cada navegador.

Já no caso do seletor você só aplica no hover o que quer diferenciar, como no exemplo abaixo

<style> a{ border:1px solid #ccc; background-color:#ddd; } a:hover{ border:2px solid #ccc; } </style> <a href="">link</a>

Nesse caso o fundo vai continuar cinza porque você não alterou o mesmo no hover.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

10-11-2016 08:49

Sobre aplicar o efeito em cada navegador, tem a ver com isto?

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Há uma regra específica para cada navegador a ser usada individualmente numa classe?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

10-11-2016 09:32

Em alguns casos você precisa aplicar um efeito em um elemento e um navegador específico não aceita. Dai que vem o uso desses prefixos relativos a um navegador.

Nesse link tem alguns http://peter.sh/experiments/vendor-pref ... -overview/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 12:55

Entendi. Guardei o link. Obrigado.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 13:10

Tenho uma dúvida sobre o código abaixo, que você postou, simulando uma tabela através de div's:

<div style="display:table;" class="tabela_estilo"> <div style="display:table-row;width:100%"> <div style="display:table-cell;vertical-align:middle;width:45%"><img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div> <div style="display:table-cell;vertical-align:middle;width:55%">Texto</div> </div> </div>

Ele, por exemplo, usa div's como display table, display table-row e display table-cell.

Estou pesquisando sobre centralização vertical, para definir isso em meu código, e há exemplos que omitem o display table-row, mas utilizam três div's, sendo uma display table, uma display table-cell e outra sem definir o display, como no exemplo deste link http://www.maujor.com/tutorial/centrar-vertical.php.

Também já encontrei situações em que há uma div com display table, p com display table-cell e span sem definir display, havendo uma variação da propriedade (creio que seja isso) "position" entre os vários códigos que vi.

Minha dúvida é: todas as formas são válidas? Há uma mais correta que a outra?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 14:20

Pode usar qualquer elemento que aceite as propriedades. Nesse caso a div, span ou p.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 20:02

Entendi. Como leigo, posso interpretar que há muita subjetividade na programação?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 20:11

Na maioria das vezes sim.

Na programação basicamente o importante é o resultado final. Claro, seguindo as regras da linguagem que está usando.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 20:33

Compreendi. Cara, pensando no que você disse, fui pesquisar sobre "hack" (principalmente por conta das dificuldades em face do Internet Explorer) para concluir meu raciocínio, e veja o que encontrei: http://www.devmedia.com.br/hack-e-php-u ... -web/32994.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17682
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

14-11-2016 20:52

Dei uma lida por alto, mas essa linguagem parece o PHP mais enxuto. E é claro mais voltado para as necessidades das empresas.
1
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

Re: Alinhamento horizontal e vertical de imagem e texto lado a lado com CSS

24-11-2016 10:33

Entendi. Adequando sua necessidade de se manter com código aberto, creio.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado