Ir para conteúdo

POWERED BY:

Arquivado

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

regina

[Resolvido] Layout em css diferente, com curvas

Recommended Posts

Bom dia,

 

na empresa que eu trabalho desenvolveram um layout para um cliente, que foge um pouco do tradicional, tem várias curvas.

Estou tentando desenvolver o css para o layout mas estou com dificuldade quando une as funcionalidades ao css.

layout_azul.jpg

A parte em azul do topo no menu foi tranquilo, mas o do banner não está saindo, veja no css

.menu {width:100%;height:50px;margin:0;float:left;background: url(imagens/fundo_menu.gif) no-repeat left;font:12px Arial, Helvetica, sans-serif}
/*topo*/
#topo{width:100%;height:160px;margin:0 auto;z-index:10;background:#FFF}
/*banner*/
#banner{width:770px;height:270px;z-index:5;margin:5px 0 0 0;background:#FFF  url(imagens/fundo_banner.png) bottom left no-repeat}
/* Slider */
.slides-banner {width:770px;position:relative;padding:0;margin:0;background:none;z-index:1}/*div anterior a ul*/
#slides-banner {height:270px;overflow:hidden}/*ul*/
#slides-banner .slide-content {width:770px;height:270px;margin:0;float:left}
#slides-banner li {width:770px;margin-left:2px;list-style:none outside none}
#slides-banner li img {border:none;padding:0;margin:0}
.slides-banner .prev {width:40px;height:40px;position:absolute;top:140px;left:15px;outline:0 none;background-image:url(imagens/anterior.png);background-repeat:no-repeat;background-position:0px 0px;text-indent:-999em}
.slides-banner .prev:hover {/*[disabled]background-position:0px -53px; [disabled]background-repeat:no-repeat;*/}
.slides-banner .next {width:40px;height:40px;outline:0 none;position:absolute;top:140px;right:5px;background-image: url(imagens/proxima.png);background-repeat: no-repeat;background-position:0px 0px;text-indent:-999em}
.slides-banner .next:hover {/*[disabled]background-position:-45px -53px;*/}
.slides-banner a:active {}
.slides-banner .bx_pager {height:15px;padding-top:-30px;text-align:center;margin-left:85px;position:absolute;top:275px;left:305px}
.slides-banner .bx_pager a {width:14px;height:10px;color:#FFFFFF;background-attachment:scroll;background-color:transparent;margin-right:5px;color:#fff;padding:3px 8px 3px 6px;float:left;text-indent:-999em;background: url(imagens/inativo.png) no-repeat 0}
.slides-banner .bx_pager a:hover, .slides-banner .bx_pager a.active {background-position:0 0;text-decoration:none;background-image: url(imagens/ativo.png)}

Já tentei usar o z-index, mas se eu negativar o z-index da div .slides-banner não aparecem as fotos e se eu deixar o z-index menor que o da div #banner não aparece o background com a curva.

As imagens do banner serão incluídas pelo próprio cliente.

 

Agradeço se puderem me mostrar um exemplo de layout parecido ou me ajudar com o css desse layout.

 

Grata

 

regina

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá e vai meus pitacos:

O menu poderia ser feito com imagens para acompanhar as curvas, ou estilizar com CSS3 (rotate), se for possível utilizar no projeto claro;

Uma vez que os banners serão administrados pelo cliente, imagino que as imagens não serão trabalhadas com aquelas curvas (top/bottom), então sugiro que crie seu slider normal e acima dele inclua e posicione uma div com o background da imagem que tem as curvas, no caso um png transparente.

 

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu esqueci de colocar o html

Acho que o problema está em algum conflito com o jquery.bxSlider utilizado no banner, mas não faço idéia de como resolver.

 <div id="banner"> 
<div class="slides-banner"><div style="width:100%;position:relative;margin:0;overflow:hidden" class="bxslider_container"> 
  <ul id="slides-banner">
		<li><a href="produtos.php?cod=12" title="Brigadeiro"><img src="imagens/produtos/banner/211932_6258_chocolate_candy.jpg" alt="Brigadeiro" title="Brigadeiro" /></a></li>
		<li><a href="produtos.php?cod=15" title="Teste Novo"><img src="imagens/produtos/banner/Instrumento_musical_maraca2.jpg" alt="Teste" title="Teste" /></a></li>
		<li><a href="produtos.php?cod=4" title="Bolo artístico"><img src="imagens/produtos/banner/bolosartisticos04.jpg" alt="Bolo artístico" title="Bolo artístico" /></a></li>
		<li><a href="produtos.php?cod=13" title="teste"><img src="imagens/produtos/banner/459768_45363538_chocolate_cake.jpg" alt="teste" title="teste" /></a></li>
  </ul>
  </div>
</div><!-- slides-banner -->
 </div><!-- banner -->

O cliente vai no gerenciador, inclui a imagem desejada e depois tem a opção de recortar uma parte dela, um retângulo.

Tentei incluir na div banner, pois acho que é o lugar correto para a imagem mas fica abaixo das imagens do banner.

 

Obrigada

Compartilhar este post


Link para o post
Compartilhar em outros sites

Os efeitos do css3 são muito instáveis ainda aos modernos navegadores, e os antigos navegadores não tem suporte. Pense bem em usar plugin nestes casos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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