- This topic is empty.
-
AuthorPosts
-
October 30, 2012 at 12:45 pm #40525
KawaiixPikaboy
Member*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;
}
October 30, 2012 at 12:47 pm #112936Paulie_D
MemberWe need to see a link to a live site.
October 30, 2012 at 12:48 pm #112937KawaiixPikaboy
MemberSadly, it’s a site i have on my flash drive. :( any way i could post the folder?
October 30, 2012 at 12:50 pm #112939Paulie_D
MemberNope….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”
October 30, 2012 at 12:52 pm #112940KawaiixPikaboy
MemberHow would i do that? (and thank you for making the css look nicer in my post.)
October 30, 2012 at 12:52 pm #112941JoniGiuro
Participanttry 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/
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.
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. :)
- The forum ‘CSS’ is closed to new topics and replies.