black_pearl Posted July 23, 2015 Share Posted July 23, 2015 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 More sharing options...
fastsol Posted July 23, 2015 Share Posted July 23, 2015 Without the html is almost impossible to tell you anything. But it would be much easier to figure out with a link to the actual page. Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517208 Share on other sites More sharing options...
black_pearl Posted July 23, 2015 Author Share Posted July 23, 2015 html code : http://prntscr.com/7w4wzp css code : http://prntscr.com/7w4x6e its not on the net yet and i dont know a way to show to you if u know a way please let me know Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517209 Share on other sites More sharing options...
fastsol Posted July 23, 2015 Share Posted July 23, 2015 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. Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517210 Share on other sites More sharing options...
black_pearl Posted July 23, 2015 Author Share Posted July 23, 2015 oke thank you very i am going to try it out now and let you know Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517211 Share on other sites More sharing options...
black_pearl Posted July 23, 2015 Author Share Posted July 23, 2015 and btw how do u get the box to put code in it ? Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517212 Share on other sites More sharing options...
black_pearl Posted July 23, 2015 Author Share Posted July 23, 2015 thank you very much the big gap is gone : http://prntscr.com/7w5268 and is there a way to even delete the little gap left ? or its just like that? Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517214 Share on other sites More sharing options...
fastsol Posted July 23, 2015 Share Posted July 23, 2015 Please post your current css and html code here. Posting it to a image site does nobody any good, we can't copy it to test against. Just make sure to use the <> button in the WYSIWYG forum post editor to post the code. Link to comment https://forums.phpfreaks.com/topic/297445-htmlcss-help-gap-between-banner-and-nav/#findComment-1517238 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.