Imagem sobre tabela

Thelon · Janeiro 12, 2009

Vamos supor que você tem uma linda tabela:

HTML:

<table width="200" height="400"  align="center" border="3" bordercolor="#0000FF" >
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td colspan="2"> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
</tr>
</table>

E esta La pensando ...” Nossa minha tabela é tão lindo e maravilhosa *-* Pena que falta algo nela não sei.” Ai vem a grande idéia de por a foto do Barney sobre ela para enfeitar. Você salta de alegria pois terá a tabela perfeita. Então começa a pensar: “Vou por em um div e depois posicionar com o CSS ... Coisa simples.” HTML:

<div id="imagem">
<img src="barney.jpg" width="105" height="140" />
</div>

CSS:

#imagem{
    width:105px;
    height: 140px;
    position:absolute;
    left: 596px;
    top: 139px;
}

Aeeee ele está posicionado onde você queria ... Perfeito não é mesmo ?! NÃO !!! Mude a resolução do seu monitor e me diga se está perfeito ainda ?! Então ... Está um LIXO !! não é mesmo Você se pergunta: “AHHH ... POR QUE COMIGO ?! MINHA VIDA É UM LIXO !!!! AHHHH !!!!” Depois de se acalmar: “Vou dar um pulo no ScriptBrasil ... Alguém muito inteligente e astuto deve ter feito um tutorial sobre isso” É ai que o tio thelzin ensina um truque super supimpa para você Altere seu CSS para isso CSS:

#imagem{
    width:105px;
    height: 140px;
    position:relative;
    margin: 0 auto;
    left: 20px;
    bottom: 300px;
}

Faça o teste novamente.

Aposto que agora você está alegre e saltitante ... E pensando em como retribuir essa ajuda fundamental para sua vida não é mesmo ?!

Espero que tenham gostado e aprendido algo.

Obs: Peça o numero de minha conta por MP assim você me agradece a altura ;)

KaKarotto · Janeiro 12, 2009

Aí vem o titio KaKarotto, e diz que aquela tabela não deveria existir. E complementa, dizendo que se está fazendo o site usando a tabela para uma função que não é a dela, destruindo qualquer semântica, não precisaria formatar em Css já que estaria tudo errado de qualquer forma.

Não é preciso position:relative, left e top.

ai ai ai...

Estraguei a brincadeira. :lol:

Thelon · Janeiro 13, 2009

Rude :/

Duvido que nunca na sua vida fez um POGzinho bacanudo ?! ;)

Marcelo F. (grupog4.com) · Abril 14, 2011

Olá, Thelon.

B)

Amigo, se for fácil e não for tirar seu tempo, gostaria de tirar uma dúvida. Ainda não comecei a estudar CSS. Estou apenas encaixando as coisas e chupinhando scripts para formar o site que quero.

No meu projeto, ainda uso tabelas para layout, gostaria de inserir em uma célula da <table>, uma imagem auto ajustável.

Consegui colocar um css que encontrei na internet e deu certo para o background do site, mas nada me deixa conseguir fazer o mesmo dentro da célula.

Estou me vendo obrigado a estuadar CSS e vou, mas agora me preocupo mais em realizar o projeto.

Acha fácil?

Se puder ajudar, garanto não esquecer da ajuda.

Campeão, tudo de bom e lembrando: ajude apenas se não for dar muito trabalho.

VALEU!

:)

+++++++++++++++++++++++++++++++++++++++++++

Abaixo, a lógica que me permitiu colocar o background do site auto ajustável:

<html >
<head>
<title> teste</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>

<body>
    <div>
                   <img id="background" src="background_ceu.jpg" alt="" title="" /> 
    </div>
    <div id="scroller">
            <div id="content">
             </div>
    </div>
</body>
</html>

Editado Abril 14, 2011 por kuroi
Adicionar tag CODE

Thelon · Abril 14, 2011

No meu projeto, ainda uso tabelas para layout, gostaria de inserir em uma célula da <table>, uma imagem auto ajustável.

Para com isso por favor. hahaha

Não cai na de muitas que falam tão mal das tabelas e dizem que não devem ser usadas de maneira alguma.

Quando se ouve falar em tableless (vai ouvir muito ao estudar CSS), você pega raiva das "bixinhas" de tanto que falam,

mas traduzindo o termo literalmente quer dizer MENOS tabelas e não SEM tabelas como muitos dizem.

Tabelas DEVEM ser usadas em dados tabulares como listagens de dados, usuários, etc.

E digo uma coisa, vale a pena começar a criar sem as tabelas mesmo sem conhecimentos e CSS, perderá um pouco de tempo

mas o aprendizado será grande.

Eu comecei estudar flash e era a única coisa que sabia, então meu primeiro cliente pediu o site e disse que não queria o benedito...

O que aconteceu foi que comecei um site sem nem saber o que era HTML.

Comecei com tabelas e depois vi que não valeria a pena e então encarei o CSS totalmente perdido o resultado foi esse:

www.ipsbc.org.br, tem alguns erros de marcação e tudo mais mas foi meu primeiro! :)

Espero que sirva de incentivo pois eu mal sabia o que estava fazendo e consegui! sozinho, apenas com a ajuda dos fóruns e muita busca.

Vamos a sua dúvida:

Cara o que você ta querendo fazer é meio insano, o ideal seria usar a propriedade background na tag table

table{
 background-image: url('.....');
}

porém se fizer isso a imagem não se ajustará ao tamanho e sim será "cortada".

Se fosse uma imagem que não fosse de fundo daria para fazer na tag img deixando width="100%" não seria legal, mas resolve.

Então a solução seria a imagem em baixo da tabela e com o tamanho igual e acompanhando a tabela, mas ai entra o caso de usar a propriedade do CSS

z-index e que já que você é novato deixaria para depois, é melhor entender sobre os posicionamentos antes.

Posta um link para o site talvez vendo eu enxergue mais claro seu problema.

abraços.

Marcelo F. (grupog4.com) · Abril 14, 2011

Meu velho, ahuahauah

estou vendo que se entrar de cabeça nesta profissão, vou trabalhar somente de madrugada.

:)

Resposta rápida!

Então, eu gosto tanto das tabelas. Sempre consigo fazer layouts autoajustáveis e conforme vou incrementando o conteúdo, tendo a fazer com que o layout se modifique sozinho.

Um tremendo improviso, mas consegui vender alguns sites desta forma sem o cliente me humilhar. :)

Me sinto como se fosse um pedreiro erguendo um prédio. ahahahahahah

Analisei um pouco mais o código CSS e depois de alguns minutos consegui resolver o problema, mesmo não manjando nada de CSS.

=)

Entrei aqui para tentar evitar trabalho seu.

aproveitando o código que chapinhei, peguei a lógica de como fazer a tentei inserir da mesma forma que o cara pede para fazer os divs e o img no body, chutei colocando o <div> dentro da célula <td>.

Deu certo!

Eu tinha que fazer desta forma, pois a minha intenção é mudar a imagem de fundo da célula, sem precisar editar o html. Da forma que está, basta que eu atualize a imagem no ftp e a página já se atualiza por si.

dá uma olhada:

----------------------------------

www.imobiliarionews.com.br

----------------------------------

(não se ofenda com as gambis. Só tm gambi, nem sei como consigo fazer. Vou abrindo os programas e dias depois sai.)

agora, para resolver o problema da imagem perdendo a proporção, vou criar 4 backgrounds diferentes, sendo que cada um tem uma área vazada maior.

quanto maior for a página, maior é a área vazada. Assim quando o background esticar, ele não vai perder tanto assim a proporção.

hahauahaahauh Puro improviso. Dá até vergonha de falar.

Bom, a primeira versão do site vai deste jeito mesmo! hauahuaah

A criança tem que nascer logo!

:)

Agora, já que você é humilde para dar opinião à leigos e ignorantes da web como eu, imaginando que eu estude como você. Se você fosse fazer uma página para cadastrar imóveis sem sistema asp, sql, php, etc, bem simples no manual mesmo como eu estou fazendo, como você faria?

Flash puro?...

Amigo, me avise se eu estiver queimando o seu post ou incomodando em, nunca participei em um forum e não sei como me portar.

abs,

Marcelo F.

Amigo, novamente agradeço pela atenção e tempo.

Marcelo F. (grupog4.com) · Abril 14, 2011

Thelon,

ignora, aparentemente estava tudo certo, mas quando eu fui trabalhar o conteúdo, #%$%@!

A porcaria do bg ficou na primeira camada. Poxa, tava feliz.

Era para o prédio ficar entre a camada céu e a tabela do conteúdo (atrás da tabela).

Vou ter que estudar CSS.

Espero que não seja muito complexo.

Bom, estudando.

Valeu!

Thelon · Abril 14, 2011

quanto a sua dúvida continuo sem entender nada, desculpe a ignorância.

vamos a alguns comentários

Então, eu gosto tanto das tabelas. Sempre consigo fazer layouts autoajustáveis e conforme vou incrementando o conteúdo, tendo a fazer com que o layout se modifique sozinho.
Um tremendo improviso, mas consegui vender alguns sites desta forma sem o cliente me humilhar. smile.gif
Me sinto como se fosse um pedreiro erguendo um prédio. ahahahahahah

Cara a tabela pode ser legal agora,

mas com o tempo vai aparecer alterações e ai como vai fazer? a manutenção de tabelas é muito mais demorada

e logo alguém vai te pedir algo que envolva a manipulação dos elementos, mostrar e esconder, deslizar, gerar em loop, etc, etc

Trabalhar com JavaScript vai ser um problema, e o que é da WEB hoje sem JS? NADA!

(não se ofenda com as gambis. Só tm gambi, nem sei como consigo fazer. Vou abrindo os programas e dias depois sai.)

cara relaxa que os POGS sempre vão aparecer :P

Agora, já que você é humilde para dar opinião à leigos e ignorantes da web como eu, imaginando que eu estude como você. Se você fosse fazer uma página para cadastrar imóveis sem sistema asp, sql, php, etc, bem simples no manual mesmo como eu estou fazendo, como você faria?
Flash puro?...

Nunca mais mexo com flash, além de ser pesado para carregar a manutenção é um soca!

HTML E CSS faz tudo que você precisa e se quiser algum efeito o Jquery está ai www.jquery.com (acho que ainda não era de aprender, mas guarde esse nome).

Amigo, me avise se eu estiver queimando o seu post ou incomodando em, nunca participei em um forum e não sei como me portar.

É assim que funciona, você posta e alguém responde. Caso eu suma, me mande uma MP que eu lembro de vir aqui por e-mail. hahaha

Entrar

Imagem sobre tabela

Pergunta

Thelon

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Thelon

Link para o comentário

Compartilhar em outros sites

Marcelo F. (grupog4.com)

Link para o comentário

Compartilhar em outros sites

Thelon

Link para o comentário

Compartilhar em outros sites

Marcelo F. (grupog4.com)

Link para o comentário

Compartilhar em outros sites

Marcelo F. (grupog4.com)

Link para o comentário

Compartilhar em outros sites

Thelon

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades