Montar layout com divs
07/02/2013
0
Venho aqui pedir a ajuda de vocês para desenvolver o layout de uma página web. É bastante simples, mas eu não estou conseguindo fazer o que quero.
Eu preciso desenvolver o seguinte layout: [url]https://dl.dropbox.com/u/78226427/layout1.png[/url]. Como podem ver, preciso ter um cabeçalho, o corpo dividido em uma parte na esquerda e uma maior na direita e um rodapé. Porém preciso ter uma margem até os limites da página.
O máximo que consegui fazer foi o seguinte: [url]https://dl.dropbox.com/u/78226427/layout2.png[/url], mas pra isso eu preciso usar:
body{
padding:0;
margin:0;
}
Aí fica sem a margem. Se eu tirar esse código, aí fica assim: [url]https://dl.dropbox.com/u/78226427/layout3.png[/url].
Alguém poderia me ajudar?
O código HTML está no seguinte link: [url]http://pastebin.com/ydw16jGU[/url]. E o CSS: [url]http://pastebin.com/FsBBir7R[/url].
Grata desde já;
Rachel Andrade
Posts
07/02/2013
José
07/02/2013
Rachel Andrade
Eu preciso montar esse layout, só que mantendo uma margem no corpo da página, sem que as divs encostem nas bordas da página, como aparece na segunda imagem.
Obrigada.
07/02/2013
José
ARQUIVO CSS
/* padding:0;
margin:0;*/
}
#divSite{
height:99%;
width: 100%;
position: absolute;
}
#divCabecalho{
height:20%;
border: 4px solid blue;
}
#divMenu {
width:19%;
height:70%;
float:left;
border: 4px solid blue;
}
#divConteudo {
width:80%;
height:70%;
float:left;
border: 3px solid blue;
}
#divRodape{
clear:both;
height:10%;
border: 4px solid blue;
ARQUIVO HTML
<head>
<meta charset="UTF-8"/>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<div id="divSite">
<div id="divCabecalho">
Cabeçalho
</div>
<div id="divMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="divConteudo">
Conteúdo
</div>
<div id="divRodape">
Rodapé
</div>
</div>
</body>
</html>
A unica mudança feita foi ter adicionado as bordas em cada uma das div`s.
Espero que assim possta ter lhe ajudado , mais caso ainda não seja isso que você dejava
Post que tentamos resolver . abraços
07/02/2013
José
com espaço na direita e esquerda .
07/02/2013
José
altere o css que você possui por este
body{
padding:0;
margin:3%; /* definindo a margem */
}
#divCabecalho{
background-color: yellow;
height:20%;
}
#divMenu {
width:20%;
height:70%;
float:left;
background-color: blue;
}
#divConteudo {
width:80%;
height:70%;
float:left;
background-color: green;
}
#divRodape{
clear:both;
background-color: gray;
height:10%;
}
07/02/2013
Rachel Andrade
Então, se eu botar a margem do body aparece a margem esquerda e superior, mas o conteúdo passa dos limites da página e começa a aparecer as barras de rolagem, como eu mostrei na imagem.
Eu queria, como você disse, ter o layout centralizado, mantendo as margens laterais, superior e inferior.
Se precisar usar outro código HTML ou CSS, não tem problema, esse que eu usei foi mesmo para teste.
Obrigada.
07/02/2013
José
Estarei criando algo aqui e lhe retorno com o código.
07/02/2013
José
altere apenas seu arquivo CSS.
07/02/2013
José
altere apenas seu arquivo CSS.
body{
width: 960px;
height: auto;
padding:0;
margin: auto;
text-align: center;
}
#divCabecalho{
background-color: yellow;
height:20%;
}
#divMenu {
width:200px;
height:70%;
float:left;
background-color: blue;
}
#divConteudo {
width:760;
height:70%;
float:left;
background-color: green;
}
#divRodape{
clear:both;
background-color: gray;
height:10%;
}
07/02/2013
Rachel Andrade
07/02/2013
José
seria mesmo está utilizando um framework
assim o próprio framewoeks faria a adaptação
de acordo com a resolução ou tamanho do navegador.
Ou você tem necessidade mesmo de estar utilizando apenas CSS e HTML simples ?
07/02/2013
Rachel Andrade
Mas pelo visto não é tão simples.
07/02/2013
José
porém tem as facilidades de apenas indicar o tamanho
pois a maioria dos framework se concentram numa largura de 960px e se adequada
a qualquer resolução até mesmo de dispositivo móvel.
Caso queira dar uma olhada visite esse meu artigo sobre 960 grid é um framework.
[url] https://www.devmedia.com.br/introducao-ao-framewok-css-960-grid/27061[/url]
Caso obtenha alguma duvida sobre, estou a disposição para responder.
sinta-se a vontade em perguntar.
07/02/2013
Rachel Andrade
Vou ver o que consigo por aqui, continuarei pesquisando.
07/02/2013
José
estarei ajudando.
Clique aqui para fazer login e interagir na Comunidade :)
