Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
LeaandrooR

HTML <HTML> Como sobrepor tabelas

Recommended Posts

Postado (editado)

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
Postado (editado)

@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






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

×