2013-11-27 5 views
0

Как я смогу сделать навигацию на этом тестовом сайте полной высотой темного серого бара (заголовка) и вертикально центрированным? http://website-test-lab.com/sites/mfm/Сделать навигацию Полная высота

Вы можете видеть, что красный фон домашней ссылки не заполняет высоту темного серого цвета. Сайт, содержащий меню, является отзывчивым.

EDIT: Извините за недостаток примера кода, но здесь слишком много CSS, чтобы добавить сюда или jsfiddle, например. Если бы вы могли использовать Dev Tools/Firebug, которые были бы высоко оценены.

Спасибо.

HTML:

<header id="masthead" class="header clearfix" role="banner"> 

<!-- logo --> 
    <div class="logo grid-15 tablet-grid-15"> 
    <a href="#"> 
    <img src="#/library/img/mfmlogo.jpg" alt="#" class="logo-img"> 
    </a> 
    </div> 
<!-- /logo --> 

<!-- nav --> 
    <nav id="header-menu" class="nav grid-85 tablet-grid-85" role="navigation"> 
    <ul class="nav-list clearfix"> 
     <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-32 current_page_item menu-item-46"><a href="http://website-test-lab.com/sites/mfm/">Home</a></li> 
     <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://website-test-lab.com/sites/mfm/about-us/">About Us</a></li> 
</ul> 
    </nav> 
<!-- /nav --> 

</header> 

CSS:

#masthead { 
    margin: 15px 0 0 0; 
    background: #363737; 
    position: relative; 
    display: block; 
} 

.logo { 
    padding: 10px; 
} 
+0

Я думал, что это будет проще использовать средства Firebig или Dev для просмотрите код и посмотрите, что происходит. Я могу добавить код; позвольте мне отредактировать сообщение. –

+0

@HuwRowlands напишите свой код на http://jsfiddle.net/ – SaturnsEye

+0

Слишком много кода для jsfiddle –

ответ

1

Установить запас-топ для .nav в #masthead .nav{ margin-top:0px; }

и установить обивка как #masthead .nav ul li a{ padding:31px 15px; }

Смежные вопросы