Montar layout com divs

07/02/2013

2

Olá a todos.
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á;
Responder

Posts

07/02/2013

José

Amigo pelo que entendi você quer que tenha uma borda em todas as div`s ?
Responder

07/02/2013

Rachel Andrade

Oi, José. Não é bem uma borda em todas as divs.
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.
Responder

07/02/2013

José

Amigo veja se isso aqui consegui resolver seu problema ou pelo menos dar uma luz de qual caminho seguir

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
Responder

07/02/2013

José

Assim compreendi agora , você quer deixar o layout centralizado
com espaço na direita e esquerda .
Responder

07/02/2013

José

Pronto amigo acho que resolvemos seu problema
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%;
}
Responder

07/02/2013

Rachel Andrade

Oi, José, obrigada pelas respostas.
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.
Responder

07/02/2013

José

Primeiramente mil desculpas por estar lhe chamando de amigo ou invés de amiga.

Estarei criando algo aqui e lhe retorno com o código.
Responder

07/02/2013

José

Pronto amiga agora sim ficaram as margens laterais e sem barra de rolagem
altere apenas seu arquivo CSS.

Responder

07/02/2013

José

Pronto amiga agora sim ficaram as margens laterais e sem barra de rolagem
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%;
}
Responder

07/02/2013

Rachel Andrade

Acho que entendi sua ideia, José, mas aí você está usando larguras fixas, e eu preciso usar mesmo em porcentagem. Pois se eu usar um monitor com resolução diferente?
Responder

07/02/2013

José

Rachel acho que a solução ideal para você
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 ?

Responder

07/02/2013

Rachel Andrade

É que na verdade eu queria entender como funciona e montar meu próprio layout, de acordo com o desenho que passei no início.
Mas pelo visto não é tão simples.
Responder

07/02/2013

José

Sim com framework você monta seu proprio layout como imaginou no começo
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] http://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.
Responder

07/02/2013

Rachel Andrade

Obrigada, José.
Vou ver o que consigo por aqui, continuarei pesquisando.
Responder

07/02/2013

José

A disposição precisando é só postar que dentro da medida do possível
estarei ajudando.
Responder