Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Gap between Nav bar and top of page

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #40525

    *sigh* I’ve tried everything i know, but between the top of my navigation bar and the top of the page is a tiny gap. It’s driving be absolutely up the wall. I do all my own HTML and CSS, and i’m still learning. Any ideas, anyone?

    Here’s the CSS:


    html{
    margin-top:0;
    padding:0;
    }

    body{
    color:#ffffff;
    background:url('background.png');
    background-size:100%;
    font-family:"Comic Sans MS";
    margin:0;
    height:100%;
    width:100%;
    background-attachment:fixed;

    }

    nav {
    width: 100%;
    }

    nav ul {
    width:100%;
    background: #efefef;
    background: linear-gradient(top, #e0e0e0 0%, #686868 100%);
    background: -moz-linear-gradient(top, #e0e0e0 0%, #686868 100%);
    background: -webkit-linear-gradient(top, #e0e0e0 0%, #686868 100%);
    box-shadow: 0px 0px 9px rgba(255,255,255,0.15);
    padding: 0 20px;
    margin-top:none;
    list-style: none;
    position: relative;
    display: inline-table;
    font-family: "Times New Roman";
    }

    nav ul:after {
    content: ""; clear:both; display:block;
    }

    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {
    display: block;
    }
    nav ul li{
    float: left;
    }

    nav ul li:hover{
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    }

    nav ul li:hover a{
    color:#fff;
    }

    nav ul li a{
    display: block;
    padding: 25px 40px;
    color: #d8d8d8;
    text-decoration: none;
    }

    nav ul ul{
    background: #5f6975;
    border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    width: 15%
    }

    nav ul ul li{
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
    position: relative;
    }

    nav ul ul li a{
    padding: 15px 40px;
    color:d8d8d8;
    }

    nav ul ul li a:hover{
    background: #4b545f;
    }

    .gamecontainer{
    background: #000000;
    padding: 15px;
    border-radius: 10px;
    width: 70%;
    height: 65%;
    float:left;
    }

    .center {
    margin-left:auto;
    margin-right:auto;
    }

    .controls {
    }

    .toggle {
    }

    .mainparagraph {
    padding:10px;
    }

    #112936
    Paulie_D
    Member

    We need to see a link to a live site.

    #112937

    Sadly, it’s a site i have on my flash drive. :( any way i could post the folder?

    #112939
    Paulie_D
    Member

    Nope….you’ll have to put a reduced case in [Codepen](http://codepen.io/pen/ “Codepen”)

    My guess is that it may relate to “inline-table”

    #112940

    How would i do that? (and thank you for making the css look nicer in my post.)

    #112941
    JoniGiuro
    Participant

    try this in your html:


    topmargin=”0″>

    i usually use a reset.css that might help in these case:
    http://meyerweb.com/eric/tools/css/reset/

    #112942
    Paulie_D
    Member

    Or you could use ‘normalise’

    To put your html & CSS in codepen, go to codepen.io and put your HTML& CSS in the appropriate boxes.

    Don’t bother with the body background image though.

    #112943

    Ahhhh…. Thanks, JoniGiuro. i’d been too lazy to make a reset.css. i’ll be sure to make a habit of it in the future. :)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.