listy-style-image...

[Bruno Augusto 417]

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

 

[William Bruno 1501]

usado no list-style-image

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.

[Bruno Augusto 417]

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?

[William Bruno 1501]

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.

[Bruno Augusto 417]

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.

[William Bruno 1501]

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)

[Bruno Augusto 417]

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

[William Bruno 1501]

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.

[Bruno Augusto 417]

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)

[William Bruno 1501]

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.

[Bruno Augusto 417]

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?

[William Bruno 1501]

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.