Geek Answers Handbook

Why not paint the div full height?

Edit: view the plunger here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview

Probably a terrible title, but after a minute I couldn't get any better.

I created a simple page with corner and some html. The problem I ran into is actually related to css. When you click on a menu item, it selects a block, but I get a strange 1-2 px border that does not highlight below.

Was at this for hours and seriously climbed the wall with him ...

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

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;
}
+4
source share
7 answers

You can try adding the following css to your tags

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

hope this helps you

+5

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

-

:

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

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.

+2

. , . :

#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, . (: )

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

, .

+2

, "" , :

<br style="clear:both" />

, - div, , 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

+1

nav a

nav a {
    padding: 21.5px 30px;
}
+1

More articles:


All Articles