Jump to content

html/css help gap between banner and nav


black_pearl

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;

}

Link to comment
https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/
Share on other sites

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.