Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Dois dias de pesquisas e inúmeros testes depois tive que admitir que não consigo fazer.. http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
- layout elástico - visando melhor acessibilidade;
- topo em em 'partes': 1. topo_nav - onde tem os ícones home e email - imagem de fundo tem degradê;
2. topo_logo - parte central onde tem a logo (vai ter um flash ali também) - imagem com leve efeito tipo Windows Vista;
3. topo_menu - menu de navegação - imagem de fundo tem efeito e sombra;
- cantos superiores arredondados no topo_nav;
- cantos inferiores arredondados no topo_menu;Como o layout é elástico estou com dificuldade ao aumentar o tamanho da fonte no navegador.. não consegui fazer funcionar nenhuma das soluções que eu testei.
Será que alguém consegue me ajudar a resolver?
Segue a imagem do topo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.stylloefeitos.com.br/img/topo/toposite.jpg&key=5f6f6207613ea8cd171e9172a9f4efbd0724dc62b04d0c20786f16ee9049c548" alt="Imagem Postada" />
Donato isso é alguma merchandagem kkk
seguinte eu dividi sua imagem em tres
o código seria mais ou menos assim:
<style type="text/css">
#topo {
min-width:800px;
height:158px;
}float:left;
width:205px;
height:158px;
background: #fc0 url(bg1.jpg);
}float:right;
width:15px;
height:158px;
background: #000 url(bg2.jpg);
}display:block;
margin: 0px 15px 0px 205px;
background: #ddd url(bg3.jpg);
height:158px;
}
</style>
<div id="topo">
<div class="esq">1</div>
<div class="dir">2</div>
<div class="centro">3</div>
</div>redimensionavel ;)as cores eu ´so coloquei pra você visualizar a ideiafalow ;)
q isso silver!!rsrssr, a empresa nem é minha, nem vou usar mais esse layout, foi aprovado outro. é um exemplo dq o rcdesign pediu!! B)
Primeiro desculpe o sumiço, apareceram algumas coisas que precisaram de minha atenção imediata (3 clientes pedindo 'coisinhas' urgentes, minha esposa bateu o carro, etc..etc.)
enfim..
Agradeço ao donato e ao silverfox pelas respostas.. que por sinal resolveram perfeitamente a minha incompetência de pensar numa solução tão simples como à do siverfox que é a que eu acabei por usar... http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
tks
Reabrindo por favor....
que bom né.. funciona direitinho.. menos no Internet Explorer 6...ele mostra o fundo da div ao invés da imagem de fundo....
fiz várias alterações em margin e padding do css mas não teve jeito.
se alguém souber como resolver por favor....
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.stylloefeitos.com.br/img/topo/ie6.jpg&key=ce0fe558c33b4c3013aee3b118138de9abd4818e179d85b9f17244f061270f27" alt="Imagem Postada" />
ponha um link para analizarmos
mas creio que bastará fazer isso:
#topo .centro{
display:block;
margin: 0px 10px 0px 200px;
background: #ddd url(bg3.jpg);
height:158px;
}ps.: se quebrar o layuot avisa ok?
ae teremos de aplicar Z-INDEX:;
abraço ;)
não adianta silverfox.. já havia feito isso.. na verdade eu cheguei a zerar as margins e padding do centro e não mudou nada...
CSS do topo
>
/ Topo /
#topo {
width: 50em;
height:121px;
}#topo .topoesq{
float:left;
width:186px;
height:121px;
background-image: url(../img/topesq.jpg);
}#topo .topodir{
float:right;
width:74px;
height:121px;
background-image: url(../img/topdir.jpg);
}#topo .topocentro{
display:block;
margin: 0px 74px 0px 186px;
background: url(../img/topcentro.jpg) repeat-x;
height:121px;
}hmtl
>
<div id="topo">
<div class="topoesq"></div>
<div class="topodir"><p class="icones"><img src="img/icohome.jpg" alt="home" /> <img src="img/icomail.jpg" alt="mail" /></p></div>
<div class="topocentro"></div>
</div><!-- fim #topo -->Tem um link não??
faça isso:
#topo {
width: 50em;
height:121px;
}float:left;
width:186px;
height:121px;
background-image: url(../img/topesq.jpg);
}float:right;
width:74px;
height:121px;
background-image: url(../img/topdir.jpg);
}display:block;
margin: 0px 72px 0px 184px;
background: url(../img/topcentro.jpg) repeat-x;
height:121px;
}Ps.: o problema aqui não é ZERAR margens é com posicionamento que o IE6 interpreta mal os pixels hehehe
abraço ;)
Ps.: o problema aqui não é ZERAR margens é com posicionamento que o IE6 interpreta mal os pixels hehehe
Entendo que a questão seja posicionamento silverfox, alterando (ou zerando) as margins e paddings consequentemente altera-se o posicionamento.. ou estou errado? http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
de qualquer forma essa 'mudança não mudou' nada...rs
Não passei link porque não mandei os arquivos para o host... ou melhor não tinha mandado...:
acho que isso resolve ;)
/ Topo /
#topo {
background: url(topcentro.jpg) repeat-x;
width: 50em;
height:121px;
}float:left;
width:186px;
height:121px;
background-image: url(topesq.jpg);
}float:right;
width:74px;
height:121px;
background-image: url(topdir.jpg);
}display:block;
margin: 0px 74px 0px 186px;
height:121px;
}margin: 0;
padding: 7px 10px 0 0;
text-align: right;
}#menu {
background: url(fdmenucentro.jpg) repeat-x;
width: 50em;
height:34px;
}background-image: url(fdmenuesq.jpg);
float:left;
width:81px;
height:34px;
}float:right;
width:15px;
height:34px;
background-image: url(fdmenudir.jpg);
}display:block;
height:34px;abraço ;)
http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
é mais uma solução simples e fácil e estava tão na cara e que as vezes a gente não enxerga.. afff..
valeu silverfox...
o site não é pra ser flexível e sim elástico... pensando principalmente em usabilidade.. quero que ele fique fixo mas se o usuário aumentar a fonte o layout não quebre.
a entendi ;)
qualquer coisa volte a postar, abraço;)
amigo, dá uma olhada nesse layout que desenvolvi que me parecer ser desse tipo, o código ta simple, fácil entender.
www.ourofino.com/web/portal
^_^