Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André - Editor

[Resolvido] Div com height automático...

Por , em Desenvolvimento frontend

Recommended Posts

André - Editor    0

André - Editor
Postado

Caros amigos, estou acertando detalhes finais do site que estava programando em HTML/CSS e me surge um problema muito incomodo:

 

http://www.bmfa.com.br/samples/cervim/noticia.html

 

Nesta página (e em outras do site) as DIV's que criei para o conteúdo (divMasterNoticia), tem altura (height) fixo.

 

Porém estou desde o início da programação tentando criar uma maneira para que esse height fosse AUTO. Quem tiver firebug pode testar com HEIGHT auto e vai ver que aí a div não terá o tamanho certo e por consequencia também não exibirá o fundo (que é uma imagem repeat-y) e também não empurrará a border do rodapé para o local certo...

 

Em resumo, não seria problema usar o height FIXO fossem dois detalhes:

 

1 - Quanto eu tiro ou coloco algo a mais nos textos, tem que refazer o height para ficar certo... ele não vai automático :/

 

2 - Determinados navegadores renderizam as fontes e os line-heights levemente diferentes, o que faz com que o texto seja um pouco maior em alguns navegadores, e aí a div fica menor do que deveria (da pra ver isso no chrome e no opera se não me engano).

 

Eu tentei usar o height: auto e o 100% (inclusive usando o macete de por o body com height 100% também) e nenhum método funcionou.

 

Como fazer essa div (divMasterNoticia) ficar com height AUTOMÁTICO até o tamanho alí do fim do texto pelo menos?

 

Acho que encontrei o problema, pelo que li não posso colocar o parâmetro height e aí deveria se resolver, entretando vi que o problema mesmo é o fato de ter também as divs internas em FLOAT, e aí é que está dando caquinha...

 

Dá pra resolver sem ter que tirar o float?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Severino    3

André Severino
Postado

Coloca o cód. para o pessoal ver e analisar melhor, mas é o seguinte se é a div masters não precisa inserir o height deixa sem nada que automaticamente ele se ajusta ao navegador.

 

E o float é outra história se está dentro desta div não tem nada de mais, tente utilizar um overflow:hidden; para ver se resolve também.

 

Coloca o cód. que amanhã eu vejo com calma :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

André - Editor    0

André - Editor
Postado

Deixei essa pagina aqui errada de proposito pra vcs entenderem:

 

http://www.bmfa.com.br/samples/cervim/esportes.html

 

 

Segue os codigos:

 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>Cervim</title>
</head>

<body>
<div class="mainDiv">
   	<div class="bgBorderTop"></div>
   	<div class="logo">
       	<a href="index.html" target="_self"><img class="imageLink" src="imgs/logo.png" /></a>
       </div>
       <div class="login"></div>
       <div class="menu">
           <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="47">
           	<param name="allowScriptAccess" value="sameDomain" />
           	<param name="allowNetworking" value="all" />
               <param name="movie" value="swf/menu.swf" />
               <param name="wmode" value="transparent" />
               <param name="flashvars" value="linkBt01=quem_somos.html&linkBt02=habreab.html&linkBt03=esportes.html&linkBt04=cursos.html&linkBt05=parceiros.html&linkBt06=fotos.html&linkBt07=noticias.html&linkBt08=contato.html" />
               <param name="quality" value="high" />
               <embed type="application/x-shockwave-flash" allowScriptAccess="sameDomain" allowNetworking="all" src="swf/menu.swf" width="1024" height="47" wmode="transparent" flashvars="linkBt01=quem_somos.html&linkBt02=habreab.html&linkBt03=esportes.html&linkBt04=cursos.html&linkBt05=parceiros.html&linkBt06=fotos.html&linkBt07=noticias.html&linkBt08=contato.html" allowScriptAccess="sameDomain" quality="high" />
		</object>
       </div>
       <div class="pageTitles">
       	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="160">
           	<param name="allowScriptAccess" value="sameDomain" />
           	<param name="allowNetworking" value="all" />
               <param name="movie" value="swf/esportes.swf" />
               <param name="wmode" value="transparent" />
               <param name="quality" value="high" />
               <embed type="application/x-shockwave-flash" allowScriptAccess="sameDomain" allowNetworking="all" src="swf/esportes.swf" width="1024" height="160" wmode="transparent" allowScriptAccess="sameDomain" quality="high" />
		</object>
       </div>
       <div class="divMasterEsportes">
       	<div class="habLinks">
           	<img class="imageLink" src="imgs/esporte_links01.jpg" /><img class="imageLink" src="imgs/esporte_links02.jpg" /><img class="imageLink" src="imgs/esporte_links03.jpg" /><img class="imageLink" src="imgs/esporte_links04.jpg" />
           </div>
        <span class="textEsportes"><span class="paragrafo"></span><span class="bfText">A prática de atividade física</span> e/ou esportiva por portadores de algum tipo de deficiência, seja ela mental ou física, pode proporcionar a oportunidade de testar seus limites e potencialidades, prevenir as enfermidades secundárias à sua deficiência, além de promover sua integração social. As atividades favorecem a readaptação ou adaptação física do praticante, bem como a melhora na esfera psíquica pela melhora da sua auto-estima, pela integração social e redução da agressividade.<br /><br /><span class="paragrafo"></span>Por isso, o CERVIM faz questão de oferecer aos seus alunos, pacientes e atletas oportunidades para engajamento em atividades esportivas, seja com o objetivo lúdico de se movimentar, jogar ou praticar um esporte, seja como atividade física regular. Em parceria com CPB (Comitê Paraolímpico Brasileiro), promove competições paradesportivas e seus atletas poderão competir, e competem, mundialmente em esportes como a Bocha, Petra (tricicleta), Natação e Hipismo Adaptado, todos oferecidos e com o suporte do Centro.<br /><br /><span class="paragrafo"></span><span class="bfText">A prática de atividade física</span> e/ou esportiva por portadores de algum tipo de deficiência, seja ela mental ou física, pode proporcionar a oportunidade de testar seus limites e potencialidades, prevenir as enfermidades secundárias à sua deficiência, além de promover sua integração social. As atividades favorecem a readaptação ou adaptação física do praticante, bem como a melhora na esfera psíquica pela melhora da sua auto-estima, pela integração social e redução da agressividade.<br /><br /><span class="paragrafo"></span>Por isso, o CERVIM faz questão de oferecer aos seus alunos, pacientes e atletas oportunidades para engajamento em atividades esportivas, seja com o objetivo lúdico de se movimentar, jogar ou praticar um esporte, seja como atividade física regular. Em parceria com CPB (Comitê Paraolímpico Brasileiro), promove competições paradesportivas e seus atletas poderão competir, e competem, mundialmente em esportes como a Bocha, Petra (tricicleta), Natação e Hipismo Adaptado, todos oferecidos e com o suporte do Centro.</span>
	</div>
       <div class="rodape"><img src="imgs/rodape.png" /></div>
       <div class="bgBorderBottom"></div>
   </div>
</body>
</html>

 

CSS:

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

body {
background-color: #FFF;
/*background-image:url(imgs/tempFundo.jpg);
background-position:top center;
background-repeat:no-repeat;*/
}


/* Home And Global Styles */
.bgBorderTop{
background-image: url("imgs/bg_border_top.png");
background-position: top left;
background-repeat: no-repeat;
position: relative;
width: 1030px;
height: 10px;
}

.mainDiv{
   background-image: url("imgs/bg_border.png");
   background-position: center top;
   background-repeat: repeat-y;
   margin: auto;
   position: relative;
   text-align: center;
   width: 1030px;
}

.mainDivIndex{
   background-image: url("imgs/bg_border.png");
   background-position: center top;
   background-repeat: repeat-y;
   height: 743px;
   margin: auto;
   position: relative;
   text-align: center;
   width: 1030px;
}

.logo{
   float: left;
   height: 100px;
   left: 16px;
   margin-left: 5px;
   margin-top: 10px;
   position: relative;
   width: 310px;
}

.imageLink{
border: 0px;
float: left;
}

.login{
   float: right;
   height: 70px;
   margin-right: 19px;
   margin-top: 36px;
   position: relative;
   width: 210px;
}

.menu{
   height: 47px;
   margin-left: 3px;
   margin-top: 122px;
   position: relative;
   width: 1024px;
}

.slideHome{
   height: 232px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.goldLine{
   float: left;
   height: 5px;
   line-height: 0px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.thumbsHome{
   float: left;
   height: 139px;
   line-height: 0px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.homeText01{
   background-color: #FCFBEF;
   border-right: 1px solid #F0EFDD;
   float: left;
   height: 150px;
   margin-left: 3px;
   position: relative;
   width: 341px;
   z-index: 9;
}

.bfHomeText01{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#487235;
}

.homeText02{
   background-color: #FCFBEF;
   border-right: 1px solid #F0EFDD;
   float: left;
   height: 150px;
   position: relative;
   width: 341px;
   z-index: 8;
}

.bfHomeText02{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#98a324;
}

.homeText03{
   background-color: #FCFBEF;
   float: left;
   height: 150px;
   position: relative;
   width: 340px;
}

.bfHomeText03{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#c9b62d;
}

.textHome{
   color: #767674;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 12px;
   height: 50px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 25px;
   position: relative;
   text-align: justify;
   width: 300px;
}

.saibaMais01{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration:underline;
position:absolute;
bottom:10px;
right:11px;
font-size:14px;
font-weight:bold;
color:#487235;
}

.saibaMais02{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration:underline;
position:absolute;
bottom:10px;
right:11px;
font-size:14px;
font-weight:bold;
color:#98a324;
}

.saibaMais03{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration:underline;
position:absolute;
bottom:10px;
right:11px;	
font-size:14px;
font-weight:bold;
color:#c9b62d;
}

.divGrayLine01{
border-color:#F0EFDD;
border-left:1px solid #F0EFDD;
height:150px;
left:3px;
position:absolute;
top:553px;
width:1px;
}

.divGrayLine02{
border-color:#F0EFDD;
border-left:1px solid #F0EFDD;
height:150px;
left:341px;
position:absolute;
top:553px;
width:1px;
}

.divGrayLine03{
border-color:#F0EFDD;
border-left:1px solid #F0EFDD;
height:150px;
left:684px;
position:absolute;
top:553px;
width:1px;
}

.divGrayLine04{
border-color:#F0EFDD;
border-left:1px solid #F0EFDD;
height:150px;
left:1023px;
position:absolute;
top:553px;
width:1px;
}

.flowerHome{
height:58px;
left:0px;
position:absolute;
bottom:0px;
width:56px;
}

.rodape{
   height: 42px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
   z-index: 9;
}

.bgBorderBottom{
   background-image: url("imgs/bg_border_bottom.png");
   background-position: left top;
   background-repeat: no-repeat;
   float: left;
   height: 10px;
   margin-top: -4px;
   position: relative;
   width: 1030px;
   z-index: 1;
}

.bgBorderBottomIndex{
   background-image: url("imgs/bg_border_bottom.png");
   background-position: left top;
   background-repeat: no-repeat;
   float: left;
   height: 10px;
   margin-top: 38px;
   position: relative;
   width: 1030px;
   z-index: 1;
}

.pageTitles{
   background-color: #FCFBF7;
   height: 160px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
   z-index: 9;
}

.paragrafo{
margin-left: 38px;
}

.bfText{
font-size:16px;
font-weight:bold;
color:#98a324;
}

.linksNoBorder{
border: 0 none;
}

/* Quem Somos Styles */
.divMasterQS{
   background-color: #FCFBF7;
   height: 865px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.textQuemSomos01{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 20px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

.bigFlowerQS{
   float: left;
   height: 93px;
   margin-top: 15px;
   position: relative;
   width: 200px;
}

.textQuemSomos02{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 15px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

.fotoQS{
float: right;
   height: 265px;
   margin-left: 10px;
   width: 480px;
}

/* Habilitação e Reabilitação Styles*/
.divMasterHab{
   background-color: #FCFBF7;
   height: 325px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.habLinks{
   background-color: #FCFBF7;
   line-height: 0px;
   position: relative;
   width: 1024px;
}

.textHab{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 20px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

/*Esportes Styles*/
.divMasterEsportes{
   background-color: #FCFBF7;
   height: 300px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.habLinks{
   background-color: #FCFBF7;
   line-height: 0px;
   position: relative;
   width: 1024px;
}

.textEsportes{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 20px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

/*Esportes Styles*/
.divMasterCursos{
   background-color: #FCFBF7;
   height: 130px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.textCursos{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 20px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

/*Parceiros Styles*/
.divMasterParceiros{
   background-color: #FCFBF7;
   height: 441px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.parceirosLinks{
   background-color: #FCFBF7;
   line-height: 0px;
   position: relative;
   width: 1024px;
}

.textParceiros{
   color: #979797;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 20px;
   position: relative;
   text-align: justify;
   width: 975px;
   z-index: 8;
}

/*fotos Styles*/
.divMasterFotos{
   background-color: #FCFBF7;
   height: 410px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.slideFotos{
   background-color: #FCFBF7;
   float: left;
   line-height: 0px;
   margin-left: 21px;
   position: relative;
   top: 20px;
   width: 496px;
}

.fotoSlide{
   left: 19px;
   position: absolute;
   top: 10px;
   width: 460px;
}

.thumbsSlide{
   background-color: #FCFBF7;
   float: right;
   margin-right: 22px;
   position: relative;
   top: 24px;
   width: 467px;
}

.faixaThumbSlide01{
background-color: #ecebe0;
height: 88px;
width: 465px;
border: solid 1px #bebfb1;
}

.faixaThumbSlide02{
background-color: #dbdaca;
height: 88px;
width: 465px;
border: solid 1px #bebfb1;
}

.thumbsClass{
   float: left;
   margin-left: 13px;
   margin-top: 11px;
}

/*noticias Styles*/
.divMasterNoticias{
   background-color: #FCFBF7;
   height: 430px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.noticiasPrincipais{
   background-color: #E7E6DB;
   border-bottom: 1px solid #CBCAA6;
   border-right: 1px solid #CBCAA6;
   float: left;
   height: 178px;
   position: relative;
   width: 511px;
}

.borderThumbImgNoticia{
   background-color: #FCFBF7;
   border: 0 none;
   float: left;
   margin-left: 24px;
   margin-top: 25px;
   position: relative;
}

.thumbImgNoticia{
   background-color: #FCFBF7;
   border: 0 none;
   float: left;
   margin-left: -160px;
   margin-top: 38px;
   position: relative;
}

.dataNoticiaPrincipal{
   background-color: #716F4B;
   color: #E7E6DB;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 13px;
   font-weight: bold;
   height: 16px;
   margin-left: 10px;
   margin-top: 27px;
   position: relative;
   width: 55px;
}

.titNoticiaPrincipal{
   color: #716F4B;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 18px;
   margin-left: -56px;
   margin-top: 49px;
   position: relative;
   text-align: left;
   width: 285px;
}

.textNoticiaPrincipal{
   color: #908E6A;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 13px;
   margin-left: 8px;
   position: relative;
   text-align: justify;
   width: 285px;
}

.lerMaisNoticiaPrincipal{
   color: #908E6A;
   float: right;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 12px;
   margin-right: 49px;
   margin-top: 3px;
   position: relative;
   text-decoration: underline;
}

.imgLerMaisNoticiaPrincipal{
   float: right;
   margin-right: -72px;
border: 0 none;
}

.divNoticiasLine{
background-color: #edece3;
width: 1023px;
height: 50px;
max-height: 50px;
border-bottom: 1px solid #CBCAA6;
border-right: 1px solid #CBCAA6;
float: left;
}

.setaDataNoticias{
   float: left;
   margin-top: 7px;
}

.dataNoticiaLine{
   color: #E7E6DB;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 13px;
   font-weight: bold;
   margin-left: -69px;
   margin-top: 17px;
   position: relative;
}

.textNoticiaLine{
   color: #716F4B;
   float: left;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 16px;
   margin-left: 10px;
   margin-top: 15px;
   position: relative;
}

.lerMaisNoticiaLine{
   color: #908E6A;
   float: right;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 12px;
   margin-right: 49px;
   margin-top: 17px;
   position: relative;
   text-decoration: underline;
}

.imgLerMaisNoticiaLine{
   float: right;
   margin-right: -72px;
   margin-top: 13px;
border: 0 none;
}

.indexNoticias{
   color: #716F4B;
   float: right;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 12px;
   margin-right: 25px;
   margin-top: 15px;
   position: relative;
}

/*noticia Styles*/
.divMasterNoticia{
   background-color: #FCFBF7;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.noticiaTit{
background-color: #edece3;
width: 1024px;
height: 50px;
max-height: 50px;
border-bottom: 1px solid #CBCAA6;
text-align: left;
}

.setaDataNoticiaTit{
   margin-top: 7px;
}

.dataNoticiaTit{
   bottom: 13px;
   color: #E7E6DB;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 13px;
   font-weight: bold;
   margin-left: -73px;
   position: relative;
}

.textNoticiaTit{
   bottom: 9px;
   color: #636145;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 24px;
   font-weight: bold;
   margin-left: 35px;
   position: relative;
   text-align: left;
}

.textNoticia{
   color: #979797;
   font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
   font-size: 14px;
   line-height: 24px;
   margin-left: 25px;
   margin-top: 25px;
   position: relative;
   text-align: justify;
   width: 975px;
}

.fotoNoticia{
float: right;
   height: 265px;
   margin-left: 10px;
   width: 480px;
}

/*contatos Styles*/
.divMasterContatos{
   background-color: #FCFBF7;
   height: 434px;
   margin-left: 3px;
   position: relative;
   width: 1024px;
}

.contatosLinks{
   background-color: #FCFBF7;
   line-height: 0px;
   position: relative;
   width: 1024px;
}

 

Bom, pra quem entrar agora no site vai ver que eu refiz todo o código, tirei os floats das divs, e os height's das divsMaster.

 

Agora ta tudo certinho :D

 

Só no IE7 que tem uns detalhes fora do lugar, irei terminar amanhã.

 

Mesmo assim, se quiserem dizer algo sobre o código, agradeço!

 

Abraços e obrigado ae!

 

E obrigado ae André (meu xará! :D ) pela ajuda cara!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Acredito que tenha havido algum erro de interpretação quanto ao leiaute.

 

Não foi possível verificar, nem mesmo na página que foi disponibilizada depois mas, como pude verificar na página referente aos cursos, acredito que o seu intento seja de que o rodapé esteja sempre no fim da janela.

 

Exceto a imagem da notícia, não vi nenhum elemento que necessite de float na página postada. Navegando pelo site sim, mas nada que seja muito difícil de se controlar utilizando os seletores corretos.

 

Fazendo uma leitura do seu leiaute, consigo separar algumas camadas:

 

Verticalmente a nível 1, temos:

 

Topo, Menu, Cabeçalho, (eventualmente) Submenu, Conteúdo e Rodapé.

 

Horizontalmente, a nível 1, temos:

 

Topo

Logo

Login

 

Submenu

Subitems

 

A técnica de posicionar o rodapé nos pede que nos utilizemos de uma div#tudo, ou o contêiner global que receberá os elementos.

 

Isto nos gera uma marcação semelhante a:

 

<body>
   <div id="tudo">
       <h1></h1>                             <!-- logo -->
       <form></form>                         <!-- login -->
       <object class="menu"></object>
       <object class="cabecalho"></object>
       <ul></ul>                             <!-- submenu -->
       <div></div>                           <!-- conteudo -->
       <p></p>                               <!-- rodape -->
   </div>
</body>

 

Enquanto a sua marcação nos oferece:

 

<body>
   <div id="maindiv"><!-- equivalente à 'tudo' -->
       <div id="bgbordertop"></div><!-- desnecessária -->
       <div id="logo"></div>
       <div id="login"></div>
       <div id="menu"></div>
       <div id="mastertitles"></div><!-- equivalente à 'cabecalho' -->
       <div id="rodape"></div>
       <div id="bgborderbottom"></div><!-- também desnecessária -->
   </div>
</body>

 

Veja que não se faz necessário envolver cada elemento do site em um DIV para identificação, podemos nos utilizar de seus valores e, como são únicos, conseguimos identificá-los pelo seu significado.

 

As bordas, podem ser feitas com imagens, enquanto os espaçamentos com as propriedades margin e padding.

 

Também não é necessário envolver os elementos flutuantes dentro de contêineres, muito menos criar esta classe .paragrafo para o espaçamento. A flutuação pode ser aplicada no próprio elemento, enquanto o parágrafo pode ser conseguido com a pseudo-classe :first-line

 

Seguindo o link que passei no início dessa resposta, você conseguirá aplicar o efeito sem maiores problemas.

 

Nota, valide a marcação.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bmfa.com.br%2Fsamples%2Fcervim%2Fcursos.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Compartilhar este post

Link para o post
Compartilhar em outros sites

Robson Moulin    0

Robson Moulin
Postado

Valeu André!

 

estava com o mesmo problema, tendo que ficar colocando height diferentes para cada paginá, retirei o heith e no lugar coloquei overflow:hidden; e pronto, funcionou agora as bordas vão automáticas em relação ao conteúdo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito