Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Css

Por , em Desenvolvimento frontend

Recommended Posts

Carcleo    4

Carcleo
Postado

Pessoal. Sempre usei tabelas para montar layout's.

Porem, gostaria de começar a usar CSS.

 

Estou 'tentando' montar um layout simples conforme imagem abaixo mas esta dando certo;

Porem, estou tendo enorme dificuldade em montar o layout abaixo:
Pode me ajudar?
Estou fazendo da forma abaixo mas o quadro que esta em cima da parte colorida no desenho, só fica abaixo da parte colorida.
site.png
* {     margin:0 auto; }
 
#topo
{
  position:absolute;
  width:1000px;
  left:50%;
  margin-left:-500px;
}
#tarja
{
  top:100px;
  height:358px;
  background-image:url(../../img/fundo.jpg);
  background-repeat:repeat-x;
}
 
#cabecalho
{
  position:absolute;
  top:120px;
  width:1000px;
  left:50%;
  margin-left:-500px;
}
  #formBox
  {
     width:250px;
     float:left;
     text-align:center;
  }
      #formTopo
      {
      }
      #form
     {
        width:240px;
        background-color:#424242;
     }
#banner
  {
     float:right;
  }
#mensagem
{
  clear:both;
}
#portais
{
}
#imagens
{
}
  #destaques
  {
  }
  #galeria
  {
  }
  #midiaSocial
  {
  }
#anuncios
{
}
#base
{
}
Veja o HTML
<!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>
<link rel="stylesheet" type="text/css" href="global/css/body.css" /></link>
<title>Minha Página</title>
</head>
<body>
  <div id="topo"> </div>
  <div id="cabecalho">
    <div id="tarja"></div>
    <div id="formBox">
      <div id="formTopo"></div>
      <div id="form"> </div>
    </div>
    <div id="banner"></div>
  </div>  
  <div id="mensagem"></div>
  <div id="portais"></div>
  <div id="destaques"></div>
  <div id="galeria"></div>
  <div id="midiaSocial"></div>
  <div id="anuncios"></div>
  <div id="base"></div>
</body>
</html>
Alguem poder me ajudar?
Desde já muito obrigado.
Carlos Rocha

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Alterado o html

 

....
<body>
  <div id="topo">topo</div>
  <div id="tarja">tarja</div>
  <div id="cabecalho">cabecalho
    <div id="formBox">formBox
      <div id="formTopo">formTopo</div>
      <div id="form">form</div>
    </div>
    <div id="banner">banner</div>
  </div>  
  <div id="mensagem">mensagem</div>
  <div id="portais">portais</div>
  <div id="portais">imagens
    <div id="destaques">destaques</div>
    <div id="galeria">galeria</div>
    <div id="midiaSocial">midiaSocial</div>
  </div>
  <div id="anuncios">anuncios</div>
  <div id="base">base</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito