javascript - Why isn't the div coloring the full height?

Edit: Plunker preview here -

Probably a terrible title but after a minute I haven't been able to e up with better.

I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.

Been at this for hours and seriously going up the wall with it...

My html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">

<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=".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 pany-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>

My 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;
}

Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview

Probably a terrible title but after a minute I haven't been able to e up with better.

Been at this for hours and seriously going up the wall with it...

My html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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 pany-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>

My 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;
}

Share Improve this question edited Sep 9, 2014 at 7:52 asked Sep 9, 2014 at 7:46 Aman Chawla 7242 gold badges9 silver badges26 bronze badges

2 please try to reproduce your problem on plnkr.co – Ivan Chernykh Commented Sep 9, 2014 at 7:48
Thanks, done so here: embed.plnkr.co/2afyRrde2rxncxPelB69/preview – Aman Chawla Commented Sep 9, 2014 at 7:52
You are using two different methods of displaying elements next to each other. Either use floats and clear, or use display inline. See this question for more info: stackoverflow./questions/11805352/… – timo Commented Sep 9, 2014 at 9:04

Add a ment |

7 Answers 7

Sorted by: Reset to default 5

You can try to add on your a tags the following css

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

hope it will help you

Update the below css values with:

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;
}

Your titles padding is the problem

This will work:

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

Update your css style of nav > a with this:

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; 
}

Otherwise you can set a custom height to the a.

Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:

First remove the padding of #tittle and instead add the desired positioning.

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

For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: 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;
}

Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.

I updated your example: http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview

I hope this helps.

When you use floats, you need to add a "clear" style to clear the floats:

<br style="clear:both" />

This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.

For example:

  <div id="header">
    <div id="title">
      <h3 class="pull-left pany-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>

You also have to remove the margin-bottom CSS style for your header.

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

    line-height: normal;    
}

Demo Plunker

Change the padding of nav a to

nav a {
    padding: 21.5px 30px;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why isn't the div coloring the full height? - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)