*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;
}
