html - Unexplained Gap Between <header> and <main> -

-

i can not seem rid of space exists between header , main content. see black background above background image , below navigation. great. 

<!doctype html> <html>     <head>     <meta charset="utf-8">     <title>awesome landing page</title>     <link rel="stylesheet" type="text/css" href="css/style.css">     </head> <body>     <header>         <div id="header-container">             <div class="col-3">                 <img class="logo" src="images/logo-dark.png" height="18" width="143">             </div>             <div class="col-3">             <nav>                 <ul class="menu">                     <li>home</li>                     <li>features</li>                     <li>about</li>                     <li>signup</li>                 </ul>                 </nav>             </div>             <div class="col-3">                 <a href="#" class="getstartedbtn">get started</a>             </div>         </div><!-- header-container ends here -->     </header>     <main>     <section>         <div id="top-section-main">             <div id="top-section-content">                 <h1>awesome looks good</h1>                 <p>awesome landing page wish had when started.</p>             </div>         </div>         </section>     <section></section>     <section></section>     <section></section>     <section></section>     <section></section>     </main>     <footer></footer> </body> </html>

css

html {     font-family: "lato", "helvetica neue", "helvetica", "arial", sans-serif; } body {     background-color: black;      margin: 0; } header {     height: 80px;     background-color: #ffffff; } #header-container {     width: 75%;     margin: auto; } .col-3 {     width: 33%;     float: left; } .logo {     padding-top: 30px;    } .menu {     margin-top: 32px;   } .menu li {     list-style-type: none;     display: inline;     font-size: .85em;     color: #8e8e8e;     padding-right: 30px; } .getstartedbtn {     background-color: #6dc77a;     border-radius: 28px;     -moz-border-radius:28px;     -webkit-border-radius:28px;     text-decoration: none;     color: #ffffff;     padding: 10px 26px;     margin-top: 20px;     display: inline-block;     font-size: 17px;     float: right; } #top-section-main {     height: 740px;     background-image: url(../images/friends.jpg); }

this caused top margin of <h1> located in <div id="top-section-content">. reproduced in below snippet.

body {      background:gray;  }    header {      height:50px;      background:orange;  }    section {      background:red;  }    #fixed-1 section {      padding-top:1px;  }    #fixed-2 h1 {      margin-top:0;      padding-top:16px;  }
<div>      <header></header>            <section>          <h1>hello i'm broken</h1>      </section>  </div>    <div id = "fixed-1">      <header></header>            <section>          <h1>hello i'm fixed padding on container!</h1>      </section>  </div>    <div id = "fixed-2">      <header></header>            <section>          <h1>hello i'm fixed replacing margin padding!</h1>      </section>  </div>

you can solve replacing top margin top padding instead or can add top padding of 1 pixel container.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more