configuração de layout css

Eric Freitas · Julho 20, 2010

Olá pessoal

bom pessoa tenho uma div page q tem conteúdo estático e dinamico e também tenho a div footer que não estão agindo como eu quero.

o problema é quando o conteúdo da div page é maior que 100% a div footer ao rolar a barra permanece no seu lugar ela não vai ao fim da página e a div page também parece não "esticar" de acordo com o conteúdo. como contornar esse problema

index.html

<!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>
<!-- (...) -->
</head>
<body>
    <div id="dialog-message" title="">
        <p id="textStatus"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span></p>
        <p id="errorThrown"></p>
    </div>

    <div id="header" class="block">
        <span>http://www.tiapunk.com.br</span>
        <div class="selectTheme"></div>
    </div>

        <div class="page">
        (...)
        </div>
        <div id="playlist" title="PlayList"></div>[/b]
        
     </div>
    <br style="clear:both;" />
        <div id="footer" class="block"><span>Todos os Direitos Reservados © - Design By TiaPunk</span></div>
</body>
</html>

css.css[/b

.page{
    position:absolute;
    background-image:url(../backgrounds/tiapunkSiteLayout001.png);
    background-position: center top;
    min-width: 1024px;
    max-width: 1024px;
    margin: 0 auto;
    left: 50%;
    margin-left:-512px;
    
    
    min-height: 100%;
    max-height: auto;
    
    z-index:1;
}

#footer{
    bottom:0;
}

    

.block{
    position: absolute;
    background-color:#333;
    z-index:2;
    
    margin: 0;
    padding: 0;
        
    height: 20px;
    width:100%;
    
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #FFF;
    font-weight: bold;
    
    opacity:0.65;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);    
}
.block span{
    position:relative;
    top: 3px;

Editado Julho 20, 2010 por Eric Freitas

*FIT* · Julho 20, 2010

Boa Tarde Eric, tem o link da página para que possamos dar uma olhada ao certo no que acontece?

Mas pode definir a max-width como auto em vez de dar um tamanho para ele, assim ele se ajusta conforme o conteúdo.

Eric Freitas · Julho 20, 2010

olá FIT muito obrigado pela resposta na verdade esse max-width: já está setado. infelizmente não tenho como passar link pois não tenho nenhum serv de teste online com php/mysql e o site é todo em ajax

*FIT* · Julho 20, 2010

Certo, bom sem link fica um pouco mais dificil, mas vamos ver o que possamos fazer.

Em relação ao max-width eu quis dizer height, perdão, mas vi que já está realmente.

A div page não acompanha o texto? ou ela apenas cresce por cima da footer?

Eric Freitas · Julho 20, 2010

assim tenho elementos dentro do page se os elementos derem o height maior que 100% e a barra de rolagem do corpo aparecer o fundo da .page e o footer não vão para o fim da página acho q é algo relacionado ao posicionamento absolute posso enviar uma foto de como fica?

*FIT* · Julho 20, 2010

Você disse que tem elementos dentro do page, mas no código que postou, não tem elemento apenas texto na page.

Precisa ver como esses elementos estão configurados dentro dela.

Em todo caso pode postar a imagem sim.

Eric Freitas · Julho 20, 2010

http://www.4shared.com/photo/inTycITB/Untitled-1.html

é assim consegui fazer com que o conteúdo de page acompanhasse os elementos contidos dentro dele mas queria que page ficasse sempre 100% e que o footer ficasse no final da pag mas se meu page estiver absolute o footer vai la pra cima

*FIT* · Julho 20, 2010

Mas na imagem que você "upou" está certo, não tem erro.

Qual a intenção do position absolute na div page?

Eric Freitas · Julho 20, 2010

então a div page com position absolute é para ficar com min height 100%

mas com isso o footer vai la pra cima como se não tivesse nada coloquei bottom:0 no footer mas se o conteudo passar de 100% e a barra de rolagem aparecer esse footer fica na frente do conteudo de page não vai para o final da pagina entende?

*FIT* · Julho 21, 2010

Entendi, mas qual a lógica em determinar um min-height: 100%?

O min-height é a altura minima, se você der um valor de 100%, está atribuindo a maior altura que ele pode ter, por isso não vejo lógica nisso.

Determine um valor para o min-height, 600 ou 800px não sei, mas não deixe com 100%, mesmo porque o auto do max-height já vai cuidar para que a div cresça caso preciso.

Eric Freitas · Julho 21, 2010

então a lógica do min-height:100% é exatamente isso porque se o conteúdo fosse menor que o 100% do body a div iria ficar no tamanho da tela..

*FIT* · Julho 21, 2010

Entendi,

min-height: 100% - Assim você está dizendo que a altura minima, é do tamanho da tela. Certo?

Logo após, você determina o max-height como automático, não sei se eu estou pensando errado, mas me parece que isso vai fazer com que a div se confunda um pouco, pois em alguns navegadores, pode ser que interprete isso de outra maneira.

Mas ainda assim, não sei se seria ai o seu problema. Já tentou debugar na firebug?

Acabei de ver também que além de determinar o min-height como 100% e o max como auto, você também define que os dois terão 1024px. :wacko:

E outra coisa, nesse código que você postou, existem 6 divs sendo abertas, e 7 sendo fechadas, dá uma corrigida nisso também. ;)

BetiN · Julho 22, 2010

Aqui que pode tá errado cara

#footer{
    bottom:0;
}

O certo seria:

#footer{
    position:absolute;
    bottom:0px;
}

Eric Freitas · Julho 22, 2010

betin tinha feito isso contudo se o conteúdo de page for maior que o 100% footer fica por cima do conteudo e não ao final da pagina.

se você analizar o footer tem uma classe chamada block que passa position absolute cor de fundo entre outros parametros

FIT quanto ao width era isso mesmo min e max 1024 sei que eu poderia usar somente width mas nem mudei isso e quanto as divs abertas a mais é porque não passei o index inteiro

mesmo assim eu dei uma modificada no script todo não vou mais usar esse footer desta maneira que estava imaginando

<!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>TiaPunk Project</title>
<link type="text/css" id="theme" href="css/black-tie/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />    
<link href="css/css.css" rel="stylesheet" type="text/css"  />  

<!-- JQUERY / JQUERYUI -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jsonp-2.1.2.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'pt'
  }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
    <div id="teste"></div>
    <div id="background"><img src="backgrounds/digital-art_1bdcf4ba.jpg" /></div>
    <div id="dialog-message" title="">
        <p id="textStatus"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span></p>
        <p id="errorThrown"></p>
    </div>


    <div id="header" class="block">
        <span>http://www.tiapunk.com.br</span>
    </div>

    <div class="page">
        <div class="logo">
            <img src="images/logo.png"  />
        </div>
        <form>
            <div id="menu">
                <input type="radio" id="home" name="radio"/><label for="home">Home</label>
                <input type="radio" id="discografia" name="radio" /><label for="discografia">Discografia</label>
                <input type="radio" id="media" name="radio" /><label for="media">Media</label>
                <input type="radio" id="agenda" name="radio" /><label for="agenda">Agenda</label>
                <input type="radio" id="contato" name="radio" /><label for="contato">Contato</label>
            </div>
        </form>
          <div class="ads_top"><img src="ads/728 x 90.gif" /></div>
        <br style="clear:both;" />    
        <div id="content">
            <div class="scroll">
                <!-- AJAX CONTENT -->
            </div>
            <div id="google_translate_element"></div>
            <br />
            <br />
            <div class="ads_content"><img src="ads/250x250.gif" /></div>
        </div>
  
        <br style="clear:both;" />
           
     </div>
    <div id="playlist" title="PlayList"></div>
    <div id="footer"><span>Todos os Direitos Reservados © - Design By TiaPunk</span></div> 
   
</body>
</html>

@charset "utf-8";
/* CSS Document */

body,div,span,p,ul,li,h3 {
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

/*
div{
    background-color: #333;
    
    opacity:0.65;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);
}

*/
body{
    
    
}
#background{
    position:absolute;
    height:100%;
    width:100%;
    z-index:0;    
}
#background img{
    height:100%;
    width:100%;    
}


h3{
    font-family: Verdana, Geneva, sans-serif;
}

ul{
    list-style-type:none;    
}

#header{
    top:0;
}
#footer{
    position:relative;
    width:1024px;
    background-image:url(../backgrounds/R.png);
    background-repeat:no-repeat;
    height:37px;
    background-position: 17px;
    left: 50%;
    margin-left:-512px;
    z-index:1;
}
#footer span{
    width:512px;
    margin-left:400px;    
}
.block{
    position:relative;
    float:none;
    background-color:#333;
    z-index:2;
    
    margin: 0;
    padding: 0;
        
    height: 20px;
    width:100%;
    
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #FFF;
    font-weight: bold;
    
    opacity:0.65;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);    
}
.block span{
    position:relative;
    top: 3px;    
}

/*
PAGE
*/

.page{
    position:relative;
    background-image:url(../backgrounds/tiapunkSiteLayout001.png);
    background-position: center top;
    min-width: 1024px;
    max-width: 1024px;
    margin: 0 auto;
    left: 50%;
    margin-left:-512px;
    
    
    min-height: 100%;
    
    z-index:1;
}
/*
PAGE->Logo
*/

.page .logo{
    position:relative;
    
    float:left;
    z-index:1;
    margin-top: 18px;
    margin-left: 65px;        
}
.page .logo img{
    width:250px;
    height:185px;            
}
/*
PAGE->Menu
*/
.page #menu{
    position:absolute;
    width:500px;
    left:50%;
    margin-left:5px;
    margin-top:15px;
    z-index:3;
}
/*
ADS GOOGLE
*/

.ads_top{
    position:absolute;
    right:0;
    margin-right:50px;
    top:80px;
    width:728px;
    height:90px;
    z-index:3;
}

.ads_content{
    position:relative;
    float:right;
    width:250px;
    height:250px;
}

#google_translate_element{
    margin-right: 80px;
    position:relative;
    margin-bottom: 20px;
    float:right;
}

/*
PAGE->content
*/

.page #content{
    position:relative;
    width: 894px;
    margin-top:15px;
    margin-left:80px;
    margin-right:100px;
    bottom:20px;
    z-index: 2;
}

.page .scroll{
    float:left;
    min-width:600px;
    max-width: 600px;
    margin-right:10px;    
}
.page #tabs-1 p{
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: justify;
    text-indent: 15px;
        
}
#albuns{
    position:relative;
}
.thumbnail{
    float:left;
    text-align:center;
    border: 1px dotted #999;
}
.thumbnail h3{
    margin-top:5px;
    margin-bottom:5px
}

#list{
    margin-left: 175px;    
}

#list li{
    cursor:pointer;
}

#feedback { font-size:12px; }
#albuns .ui-selecting { background: #999; }
#albuns .ui-selected { background: #333; color: white; }
#albuns { list-style-type: none; margin: 0; padding: 0; width: 100%; }

#list li {
    margin-bottom: 15px;    
}

Editado Julho 22, 2010 por Eric Freitas

*FIT* · Julho 22, 2010

Conseguiu resolver?

Eric Freitas · Julho 23, 2010

então ainda segue a dúvida mas eu resolvi de uma outra forma o problema

tem algum serv gratis pra eu posta o html pra gente conseguir resolver a duvida de como deixar algo sempre no final da pagina

*FIT* · Julho 23, 2010

Bom, busca no google que existem vários, mas a na verdade não tem muito segredo pra fazer isso, deve ser algum elemento da sua página que deve estar fazendo isso.

Aqui no fórum mesmo, na aréa de Classificados e serviços, você encontra bastante serviços de hospedagem.

Entrar

configuração de layout css

Pergunta

Link para o comentário

Compartilhar em outros sites

16 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns