Criar layout usando CSS

Rafael Biagione · 27 de novembro de 2012

O layout que quero montar é este, desenhado em Fireworks:

http://www.4shared.com/photo/C9aegRBf/layout_vermelhofw.html

Estou tentando converte-lo em HTML/CSS utilizando divs.

Não consigo posicionar o conteúdo do site a lado do menu, a começar pelo banner.

O código que fiz é este:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-repeat: x;
margin:0;
padding:0;
background-image:url(Imagens/fundo.jpg);
}

#topo1 {
width: 1070px;
margin:0 auto;          
}

#topo2 {
margin-top:-25px;
padding: 21px;
}

#conteudo {
width: 1070px;
margin:0 auto;    
}

#menu {
float:left;
width: 229px;
padding-left: 21px;
}

#banner {
background-color: #D8D8D8;
width: 832px;
height: 131px;
text-align: center;
float:left;

}

#conteudo #banner h1 {
margin-top:50px;	
font-family: Verdana, Geneva, sans-serif;
}
</style>

</head>

<body>

  <div id="topo1">

    <div id="topo2">
    <img src="Imagens/logo.fw.png" width="213" height="187" /> 
    </div>

  </div>

  <div id="conteudo">

  	<div id="banner">
    <h1>BANNER</h1>
    </div>

    <div id="menu">
    <img src="Imagens/menu.gif" width="229" height="742" />
    </div>

  </div>

</body>
</html>

Bergamaschi. · 27 de novembro de 2012

Coloquei o seu código, visualizei, mas não entendi ainda o que você quer fazer.

Aparece uma imagem quebrada em cima, logo embaixo um retangulo largo escrito banner e outra imagem quebrada embaixo do banner.

O que está de errado no layout? Tira um print e explica melhor por favor.

É que estão faltando as imagens. Vou posta-las em algum site para você poder usar, se preferir. O layout tem que ficar igual este que desenhei no Fireworks:

http://www.4shared.com/photo/C9aegRBf/layout_vermelhofw.html

No Dreamweaver aparece assim:

http://img41.imageshack.us/img41/3406/semttulouhk.jpg

Note que o 'BANNER' aparece acima do menu, quando deveria estar ao lado. Eu ainda não sei que código CSS utilizar para fazer não só a área do banner, mas também todo o conteúdo central da página, estar ao lado do menu, no centro da tela.

Estes são os aquivos utilizados:

Fundo:

http://www.4shared.com/photo/CABL-WRI/fundo.html

Logo:

http://www.4shared.com/photo/80bAm_ig/logofw.html

Menu:

http://www.4shared.com/photo/_GnXuToO/menu.html

Fundo dos produtos:

http://www.4shared.com/photo/kNd59Uqc/fundoprodutos.html

Depois que esta parte estiver concluída, será inserido o rodapé, as imagens dos produtos, os botões, as descrições, etc.

Alguém pode me ajudar?

joseRenato · 28 de novembro de 2012

se eu entendi bem, você pode resolver isto usando o position:relative; e as propriedades: left, top, heigth e buttom

DiF · 28 de novembro de 2012

Bem eu tentaria fazer usando os floats left, para o banner e o menu... float right para o conteudo.. e criaria uma div mestre com display table para deixar tudo dentro... por aí vai