Primeiramente, gostaria de pedir o administrador do fórum que cancelasse ou excluísse os subtópicos abaixo desse:
http://www.portugal-a-programar.pt/topic/64006-float-right-nao-funcionou/#entry538417
Porque o assunto, de certa forma, mudou. Então, peço a ajuda dos colegas em mais um estudo.
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.
![Imagem Colocada]()
Código (CSS):
Veja o HTML
Código (HTML):
Desde já muito obrigado.
Carlos Rocha
http://www.portugal-a-programar.pt/topic/64006-float-right-nao-funcionou/#entry538417
Porque o assunto, de certa forma, mudou. Então, peço a ajuda dos colegas em mais um estudo.
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.
Código (CSS):
*
{
margin:0 auto;
}
#topo, #cabecalho, #mensagem, #portais, #imagens, #anuncios, #base
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
background-color:#033;
}
#topo
{
height:100px;
}
#tarja
{
position:absolute;
top:100px;
width:100%;
height:280px;
background-image:url(fundo.jpg);
}
#cabecalho
{
top:120px;
height:400px;
}
#formBox
{
text-align:center;
}
#formTopo
{
}
#form
{
}
#banner
{
}
#mensagem
{
top:520px;
height:100px;
}
#portais
{
top:620px;
height:100px;
}
#imagens
{
top:720px;
height:100px;
}
#destaques
{
}
#galeria
{
}
#midiaSocial
{
}
#anuncios
{
top:820px;
height:100px;
}
#base
{
top:920px;
height:100px;
}
{
margin:0 auto;
}
#topo, #cabecalho, #mensagem, #portais, #imagens, #anuncios, #base
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
background-color:#033;
}
#topo
{
height:100px;
}
#tarja
{
position:absolute;
top:100px;
width:100%;
height:280px;
background-image:url(fundo.jpg);
}
#cabecalho
{
top:120px;
height:400px;
}
#formBox
{
text-align:center;
}
#formTopo
{
}
#form
{
}
#banner
{
}
#mensagem
{
top:520px;
height:100px;
}
#portais
{
top:620px;
height:100px;
}
#imagens
{
top:720px;
height:100px;
}
#destaques
{
}
#galeria
{
}
#midiaSocial
{
}
#anuncios
{
top:820px;
height:100px;
}
#base
{
top:920px;
height:100px;
}
Veja o HTML
Código (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">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="imagens">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>
Alguem poder me ajudar?<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">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="imagens">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>
Desde já muito obrigado.
Carlos Rocha