Ir para conteúdo
Fórum Script Brasil
  • 0

configuração de layout css


Eric Freitas

Pergunta

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 por Eric Freitas
Link para o comentário
Compartilhar em outros sites

16 respostass a esta questão

Posts Recomendados

  • 0

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?

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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?

Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

  • 0

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. ;)

Link para o comentário
Compartilhar em outros sites

  • 0

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 por Eric Freitas
Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...