Layout em CSS

index.xp · 17 de agosto de 2009

galera to iniciando nessa parte de design e quero ja comecar com as praticas mais modernas então vim pro CSS... to tentando fazer um layout aqui bem simples mas ta me dando uma dor de cabeça... seguinte: cabeçalho, rodape, side-bar do lado esquerdo e o content...

o **** aqui e o seguinte... o site nao tem tamanho especifico... ele deve se ajustar as dimensoes do navegador sempre preenchendo-o... porém ele tem tamanho MINIMO que no total nao deve ser menor que 800x600... eu ja fiz o seguinte:

HTML:

<body>
    <div class="Global">
        <div class="GlobalHeader">
            <p style="color:white">TESTE HEADER </p>
        </div>
        <div id="content">
            <div class="GlobalLeftColumn">
                <p>TESTE COLUNA</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p>FIM TESTE</p>
            </div>
            <div class="GlobalSub">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">            
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div class="GlobalFooter">
            <p style="color:White">FOOTER</p>
        </div>
    </div>
    </form>

e o meu CSS ta assim:

body
{
    text-align:center;
    background-color: #FFFFFF;
}
.Global
{
    width: 100%;
    height: 100%;
    min-height: 600px;
    min-width: 800px;
    padding: 0px;
    margin: 0px;
    background-color: #abcdef;
    position: relative;
    top: 0px;
    left: 0px;
}
.GlobalHeader
{
    border-width: 0px;
    padding: 0px;
    position: absolute;
    margin: 0px;
    height: 75px;
    min-width: 800px;
    width: 100%;
    background-color: Black;
    left: 0px;
    top: 0px;
}
.GlobalLeftColumn
{
    float:left;
    padding: 0px;
    position: absolute;
    margin: 0px;
    background-color: Blue;
    top: 75px;
    width: 200px;
    min-height: 325px;
    text-align:left;
    left: 0px;
    z-index:1;
}
.GlobalFooter
{
    clear:both;
    position:absolute;
    border-style: none;
    background-color:Black;
    min-width: 800px;
    height:75px;
    width: 100%;
}
.GlobalSub
{
    border-style: none;
    border-width: 0px;
    float: right;
    background-color: #fedcba;
    outline-width: 0px;
    position: relative;
    margin: 0px;
    min-height: 350px;
    width:100%;
    top: 75px;
    right: 0px;
    bottom: 75px;
    padding-left: 200px;
}
.Encarte
{
    border-style: none;
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    text-align: left;
    width: 100%;
    height: 100%;
    background-color: #AAAAAA;
    position: relative;
    overflow: visible;
}
#content
{
    margin:0px;
    width:100%;
    min-height:350px;
    position:absolute;
}

a ideia ai é a seguinte:

-um div que engloba tudo e garanta que a soma do que tiver dentro dele nao vai ser menor que 800x600

-1 div pro header que garanta que ele vai ter 75px de altura e que vai ocupar 100% da largura disponivel

-1div pro content sendo:

..1div para a sidebar e 1 para o content propriamente dito

e finalmente 1 div para o footer...

so que claro nao ta funcionando... primeiro: o footer nao ta obedecendo a ordem vertical e ta sobrepondo o header... e segundo o content-content ta estourando pra direita o div dele...

alguem pode ajudar ae?!?!?

dowlowd · 18 de agosto de 2009

Dá uma olhada neste código.

Vai ter que arrumar cores,...

estilo.css

@charset = "iso-8859-1";

#divConteiner{

width: 100%;

height: 100%;

min-height: 550px;

min-width: 800px;

border: solid 1px #cccccc;

}

#divTopo {

width: 98%;

margin: 1%;

height: 75px;

border: solid 1px #ff0000;

background: #ffefbd;

text-align:center;

}

#divCol1 {

width: 20%;

height: 400px;

border: solid 1px #0000ff;

margin-top: 5px;

margin-left: 1%;

float: left;

}

#divCol2 {

width: 77%;

height: 400px;

margin-left: 5px;

margin-top: 5px;

border: solid 1px #00ff00;

float: left;

}

#divRodape {

width: 98%;

height: 18px;

border: dotted 1px #000000;

margin-top: 10px;

margin-left: 1%;

clear: both;

text-align: center;

padding-top: 2px;

}

código

<!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-equip="Content-Type" content="text/html"; charset=iso-8859-1" />

<title>JANELAS</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="divConteiner">

<div id="divTopo">

<p>DIV TOPO</p>

</div>

<div id="divCol1">DIV COL1(MENUS)</div>

<div id="divCol2">CONTEUDO</div>

<div id="divRodape">© Copyright . Todos os direitos reservados</div>

</div>

</body>

</html>