ehem ehem - 4 months ago 18
HTML Question

HTML/CSS - Navigation bar stretch/fill backgroud color

I am new to HTML world but the problems so far are about stylizing my page .

I've build an inline navigation bar but when I want to change its background color It does not affect the height that I would like to be colorized
. I would like to know if I can do something about it but also not to
affect the size or style of my navigation bar

PICTURES ( i use

background-color : green;
for this ):

enter image description here



body{
margin : 0;
padding : 0;
font-family : 'Arial',serif;
}

/*nav class */
.nav {
background-color : green;
color: white;
list-style : none;
text-align : right;
padding : 0px 0 0px 0;
}

/*A li tag in a .nav class*/
.nav > li {
display : inline-block;
padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
font-size: 14px;
}

/*a tag inside a li tag inside a .nav class*/
.nav > li > a {
text-decoration : none;
color: black;
}

/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
color : #c1c1c1;
}

.logo {
float : left;
padding-left : 25px;
}

.logo > .logo-image {
position: relative;
bottom : 8px;
width : 128px;
}

.banner {
width : 100%;
display : block;
}

.banner > .banner-image{
width : 100%;
display : block ;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>DeckArts Graphics</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<ul class="nav">
<div class="logo">
<a class="logo-image" href="#home">
<img src="ZE.png" >
</a>
</div>

<li><a href="#Home">Home</a></li>
<li><a href="#Gallery">Gallery</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#About">About</a></li>
</ul>

<div class="banner">
<img class="banner-image" src="banner.jpg" >
</div>
</body>
</html>








I'm really sorry if this answer exists in this site its crystal clear to find it but I don't know how to search this kind of issue , thank you very much

Answer

Resetting margins and applying padding to the nav does the job.

Specifically,

  1. Change padding : 0px 0 0px 0; to padding : 10px 0 10px 0;
  2. Add margin:0px.

Demo below.

body{
  margin : 0;
  padding : 0;
  font-family : 'Arial',serif;


}
/*nav class  */
.nav {
  background-color : green;
  color: white;
  list-style : none;
  text-align : right;
  padding : 10px 0 10px 0;
  margin:0px;
}
/*A li tag in a .nav class*/
.nav > li {
  display : inline-block;
  padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
  font-size: 14px;



}
/*a tag inside a li tag inside a .nav class*/
.nav > li > a { 
  text-decoration : none;
  color: black;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
  color : #c1c1c1;
}
.logo {

  float : left;
  padding-left : 25px;
}
.logo > .logo-image {

  position: relative;
  bottom : 8px;
  width : 128px;
}
.banner {
  width : 100%;
  display : block;
}
.banner  > .banner-image{
  width : 100%;
  display : block ;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>DeckArts Graphics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <ul class="nav">
      <div class="logo">
        <a class="logo-image" href="#home">
          <img  src="ZE.png" >
        </a>
      </div>

      <li><a href="#Home">Home</a></li>
      <li><a href="#Gallery">Gallery</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#About">About</a></li>
    </ul>

    <div class="banner">
      <img class="banner-image" src="banner.jpg" >
    </div>
  </body>
</html>

Comments