4 replies to this topic

[marcoo]

Olá amigos, sempre que tenho dúvidas encontro no wmonline ótimos tópicos que sempre me ajudam. Porém estou com um problema que não consigo resolver de jeito nenhum.
Tenho que fazer um layout para celular, de preferência pro Iphone. Dei uma boa procurada e solucionei o problema do zoom, porém não consigo de jeito nenhum centralizar a div GERAL, que contém os botões para navegação em porcentagem (que infelizmente possuem bordas arredondadas, sombras, etc).
Segue o link para o layout:

[url=resolvido[/url]

O que preciso: Os botões vermelhos centralizados na tela.

O ideal seria o botão possuir 98% de largura, porém isso na tela dos celulares faz com que a borda direita do botão caia (são 2 background images, em 2 <li>, uma antes e outra depois da div principal do botão)
Pensei em tentar fazer ele com borda arredondada com css, mas implicaria na sombra dele, sei que daria pra fazer uma sombra com css ou jquery, mas acredito que haja alguma maneira de centralizar esta droga desses botões no layout. Aceito até gambiarra com tables
Abraços, e agora deixarei de ser somente um leecher xD

edit: Como vocês podem inspecionar, já tentei text align center, e o margin: auto teriamos que especificar uma largura e como ele é feito com porcentagens acho meio difícil funcionar.

Edição feita por: Édipo Costa Rebouças, 24/07/2009, 20:31.

[Édipo Costa Rebouças]

http://forum.wmonlin...;hl=centralizar

[marcoo]

Fala amigo, não deu certo botar display inline no li e text align center no ul. Elas estão com float left, se eu tiro funciona, porém as imagens que arredontam os cantos faz com que não dê certo. O problema é bastante complexo, pois não posso definir uma largura pra ul. (sugiro fazer uns teste no firebug, mas to achando que a solução vai ser eliminar essa coisa fofa de canto arredondado)

Edição feita por: marcoo, 03/07/2009, 18:46.

[Édipo Costa Rebouças]

a solução não foi essa, oi a desse link: http://www.search-th...at-not-a-float/ que o alex colocou lá.

Edição feita por: Édipo Costa Rebouças, 03/07/2009, 18:50.

[marcoo]

Opa, fiz o hackzinho do link, o conteúdo centralizou normalmente, porém ainda não solucionou meu problema
Se eu pudesse utilizar largura em pixels estaria ok, mas precisa ser em porcentagem, e não sei porque diabos o width em porcentagem não funciona como se fosse em pixels. Segue o link para vocês entenderem melhor:

http://aprova.oficin...TE/default.aspx

Se eu utilizasse na linha:

.geral ul li.botao
{

background:url('Images/meio.png') repeat-x top;
height:44px;
width:89%;
text-align:center;
padding-top:18px;
}

um min-widht funcionaria perfeitamente, porém como o layou é para smart phones precisa ser em porcentagem. Estou quase tentando convencer aqui para fazer o botão sem os cantos arredondados, mas tentarei mais um pouco já que está quase lá. Alguma idéia? desde jah muito agradecido pela ajuda.

AE, fui por outro caminho, usando css 3 para as bordas e jquery pra sombra do botão e funcionou, ufa, obrigado pela ajuda fera