[Resolvido] Layout em css diferente, com curvas

[regina 0]

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.

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

[Public2004 79]

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.

[regina 0]

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

[regina 0]

Voltei ao início, retirei os efeitos e consegui!!!

[Mateus Avila Isidoro 8]

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.