Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Problems with fixed header

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 3, 2014 at 11:54 am #169156
    aprobert
    Participant

    First of all I love your site! I’m just starting out learning how to code and your site has been immeasurably helpful. So I have a site I’m playing around with testing things out and I’m having trouble getting a fixed header. When the header isn’t fixed the layout looks ok. But you’ll see when I have the header fixed the main section div below it moves up underneath the header. I’m assuming it has something to do with the floats I have, but I really can’t figure out. Thanks for any help and please forgive the sloppy code. Remember, I’m just starting. html
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”UTF-8″>
    <title>Me practicing coding</title>
    <link rel=”stylesheet” type=”text/css” href=”css/normalize.css”>
    <link rel=”stylesheet” type=”text/css” href=”css/style.css”>
    <link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&#8242; rel=’stylesheet’ type=’text/css’>
    </head>

    <body>

    <object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
    About Me
    <object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
    Learning
    <object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
    Sandbox
    <object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
    Resources 

    <div>
    <div>
        &lt;h1 class="heading"&gt;About Me&lt;/h1&gt;
        <img src="img/intro-icon.png" alt="intro icon" />
    </div>
    <div>
        I am trying to learn how to code.This is my test site.  We'll see how it turns out.  Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.
    </div>
</div>
<div>
    <div>
        &lt;h1 class="heading"&gt;How I'm Learning&lt;/h1&gt;
        &lt;object type="image/svg+xml" data="img/about-me.svg" id="icon2"&gt;&lt;/object&gt;
    </div>
    <div>
        I am trying to learn how to code.This is my test site.  We'll see how it turns out.  Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.
    </div>
</div>
<div></div>
<div></div>
<div></div>

    </body>

    </html>
    \
    \css

    • {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box
      box-sizing: border-box;
      }

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    p, h1, h2, h3 {
    margin-top: 0;
    }

    div {
    min-height: 10%;
    }

    p {
    font-family: “Open Sans Condensed” , sans-serif;
    font-size: 1.5em;
    }

    h1 {
    font-family: “Open Sans Condensed” , sans-serif;
    font-size: 3em;
    }
    img,
    object {
    max-width: 100%;
    }

    .nav-right {
    float: right;
    border: 2px dotted black;
    width: 43%;
    padding-top: 1%;
    margin-top: 1%;
    margin-right: 3%;
    }
    .nav1 {
    display: inline-block;
    margin-right: 5%;
    }

    .small {
    font-size: 1.25em;
    color: #474747;
    display: inline-block;
    vertical-align: middle;
    }
    .icon-nav {
    width: 25px;
    display: inline-block;
    opacity: 0.5;
    }
    .nav1:hover .icon-nav {
    opacity: 1;
    }
    .nav1:hover .small {
    color: black;
    }

    .top {
    background: #CDD5DD;
    position: fixed;
    width: 100%;
    height: 90px;
    top: 0;
    }
    .intro {
    background: #FFC266;
    border: 2px dotted black;
    }
    .learn {
    background: #3366CC;
    }
    .layout {
    background: #FF4747;
    }
    .resources {
    background: #33D685;
    }
    .bottom {
    background: #4E545A;
    }
    .heading {
    display: block;
    border: 1px dotted black;
    margin-top: 2%;
    }
    .col-right , .col-left {
    border: 2px dotted black;
    margin-top: 5%;
    min-height: 100px;
    }
    .col-left {
    width: 43%;
    float: left;
    margin-left: 5%;
    margin-right: 3%;
    }
    #icon1 {
    width: 45%;
    padding: 0;
    margin: 0;
    }
    #icon2 {
    width: 45%;
    padding: 0;
    margin: 0;
    }
    .col-right {
    width: 43%;
    float: right;
    margin-right: 5%;
    margin-bottom: 5%;
    }
    #me {
    color: white;
    }

    /Clearfix/
    .group:after {
    content: “”;
    display: table;
    clear: both;
    }
    \

    May 3, 2014 at 8:06 pm #169170
    Alen
    Participant

    When you set the position of an element to fixed the window (the visible area) essentially becomes its frame. The element is taken out of document flow. Think of it as a soda machine, what happens when you put in $1.35 and press D2, soda pops out and another one slides in its place. Basically same thing happens with the element, so whatever was underneath it now moves up. To get around this you would set the margin on the content that follows your header to the height of the header.

    This example might be helpful as well. It shows the difference between fixed and absolute position and further explains the idea of a frame.

    Hope that helps,
    -Alen

    May 5, 2014 at 12:39 am #169223
    aprobert
    Participant

    Great! Thanks for the help. I knew absolute positioning took the element out of the flow, but didn’t know fixed did also. Relative positioning does not take it out of the doc flow though, right?

    May 5, 2014 at 1:08 am #169225
    Scott
    Participant

    No relative still keeps the elements in the natural flow of the document.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.