• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joxnas

Altura máxima- e altura mínima

3 mensagens neste tópico

Pagina: http://pixelgalaxy.awardspace.com/jlog.html

Percebo pouquíssimo de css.

O problema é:

Queria que quado houvesse conteúdo a mais dentro da div #back ela se expandisse. E queria que esta tivesse um tamanho mínimo(min-height)

Quem vir a página com o firefox vê que ha um problema: a div #back não se expande. Já com o InternetExplorer expande bem.

E já agora outro problema:

Como fazer uma div ter um tamanho mínimo possível sem utilizar "min-height: xpx" que não funciona em IE?

Agradecia ajuda.

Vou deixar aqui o codigo da pagina:

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css" title="syle" media="all">
#back
{
position:relative;
margin-top:0px;
margin-bottom:0px;
width:800px;
height:800px;;
background-repeat:repeat-y;
background-image:url(basebg.jpg);
}

body
{
margin-bottom:0px;
margin-top:0px;
background-image:url(bg.jpg);
}

#back p
{
margin-top:0px;
}

.midlle
{
margin-left:36px;
margin-right: 37px;
margin-top:0px;
margin-bottom:0px;
}



#header
{
height:165px;
background-image:url(header.jpg);
margin-top:0px;
margin-left:0px;
}


#menulist
{
position:relative;
margin:0px;
background-image:url(bgmenu.jpg);
background-repeat:repeat-x;
height:33px;
}


#menulist p
{
vertical-align:middle;
margin-top:5px;
}


#content
{
margin-top:10px;
width:557px;
margin-left: 7px;
float:left;
}

#contentt
{
margin-bottom:-2px;
width:557px;
background-image:url(contenttop.jpg);
background-repeat:no-repeat;
height:17px;
}

#contentm
{
width:557px;
background-image:url(contentmeio.jpg);
background-repeat:repeat-y;
}

#contentw
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.8em;
color:#666666;
margin:20px;
margin-top:0px;
margin-bottom:0px;
}
#contentw p
{
margin:0px;
text-indent: 3em;
}
#contentb
{
width:557px;
background-image:url(contentbuttomjpg.jpg);
background-repeat:no-repeat;
height:17px;
}




#menu
{

width:161px;
float:right;
margin-top:10px;
}
#menut
{
width:161px;
margin-bottom:-2px;
background-image:url(menutop.jpg);
background-repeat:no-repeat;
height:17px;
}
#menum
{
width:161px;
margin-top:0px;
background-image:url(menumeio.jpg);
background-repeat:repeat-y;
}
#menuw
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.8em;
color:#666666;
margin:20px;
margin-top:0px;
margin-bottom:0px;
}
#menuw p
{

margin:0px;
text-indent: 3em;
}
#menub
{
width:161px;
background-image:url(menubuttom.jpg);
background-repeat:no-repeat;
height:17px;
}


#footer
{

float:left;
width:715px;
margin-left: 7px;
margin-top:7px;
}
#footert
{
width:718px;
margin-bottom:-2px;
background-image:url(footertop.jpg);
background-repeat:no-repeat;
height:17px;
}
#footerm
{
margin-top:0px;
width:718px;
background-image:url(footermeio.jpg);
background-repeat:repeat-y;
}
#footerw
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.8em;
color:#666666;
margin:20px;
margin-top:0px;
margin-bottom:0px;
}
#footerw p
{

margin:0px;
text-indent: 3em;
}
#footerb
{
height:17px;
margin-top:0px;
width:718px;
background-image:url(footerbuttom.jpg);
background-repeat:no-repeat;
}

</style>

<body>
<div align="center"><!--1-->
<div id="back" ><!--2-->
<div class="midlle"><!--3-->
<div id="header"></div>
<div id="menulist"></div>
<div align="left"><!--4-->

<div id="content"><!--5-->
<div id="contentt"></div>
<div id="contentm"><!--6-->
<div id="contentw"><!--7-->
<p> (em alguns casos <strong>projeto</strong> ou <strong>projecto</strong>) é um esforço  criativo relacionado à configuração, concepção, elaboração e  especificação de um artefato. Esse esforço normalmente é orientado por  uma intenção ou objetivo, ou para a solução de um problema.</p>

  <p>Exemplos de coisas que se podem projetar incluem muitos tipos de <a href="http://pt.wikipedia.org/wiki/Objeto" title="Objeto">objetos</a>, como utensílios domésticos, vestimentas, máquinas, ambientes, e também <a href="http://pt.wikipedia.org/wiki/Imagem" title="Imagem">imagems</a>, como em peças gráficas, famílias de letras, livros, e (recentemente) interfaces de programas.</p>
  <p><strong>Design</strong> é também a profissão que projeta os artefatos. Existem  diversas especializações, de acordo com o tipo de coisa a projetar.  Atualmente as mais comuns são o <a href="http://pt.wikipedia.org/wiki/Design_de_produto" title="Design de produto">design de produto</a>, <a href="http://pt.wikipedia.org/wiki/Design_gr%C3%A1fico" title="Design gráfico">design gráfico</a> e o <a href="http://pt.wikipedia.org/wiki/Design_de_moda" title="Design de moda">design de moda</a>. O profissional que trabalha na área de <em>design</em> é chamado de <a href="http://pt.wikipedia.org/wiki/Designer" title="Designer">designer</a>.</p>

  <p>Finalmente, o design pode ser também uma qualidade daquilo que foi projetado.</p>
  <p>O termo deriva, originalmente, de <em>designare</em>, palavra em <a href="http://pt.wikipedia.org/wiki/Latim" title="Latim">latim</a>, sendo mais tarde adaptado para o inglês <em>design</em>. Houve uma série de tentativas de tradução do termo, mas os possíveis nomes como <em>projética industrial</em> que acabaram em desuso.</p>

  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>

  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
</div><!--7-->
</div><!--6-->

<div id="contentb"></div>
</div><!--5-->

</div><!--4-->

<div id="menu"><!--4-->
<div id="menut"></div>
<div id="menum"><!--5-->
<div id="menuw"><!--6-->lol
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
</div><!--7-->
</div><!--7-->
<div id="menub"></div>
</div><!--6-->


<div id="footer"><!--6-->
<div id="footert"></div>
<div id="footerm"><!--7-->
<div id="footerw"><!--8--> 
<strong>Jlog 2008</strong> - All rights reserved :: <strong>Contact</strong> - joxnas4@gmail.com </div>
<!--8-->
</div><!--7-->
<div id="footerb"></div>
</div><!--6-->

</div><!--5-->

</div><!--4-->

</div><!--3-->

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O min-height podes trata-lo com javascript... fiz o mesmo para min-width portanto o codigo deve ser parecido

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O ideal serias usar um qualquer hack (ou melhor ainda, conditional comments) para o IE6, de forma a que tenhas o seguite para Firefox, Opera, IE7, Safari e afins:

#back

{

min-height: 800px;

}

usado o tal hack ou conditional comments, de forma á que só o IE6 tenha acesso á esta folha de estilos, tens isto:

#back

{

height: 800px;

}

O IE6 não suporta min-height, mas uma vez que também tem um bug na interpretação do height, isto funciona. Basicamente, o height do IE6 já é efectivamente um min-height.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora