One of the challenges I'm facing is related to styling my webpage.
I have created an inline navigation bar, but when I attempt to change its background color, it doesn't fill the height as desired. I am interested in finding a solution that will allow me to do this without altering the size or appearance of the navigation bar.
Here are some visuals (I used background-color: green; for this):
https://i.sstatic.net/Cye9s.png
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>