0

I'm a diploma student working on CSS and HTML. My current page is almost done, but I'm stuck on one thing. The Header/nav bar. If I set it to inline, everything lines up nicely, the background image stays where it's supposed to be but there's a gap at the top of the page. Setting it to fixed fixes that but throws off the alignment of parts of the bar and the background image ends up under the header. All related margins are set to 0, and out of desperation I tried enlarging the bar, it doesn't get rid of the space. Please could someone tell me how to fix this? Here's my code:

body {

margin: 0;
padding: 0;
width: 100%;
background: url("images/background.jpg") no-repeat center center fixed; 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(153,145,122); 
background: -webkit-linear-gradient(left, aqua , mediumslateblue); 
background: -o-linear-gradient(right, aqua, mediumslateblue);
background: -moz-linear-gradient(right, aqua, mediumslateblue); 
background: linear-gradient(to right, aqua , mediumslateblue);
font: 1em Verdana, sans-serif;
} 

header{
position: inline;
width: 100%;
margin: 0 auto;
margin-top: 0px;
padding; 0;
height: 40px;
background-color: black;
}

.logo {
color: white;
float: left;
margin-top: 10px;
margin-left: 10px;

}
.nav { 
float: right;

color: white;  
margin: 0; 
margin-top: 0;


}

.banner {
background: url("images/background.jpg") no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 200px;
width: 100%;
}
<html>
<head>
    <meta charset="utf-8">
    <meta name="Author" content="James Vivian">
    <meta name="Original Filename" content="index">
    <meta name="Date Created" content="8/6/2017">
    <meta name="Version" content="Version 1">
    <title>Photography Masters</title>
    <link rel="stylesheet" type="text/css" href="Styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

   <header>
       <div class="logo">Photography Masters</div>
   <nav>

   <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
   </ul>
    </nav>
  </header>
  </body>
  </html>
micstr
  • 5,080
  • 8
  • 48
  • 76
James Vivian
  • 51
  • 3
  • 2
    `position:inline` is not a thing. Also your header has `padding;0` which should be `padding:0` consider using a syntax highlighter – I haz kode Jul 17 '17 at 06:08
  • Hey @James Vivian, i think you mean `display:inline;` for `header {...}`. Not `position: inline;`. – divy3993 Jul 17 '17 at 06:13

3 Answers3

0

You can add below css for remove gap at the top of the page.

See Fiddle Demo

CSS:

header nav ul {
    margin-top: 0;
}
Jainam
  • 2,590
  • 1
  • 9
  • 18
0

body {

margin: 0;
padding; 0;
width: 100%;
background: url("images/background.jpg") no-repeat center center fixed; 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(153,145,122); 
background: -webkit-linear-gradient(left, aqua , mediumslateblue); 
background: -o-linear-gradient(right, aqua, mediumslateblue);
background: -moz-linear-gradient(right, aqua, mediumslateblue); 
background: linear-gradient(to right, aqua , mediumslateblue);
font: 1em Verdana, sans-serif;
} 

header{
position: inline;
width: 100%;
margin: 0 auto;
margin-top: 0px;
padding; 0;
height: 40px;
background-color: black;
}

.logo {
color: white;
float: left;
margin-top: 10px;
margin-left: 10px;

}
.nav { 
float: right;

color: white;  
margin: 0; 
margin-top: 0;


}

header nav ul {
    margin-top: 0;
}

.banner {
background: url("images/background.jpg") no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 200px;
width: 100%;
}
<header>
       <div class="logo">Photography Masters</div>
   <nav>

   <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
       </ul>
    </nav>
  </header>
Rahul khanvani
  • 373
  • 3
  • 13
0

I would recommend using a syntax highlighter to spot typos in code on the go. You had a couple of those in there.

I cleared up some of the redundant code.

The thing that was causing the gap is the margins for the ul element. you need to reset some browser defaults

I added comments to the code.

I think this is what you're going for. 

body {
  margin: 0 auto;
  background-color: rgb(153, 145, 122);
  background: linear-gradient(to right, aqua, mediumslateblue), url("images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  font: 1em Verdana, sans-serif;
}

header {
  margin: 0 auto;
  height: 40px;
  line-height: 40px; /* line height should match div height to align items in the middle in terms of height */ 
  background-color: black;
  color: white;
}

header a {color: white;}

.logo {
  float: left;
  margin-left: 10px;
}


ul {
  margin: 0 auto; /* this was the cause of the gap. You need to reset default margins for ul elements */
  margin-right: 5px
}

nav ul li {
  display: inline; /* make menu items go side by side */
  float: right;
  padding: 0 5px /* add padding between menu items but not above and below them */
}

.banner {
  background: url("images/background.jpg") no-repeat center center;
  background-size: cover;
  height: 200px;
  width: 100%;
}
<header>
    <div class="logo">Photography Masters</div>
    <nav>
      <ul>
        <li><a href="#link"> About</a></li>
        <li><a href="#link"> Contact</a></li>
        <li><a href="#link"> Gallery</a></li>
        <li><a href="#link"> Services</a></li>
      </ul>
    </nav>
</header>
I haz kode
  • 1,587
  • 3
  • 19
  • 39