0

I am making a navigation bar and when I style the nav tag there is a space in between the navigation bar and the canvas I have below it... There's probably an obvious solution I just can't seem to find it :P here is the page

Here is my CSS

@font-face 
{
    font-family: 'Quicksand-Bold';
    src: url('../Quicksand-Bold.woff') format('woff');
}
#mainBanner 
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 60px;
    left: 100px;
    font-size: 25px;
}

#navbar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: #333;
    width: 1000px;
    position: relative;
}

li {

    display: inline;
    font-family: Arial;
    font-weight: bold;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none
}

li a:hover {
    background-color: #D92715;
}

#welcomeBanner
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 155px;
    left: 180px;
    font-size: 50px;
}

#pi
{
    width: 175px;
    height: 125px;
    position: absolute;
    top: 185px;
    left: 550px;
}

p
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 300px;
    left: 210px;
}

canvas
{
    display: block;
    margin: 0 auto;
    padding: 0;
}

Here is my HTMl

    <!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Pi Projects</title>
  <meta name="description" content="The place to go for Raspberry Pi Projects".>
  <meta name="author" content="Jordan Baron">

  <link rel="stylesheet" href="css/styles.css">

</head>

<body>  

    <img src=images/pilogo.png id="pilogo">
    <img src=images/pi.png id="pi">

    <h1 id="mainBanner">Projects</h1>


    <nav id="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>

    <h1 id="welcomeBanner">Welcome<br>to PiProjects.tk</h1>
    <p>The best source for Raspberry Pi projects</p>

    <canvas id="myCanvas" width="1000" height="500" style="border:1px solid white;">
    </canvas>


  <script src="js/scripts.js"></script>
</body>
</html>
7
  • 3
    Can you show us the HTML as well as the CSS please.
    – Sam
    Commented Jul 18, 2016 at 11:47
  • I think it's problem with ul margin or padding, but please update your question with HTML, or sample of a code on codepen or jsfiddle. Thanks
    – ristapk
    Commented Jul 18, 2016 at 11:51
  • @ristapk That was my first though too, but looking at his css there is so much absolute positioning going on i suspect its because they are relative to the wrong element?
    – Sam
    Commented Jul 18, 2016 at 12:03
  • @Sam It can be, but I cannot give any feedback without sample of a code. Let's wait for update, and then we will discuss about it. :)
    – ristapk
    Commented Jul 18, 2016 at 12:05
  • 1
    Absolute positioning is a very poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out LearnLayout.com
    – Paulie_D
    Commented Jul 18, 2016 at 12:11

1 Answer 1

0

change your nav style to

#navbar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: #333;
    width: 1000px;
    position: relative;
    display: table;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.