2012-11-16 30 views
11

Próbuję utworzyć horyzontalne menu nawigacyjne. Menu musi mieć pełną szerokość ekranu, z dolną krawędzią na całej szerokości. Osiągnąłem to mniej więcej oprócz tego, że chciałbym mieć margines około 15px w menu i do tego użyć koloru tła mojego menu. Również wtedy, gdy element jest zawijany, kolor wskaźnika powinien również rozciągać się pod granicą, jeśli ma to sens.CSS - kolor tła z marginesem

Oto skrzypce mojego menu tak daleko - http://jsfiddle.net/J74eE/2/

Tried to insert my code here but the li items got converted to bullets 

Mam ustawiony margines pod nav pojemnika, i chciałbym kolor obramowania do wykorzystania na obszarze marginesu zbyt. Chciałbym też, aby przedmioty Lover uwijały się także pod granicą, ale nie mam pojęcia, jak można to osiągnąć. Jeśli położę margines i obramowanie na elementach L, granica nie będzie działać na całej szerokości ekranu.

Aktualizacja

Updated moje skrzypce należą makietę co chcę acheive - http://jsfiddle.net/J74eE/3/

nie mogę używać jako dopełnienie że popycha border-bottom dół, a ja chcę mieć obramowanie z kolorem tła pod spodem.

+1

Nie jesteś pewien, czego dokładnie szukasz - szybka makieta pomoże. –

Odpowiedz

11

Mam nadzieję, że szukasz to: DEMO

CSS

.nav-menu:after { 
    background-color:#FEFFE5; 
    position:absolute; 
    content:""; 
    left:0; 
    right:0; 
    height:15px; 
    top:40px; 
} 

Można użyć after i beforeklas pseudo dla Twojego pożądany rezultat.

+0

Doskonałe dzięki! Mogę użyć: po pseudo-klasie na moich elementach li, aby po ich ukryciu przestrzeń pod linią otrzymała również kolor wskaźnika. – user1573618

8

Spróbuj zastąpić margines przez wyściółkę. Zobacz więcej w modelu pudełkowego: http://www.w3.org/TR/CSS2/box.html

.nav-menu { 
    background-color:#FEFFE5; 
    clear:both; 
    float:left; 
    padding:0px 0px 15px 0px; 
    border-bottom: 1px solid #dbd7d4; 
    width:100%; 
    font-size:13px; 
    z-index:1000; /* This makes the dropdown menus appear above the page content below */ 
    position:relative; 
} 
+1

Będzie działać z dopełnieniem, chyba że masz styl 'background-clip' ustawiony na' content-box'. W tym drugim przypadku obszar wypełnienia nie będzie kolorowy. Strzec się! –