Montar layout com divs

Front-end

07/02/2013

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á;
Rachel Andrade

Rachel Andrade

Curtidas 0

Respostas

José

José

07/02/2013

Amigo pelo que entendi você quer que tenha uma borda em todas as div`s ?
GOSTEI 0
Rachel Andrade

Rachel Andrade

07/02/2013

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.
GOSTEI 0
José

José

07/02/2013

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
GOSTEI 0
José

José

07/02/2013

Assim compreendi agora , você quer deixar o layout centralizado
com espaço na direita e esquerda .
GOSTEI 0
José

José

07/02/2013

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%;
}
GOSTEI 0
Rachel Andrade

Rachel Andrade

07/02/2013

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.
GOSTEI 0
José

José

07/02/2013

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.
GOSTEI 0
José

José

07/02/2013

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

GOSTEI 0
José

José

07/02/2013

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%;
}
GOSTEI 0
Rachel Andrade

Rachel Andrade

07/02/2013

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?
GOSTEI 0
José

José

07/02/2013

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 ?

GOSTEI 0
Rachel Andrade

Rachel Andrade

07/02/2013

É 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.
GOSTEI 0
José

José

07/02/2013

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] 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.
GOSTEI 0
Rachel Andrade

Rachel Andrade

07/02/2013

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

José

07/02/2013

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

Rachel Andrade

07/02/2013

Oi, Ricardo.
Estou passando para dar um retorno sobre essa questão. Acabei conhecendo o Bootstrap e estou montando a pagina com ele, é bem mais fácil que ficar inventando =)
Obrigada.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

07/02/2013

Ótima escolha, Rachel. O Bootstrap é um ótimo Framework.
Como você resolveu seu problema, vou marcar este tópico como Concluído.
GOSTEI 0
POSTAR