Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Dessa vez eu me antecipei e coloquei o problema no JSFiddle, apesar de não servir exatamente para isso.
Adicionei uma borda cor de lima para demonstrar melhor.
Tem como remover aquele espaço entre a borda esquerda de **#sidebar .widget** e o *bullet* usado no **list-style-image** e o elemento **<li>** referente?
Eu tente tanto setar essa propriedade no no **<ul>** quanto ajustar com margens e, apesar de a instrução funcionar, nenhuma delas removeu aquele espaço.
A minha intenção é deixar uma borda abaixo de cada **<li>** **contínua**, isto é, sem aquela interrupção, ao mesmo tempo em que uso aquele *bullet*.Se vale a imagem...:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/gxria.png&key=583daaa21eee56e0f5474a10ae41cc585b477f0026868872d3ec250d946f9080" alt="gxria.png" />
Perfeito, isso resolveu esse problema mas acabou complicando em outro.
A intenção de usar list-style-image seria justamente ter o background da <li> livre para usar outra coisa. e no caso essa "outra coisa" seria a verdadeira borda inferior.
Nesse caso, então, me restou border-image, mas como é um recurso do CSS3 pode não estar disponível em alguns navegadores.
E então?
>
E então?
depende.. mostre o resultado final do layout.você ainda tem a tag a para trabalhar. Se essa tua lista for ser um "menu". Se não for, a solução vai esbarrar em algum outro elemento interno do LI, que você deverá adicionar.
Dessa vez eu me adiantei. Essa parte do layout eu postei tanto com o problema (JSFIddle) bem como a forma que deveria ficar (imagem).
Eu consegui fazer de outra forma, mas gostaria de uma opinião para saber se é a mais adequada ou não, que seria adicionar a borda no **<li>** e o *bullet* como *background* do **<a>**
E compensar a distância entre o *bullet* e o texto da âncora através de um **<span>**.Ficou assim.
> ter o background da **<li>** livre para usar outra coisa. e no caso essa "outra coisa" seria a verdadeira borda inferior.
desculpe, mas não estou enchergando essa "borda verdadeira". nem no print, e nem no fiddle. O layout apresentado no primeiro screen não vejo pq não pode ser implementado da forma que propus.(sem necessidade do span, e sem usar background da tag A)
Por enquanto, a borda é esta verde, nesta [primeira revisão](http://jsfiddle.net/PYYta/1/) do código definida no **<li>**.
Quando acertado ela será substituída por uma imagem e, como pretendo evitar border-image, da forma como foi feito, tenho o background do <li> livre para usar.Quanto ao seu comentário, bom, sei que não sou tão experiente nisso, mas eu tentei de várias forma e não consegui. Sempre ficava como na imagem, com aquele espaço entre a lateral esquerda, o bullet e o texto da âncora.
>
Por enquanto, a borda é esta verde, nesta primeira revisão do código definida no <li>.
Quando acertado ela será substituída por uma imagem e
Ahhh ok, então não estou doido ainda..você realmente ainda não postou como é o efeito final. Poste por favor.
O layout completo em que você pretende chegar.
Não dá pra ser a partir dessa primeira revisão? Eu não sou designer, ainda estou brigando com o degrade da imagem final. :(
Sei que a inspiração para ela veio desse site (especificamente essa imagem)
pq você não faz com 2 bordas ? o border-bottom mais escuro, e o border-bottom mais claro ?
lógico que se você não postar o efeito final vai ficar praticamente impossível eu te dizer com exatidão como fazer.
A intenção é fazer como no link postado.
Mas isso não é gambiarra? E não seria border-top de uma cor e border-bottom de outra?
Mas isso não é gambiarra?
defina "gambiarra".
>
E não seria border-top de uma cor e border-bottom de outra?
Sim, exato. Acabei escrevendo errado.
Oi @Bruno, bom dia.
Apesar de parecer "esquisito", costumo utilizar o bullet como background do LI. Isso por si só já vai resolver o teu problema com a borda.
Não uso o list-style-image. Essa propriedade é "esquisita", e não funciona muito bem.
Estou num mac, e o teu link no fiddle, não mostrou o list-style-image corretamente nem no Firefox e nem no Chrome. E o ie, tem alguns outros problemas maiores e tal.. por isso eu não uso essa propriedade.