[Resolvido] Dificuldade com o topo e menu

[rcdesign 1]

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;

- A logo não se limita à parte central do topo, ela também aparece no topo_nav e 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:

[donato 0]

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

^_^

[brcontainer 16]

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;
}
#topo .esq{
float:left;
width:205px;
height:158px;
background: #fc0 url(bg1.jpg);
}
#topo .dir{
float:right;
width:15px;
height:158px;
background: #000 url(bg2.jpg);
}
#topo .centro{
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 ideia

 

falow ;)

[donato 0]

q isso silver!!rsrssr, a empresa nem é minha, nem vou usar mais esse layout, foi aprovado outro. é um exemplo dq o rcdesign pediu!! B)

[rcdesign 1]

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

[rcdesign 1]

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

 

[brcontainer 16]

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;
}

diminuir 5px ou mais para juntar ^^

 

ps.: se quebrar o layuot avisa ok?

ae teremos de aplicar Z-INDEX:;

 

abraço ;)

[rcdesign 1]

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 -->

[brcontainer 16]

Tem um link não??

 

faça isso:

#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 72px 0px 184px;
background: url(../img/topcentro.jpg) repeat-x;
height:121px;
}

abraço ;)

 

Ps.: o problema aqui não é ZERAR margens é com posicionamento que o IE6 interpreta mal os pixels hehehe

 

abraço ;)

[rcdesign 1]

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...:

Site

[brcontainer 16]

acho que isso resolve ;)

/* Topo */
#topo {
background: url(topcentro.jpg) repeat-x;
width: 50em;  
height:121px;
}
#topo .topoesq{
float:left;
width:186px;
height:121px;
background-image: url(topesq.jpg);
}
#topo .topodir{
float:right;
width:74px;
height:121px;
background-image: url(topdir.jpg);
}
#topo .topocentro{
display:block;
margin: 0px 74px 0px 186px;
height:121px;
}
p.icones {
margin: 0;
padding: 7px 10px 0 0;
text-align: right;
} 
/* Menu */
#menu {
background: url(fdmenucentro.jpg) repeat-x;
width: 50em;  
height:34px;
}
#menu .menuesq{
background-image: url(fdmenuesq.jpg);
float:left;
width:81px;
height:34px;
}
#menu .menudir{
float:right;
width:15px;
height:34px;
background-image: url(fdmenudir.jpg);
}
#menu .menucentro{
display:block;
height:34px;
}

só uma pergunta não ia ser um layout flexivel??

 

abraço ;)

[rcdesign 1]

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.

[brcontainer 16]

a entendi ;)

qualquer coisa volte a postar, abraço;)