Jump to content

html/css help gap between banner and nav


black_pearl
Go to solution Solved by fastsol,

Recommended Posts

hello everyone i just have started creating a new website and i have a problem i have a gap between the banner and the nav and i have been looking all over the net and couldn't find a solution :(

 

here is a ss : 

http://prntscr.com/7w4t80

 

and the css :

@CHARSET "ISO-8859-1";

 
html {
width: 1216px;
margin: auto;
font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
background-color: #fff7d8;
}
 
header{
text-align: center;
}
 
body {
font-family: "SourceSansPro Regular",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
}
 
#menu {
text-align: center;
background-color: #5f92cd;
padding: 2px 4px 2px 4px;
color: #180457;
}
 
nav  ul, ul {
list-style-type: none;
}
 
nav li, li {
display: inline-block;
list-style-type: none;
}
 
nav a {
text-decoration: none;
font-size: 1.2em;
padding: 0px 10px 0px 10px;
font-size: 1.2em;
}
 
nav a:hover {
background-color: white;
}
 
header a {
text-decoration: none;

}

Edited by black_pearl
Link to comment
Share on other sites

  • Solution

Ok, it's most likely the default margin on the h1 and ul tags.  You should use a reset.css file to strip off all the browser default padding and margins.  Then you can set everything the exact way you want it.

 

This is the reset that I use on every website.

/*////////////// CORE FILE DO NOT MODIFY ////////////////////*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

Just include that before your other css file.  You may have to adjust some other things too after using this, but it's truly the best way to do css.

  • Like 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.