Crea un'immagine di sfondo CSS che si sovrappone al bordo?

Question

Non riesco a ottenere un'immagine di sfondo per sovrapporre il bordo di un altro div. Abbiamo un pannello della barra laterale con varie barre laterali, incluso un menu di navigazione. A destra è il pannello dei contenuti. Vorremmo niente selezionato nella barra laterale di apparire collegato al pannello di contenuti:

Nell'esempio di cui sopra, v'è un'immagine di sfondo sul <li> tag Info Personali. Mi piacerebbe estendere questa immagine di un pixel a destra in modo che la linea accanto al valore selezionato non sia visibile.

Ecco il mio CSS per il sottomenu (selezionato) e l'area Contenuto a destra:

.submenu-item li span{ 
    padding: 4px 0 4px 16px; 
    min-height: 16px; 
    border-bottom:0px; 
} 

.submenu-item li{ 
    font-size:12px; 
    border: none; 
    padding: 0px 0 0px 16px; 
} 

.submenu-item span.Active{ 
    background-image: url(../images/submenu-select.png); 
    background-repeat: no-repeat; 
} 

#Content { 
    margin-left:190px; 
    border-left: 1px solid #b0b0b0; 
    padding: 20px; 
    background: #FFFFFF; 
    min-height:600px; 
} 

C'è un modo per fare questo altro che mettere un bordo a destra sulla mia barra laterale (ed escludendo su il tag dell'elemento della lista)?

Answer 1

Se si dispone di un bordo su tale diritto, non è possibile eliminare quella parte del bordo.

Tuttavia, siete fortunati. Prova a utilizzare margin-right: -1px; nel tuo CSS. Questo trascinerà l'elemento

a destra 1 pixel, e si spera oltre il confine. Potrebbe essere necessario impostare anche

position: relative; 
z-index: 100; 

Inoltre, perché è sulla destra 1 pixel, per renderla allineare a sinistra con gli altri, potrebbe essere necessario per rendere l'elemento attivo di 1 pixel più ampio.

Answer 2

La soluzione di Alex dovrebbe funzionare, ma un altro modo per farlo sarebbe rimuovere il CSS atrtribute a sinistra del bordo da #Content e utilizzare invece un'immagine GIF o PNG grigia a 1 pixel di larghezza sul DIV contenente gli elementi del sottomenu.

Ti piace questa:

#SubMenu { background: url(grayline.gif) #CCCCCC top right; } 

Questo eliminerebbe la necessità di preoccuparsi per l'elemento di sottomenu selezionata non essere allineati.