Почему не раскраска div на всю высоту?

Edit: Plunker Предварительный просмотр здесь - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview Почему не раскраска div на всю высоту?

Возможно страшное название, но через минуту я не мог придумать лучше.

Я создал простую страницу с угловыми и некоторыми html. Проблема, с которой я столкнулась, на самом деле связана с css. Когда вы нажимаете на элемент меню, он выделяет блок, но я получаю странную границу 1-2 px, которая не подсвечивается внизу.

был на этом в течение нескольких часов и серьезно подходя к стене с ним ...

Мой HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<link type="text/css" rel="stylesheet" href="css.css" /> 

<!--AngularJS code--> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> 
</head> 

<body> 


<!-- Adding the ng-app declaration to initialize AngularJS --> 
<div id="main" ng-app> 
    <!-- The navigation menu will get the value of the "active" variable as a class. 
     The $event.preventDefault() stops the page from jumping when a link is clicked. --> 
    <div id="header"> 
     <div id="title"> 
      <h3 class="pull-left company-heading">Tool Title</h3> 
     </div> 
     <nav class="pull-right {{active}}" ng-click="$event.preventDefault()"> 

      <!-- When a link in the menu is clicked, we set the active variable --> 

      <a href="#" class="home" ng-click="active='home'">Home</a> 
      <a href="#" class="projects" ng-click="active='projects'">Projects</a> 
      <a href="#" class="services" ng-click="active='services'">Services</a> 
      <a href="#" class="contact" ng-click="active='contact'">Contact</a> 
     </nav> 
    </div> 
    <!-- ng-show will show an element if the value in the quotes is truthful, 
     while ng-hide does the opposite. Because the active variable is not set 
     initially, this will cause the first paragraph to be visible. --> 

    <p ng-hide="active">Please click a menu item</p> 
    <p ng-show="active">You chose <b>{{active}}</b></p> 
</div> 
fd 
</body> 

</html>

Мой CSS:

*{ 
    margin:0; 
    padding:0; 
} 

body{ 
    font:15px/1.3 'Open Sans', sans-serif; 
    color: #5e5b64; 
} 

#header { 
    position: relative; 
    background: none repeat scroll 0% 0% #185A82; 
    margin-bottom:45px; 
    line-height: normal;  
} 

#title { 
    display:inline-block; 
    padding: 18px 200px; 
    color:#fff; 
    font-weight:bold; 
    font-size:18px; 

} 

a, a:visited { 
    outline:none; 
    color:#389dc1; 
} 

a:hover{ 
    text-decoration:none; 
} 

section, footer, header, aside, nav{ 
    display: block; 
} 

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
} 


/*------------------------- 
    The menu 
--------------------------*/ 

nav{ 
    display:inline-block; 
    border-radius:2px; 

} 

nav a{ 
    color:#fff; 
    text-transform: uppercase; 
    display:inline-block; 
    padding: 18px 30px; 
    text-decoration:none !important; 
    -webkit-transition:background-color 0.25s; 
    -moz-transition:background-color 0.25s; 
    transition:background-color 0.25s; 
} 

nav a:first-child{ 
    border-radius:2px 0 0 2px; 
} 

nav a:last-child{ 
    border-radius:0 2px 2px 0; 
} 

nav.home .home, 
nav.projects .projects, 
nav.services .services, 
nav.contact .contact{ 
    background-color:#e35885; 
} 

p{ 
    font-size:22px; 
    font-weight:bold; 
    color:#7d9098; 
} 

p b{ 
    color:#ffffff; 
    display:inline-block; 
    padding:5px 10px; 
    background-color:#c4d7e0; 
    border-radius:2px; 
    text-transform:uppercase; 
    font-size:18px; 
}

источник

2014-09-09 Aman Chawla

пожалуйста, попытайтесь воспроизвести проблему на http://plnkr.co/ – Cherniv

Спасибо, сделано здесь: http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview –

Вы используете два разных метода отображения элементов рядом друг с другом. Либо используйте float и clear, либо используйте встроенный дисплей. См. Этот вопрос для получения дополнительной информации: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – timo

Обновление ниже значений CSS с :

nav a{ 
    color:#fff; 
    text-transform: uppercase; 
    display:inline-block; 
    padding: 22px 30px; 
    text-decoration:none !important; 
    -webkit-transition:background-color 0.25s; 
    -moz-transition:background-color 0.25s; 
    transition:background-color 0.25s; 
}

источник

2014-09-09 07:53:27

Это делает синий бар меньшим, но теперь розовый слегка слишком высокий. Есть ли какое-то изящное решение, благодаря которому я могу сделать подсветку заполнять высоту бара? –

В этом случае увеличивайте значение отступов якорной метки nav a {22px 30px} –

Спасибо за последующий ответ. С этим я вижу то же самое, кажется, что он так немного выходит за синюю полосу. –

Вашего название набивка проблема

Это будет работать:

#title { 
    display: inline-block; 
    padding: 14px 200px; 
    color: #fff; 
    font-weight: bold; 
    font-size: 18px; 
}

источник

2014-09-09 07:58:31 Beowolve

Вы, похоже, придумали то же решение, что и Akwebmedia. Во-первых, как вы два рассчитываете 14 (или это просто угадать/проверить)? Во-вторых, он все еще немного переполняется, см. Мой ответ на Akwebmedia. –

Извините было слишком поздно, хорошо отрегулируйте прокладку ссылок: padding: 22px 30px; – Beowolve

Обновления ваш стиль CSS из nav > a с этим:

nav a { 
    color: #fff; 
    display: inline-block; 
    padding: 23px 30px 19px; 
    text-decoration: none !important; 
    text-transform: uppercase; 
    -webkit-transition: background-color 0.25s; 
    -moz-transition: background-color 0.25s; 
    transition: background-color 0.25s; 
}

В противном случае вы можете установить пользовательскую высоту в a.

источник

2014-09-09 08:00:46

При использовании поплавков, вам нужно добавить «четкий» стиль, чтобы очистить поплавки:

<br style="clear:both" />

Это происходит потому, что что-то внутри DIV, который плавал не занимает пространство внутри дел. Чистый float CSS инструктирует DIV, чтобы гарантировать, что он включает в себя его плавающих детей.

Например:

<div id="header"> 
    <div id="title"> 
     <h3 class="pull-left company-heading">Tool Title</h3> 
    </div> 
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()"> 
     <!-- When a link in the menu is clicked, we set the active variable --> 
     <a href="#" class="home" ng-click="active='home'">Home</a> 
     <a href="#" class="projects" ng-click="active='projects'">Projects</a> 
     <a href="#" class="services" ng-click="active='services'">Services</a> 
     <a href="#" class="contact" ng-click="active='contact'">Contact</a> 
    </nav> 
    <br style="clear:both" /> 
    </div>

Вы также должны удалить край дна стиля CSS для заголовка.

#header { 
    position: relative; 
    background: none repeat scroll 0% 0% #185A82; 

    line-height: normal;  
}

Demo Plunker

источник

2014-09-09 08:00:48 pixelbits

Это действительно делает видимый пробел под выделенным блоком еще большим: -/ –

Вы также должны удалить стиль CSS с пометкой, который у вас есть в #header. – pixelbits

Вы можете попробовать добавить на ваш а теги следующие действия CSS

line-height: 60px;/*height of your header*/ 
padding: 0px 30px;/*remove the top and bottom padding*/

надеюсь, что это поможет вам

источник

2014-09-09 08:10:10 Polochon

Попытка изменить размер элементов, используя заполнение может быть сложным. В этом случае лучше, чтобы размер определялся содержимым элементов. Я предлагаю следующие изменения:

Сначала удалите прокладку #tittle и вместо этого добавьте желаемое позиционирование.

#title { 
    display:inline-block; 
    position: relative; 
    top: 18px; 
    left: 200px; 
    color:#fff; 
    font-weight:bold; 
    font-size:18px; 
}

Для высоты #header матча высоты дочерних элементов, мы должны включать в себя элемент со стилем clear: both. Это связано с тем, что #nav имеет float: right, и алгоритм поплавков извлекает поле из нормального потока. (Ссылка: Visual formatting model)

HTML:

<div id="header"> 
    <div id="title">...</div> 
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav> 
    <div class="clear"></div> 
    ... 
    </div>

CSS:

.clear { 
    clear: both; 
}

Наконец, элементы, содержащиеся в #header, что мы не хотим в нормальном потоке являются включают в DIV с стиль float: left.

Я обновил свой пример: http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview

Я надеюсь, что это помогает.

источник

2014-09-09 09:21:20

Изменение отступы нав а к

nav a { 
    padding: 21.5px 30px; 
}

источник

2014-09-09 09:30:32 Leon

Почему не раскраска div на всю высоту?

ответ

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