Ir ao conteúdo
  • Cadastre-se
LeaandrooR

HTML <HTML> Como sobrepor tabelas

Recommended Posts

Eae pessoal, estou montando um trabalho para uma disciplina na escola que consiste em montar o design de um site, mas estou com problemas em uma parte. Como vocês podem verna imagem o texto fica a baixo, gostaria que ele ficasse em cima na mesma reta do "Fale com a Gente" mas não estou conseguindo, Alguém tem uma sugestão do que tags utilizar para isso. Os escritos no canto esquerdo estão em uma tabela e a barra horizontal do lado direito usei uma tabela e fui configurando o alinhamento. Em baixo o código do site inteiro. Caso tenha alguns erros bobos peço desculpa pois estou iniciando. (o texto foi somente para teste)

<html>
 <head>
   <title> Master RACE </title>
  </head>
  <style type="text/css">
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
</style>
  <body bgcolor="#0000" link="FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
            <div><link rel="shortcut icon" href="D:\1 Bimestre\DDW\Site1Bim\favicon.ico" />
         <center>
         <img src="D:\1 Bimestre\DDW\Site1Bim\bannertop.jpg">
         </center>
         <br>
         <hr color="fede00" align="center" width="90%">
         <br><br>
            <table border="0" bgcolor="0000" align="left" style="width:1%">
                <tr>
                <th>
            <hr size="340" width="1" color="#FFFFFF" align="left">
                </th>
                </tr>
            </table>
            <table border="0" bgcolor="0000" align="right" style="width:87%">
                <tr>
                <th>
            <hr size="340" width="1" color="#FFFFFF" align="left">
                </th>
                </tr>
            </table>
           <table border="0" bgcolor="#0000" align="left" style="width:12%">
                <tr>
                <th>
             <p align="left"><font face="Gotham" size="3" color="FFFFFF">Fale com a gente :D</font></p>
               <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="FFFFFF"><a href="https://www.reddit.com/r/pcmasterrace/">Entre no nosso forum XD!!</a></font>
               <hr color="FFFFFF" align="left" width="220">
             <p align="center"><font face="Gotham" size="4" color="fede00">Sigam-me os bons :D</font>
               <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.facebook.com/OfficialPCMasterRace/">Facebook :)</a></font>  
                 <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.youtube.com/user/Flashgitzanimation">YouTube :)</a></font> 
                 <hr color="FFFFFF" align="left" width="220">
                 <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://twitter.com/officialpcmr">Twitter :)</a></font> 
                      <hr color="FFFFFF" align="left" width="220">
                     <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.twitch.tv/officialpcmasterrace">Twitch :)</a></font>
                     <hr color="FFFFFF" align="left" width="220">  
                 </th>
                 </tr>
            </table>
            <div>
                       <table border="0" bgcolor="#FFFFFF" align="center" style="width:20%">
                <tr>
                <th>
                    A Square Enix estava avaliando os problemas com Chrono Trigger na Steam e prometeu que iria resolvê-los através de uma série de patches. Agora, em uma atualização da Steam, a Square Enix revelou que o primeiro patch virá no início deste mês e permitirá que os jogadores troquem os gráficos atuais pelos gráficos originais do Super NES. Essa troca será opcional.

Link Chrono Trigger Steam

Quando lançado para Steam, o filtro de suavização do jogo tinha objetivo de dar ao RPG uma aparência de alta resolução, mas o resultado não foi muito bem aceito pelos fãs, o que levou o jogo à uma série de reclamações. O port do jogo foi criticado porque a Square Enix usou como base o aplicativo móvel do game para adaptá-lo ao PC.

"Estamos trabalhando para solucionar os problemas lançando vários patches nos próximos meses, enquanto continuamos a oferecer suporte ao Chrono Trigger na Steam", diz a empresa na atualização. A Square Enix também está aumentando o tempo da Limited Edition na Steam, que vai permanecer até 30 de abril. Dessa forma, a edição limitada ainda pode ser oferecida após a primeira atualização ser lançada. 

                 </th>
                 </tr>
            </table>
  </body>
  </html>

imageproxy.php?img=&key=932d69d8514fc575

image.thumb.png.8060c55c3b7a2f8512d67bf07ec15923.png

imageproxy.php?img=&key=932d69d8514fc575

image.png

Editado por LeaandrooR

Compartilhar este post


Link para o post
Compartilhar em outros sites

@LeaandrooR Olá, Não sei qual é exercício proposto e nem as condições. Mas o elemento TH não é para ser usado assim. Ele é o header da tabela. É mais indicado para nome de colunas em uma tabela.

 

Não que a técnica de construção de sites com tabelas seja errado, mas nos padrões atuais, o melhor é você fazer com a técnica tableless. Ou seja,  não usar tabelas para estruturar o site.

 

No seu caso,
Bastaria criar um elemento  DIV  para ser o container do site,

Dentro dele teria outro elemento DIV para conter o header(a imagem amarela)
Um menu posicionado ao lado esquerdo usando os elementos UL e LI, e o um elemento DIV para o conteúdo.
Em prática o exemplo de estrutura fica assim:

<div class="container">
   <!-- aqui fica o banner com a imagem amarela -->
   <div class="header"> </div>
  
   <div class="menu">
    <!-- aqui dentro você coloca o menu com UL e LI -->
   </div> 

   <div class="conteudo">
     <!--  aqui dentro você coloca o conteúdo do site-->
   </div>

</div>

Aí basta você criar as regras de CSS.

 

Por recomendação, diria que você poderia já tentar se familiarizar com os elementos do HTML5, como por exemplo <section> para estrutura interna,  <header> para cabeçalho de de um <section> enfim, deixo as dicas.

 

Falando sobre a sua última imagem,  nota-se que o espaço entre o conteúdo e o topo, é causado porque você incluiu uma outra tabela dentro da tabela. A estrutura está errada.

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF  desculpa pela demora, estava em semana de provas, então quer dizer que todo o codigo que eu fiz pode ser trocada por essas poucas linhas? Nossa muito obrigado pela ajuda :D

Editado por DiF
Remover a citação inexistente.
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@LeaandrooR Sim!  você pode usar aquele exemplo de estrutura. Bastando estilizar com o CSS e claro, colocando o conteúdo dentro de cada.

 

A técnica tableless, é uma baita mão na roda e reduz bastante o código. 

Como eu disse anteriormente, usar tabelas para a estrutura não é errado, até porque era usado antes de existir a técnica tableless(sem tabelas).

Como hj existe esta técnica, porque não usar e deixar a estrutura mais "clean" :thumbsup:

 

PS: evite de usar os atributos CSS inline. Ou seja, declarado na linha do elemento. Por que? Porque o grau de precedência conta.   Vamos a um exemplo para você entender do que falo.

 

.vermelho{
  color: red;
}
<p class="vermelho" style="color: blue;">Olá Mundo!</p>

Qual será a cor da frase "Olá mundo!" ?

Azul. Porque o CSS inline tem grau de precedência maior. Em outras palavras, ele sobrescreve uma regra existente. Só use quando não há possibilidade de definir em um CSS incorporado. 

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×