html - Sticky footer elements not aligning -


Really easy issue is fished around the site, nothing is working.

There is a sticky navigation at the bottom of my site that does not stick below! It is not respecting the rules of my height and is overflowing with no relation.

I have tried:

  • Cleanfix
  • Overflow
  • Table display

    I tried everything I knew honestly

    I am aiming for visually:

     screenshot

    css / html / demo

      .fn {width: 100%; Height: 100%; Maximum-height: 41px; Bottom: 0; Left: 0; Status: Completed; Background color: #fff; } .fn ul {text-align: center; Margin: 0; Padding: 0; List style: none; }. Fn li {display: inline-block; } .fn A {display: block; Padding: 10px 5px 10px 30px; Text-decoration: None; Font-family: "ralve", without-serif; Font-size: 1.15em; Alphabets: 0.05em; Color: # 000; } .fn First {margin-right: 45.5px; Background image: URL (http://s28.postimg.org/f3f2a8mnd/fi2.png); Repeat Background: No Repetition; Background-position: left center; Background-size: 25px 25px; Top: -14px; Status: Relative; } .fn .mid {height: 55px; Bottom: 0; Margin: 0 auto; Z-index: 99 9 8 9; } .fn .mid img {height: 100%; Display: Inline-block; } .fn .second {margin-left: 45.5px; Background-image: url (http://s28.postimg.org/ag908gzah/fi1.png); Repeat Background: No Repetition; Background-position: left center; Background-size: 25px 25px; Top: -14px; Status: Relative; }   
      & lt; Div class = "fn" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "resume.pdf" target = "_ blank" class = "first" id = "L3" & gt; Resume & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "middle" & gt; & Lt; Img src = "http://s18.postimg.org/v70ga0bvt/image.png" & gt; & Lt; / Img & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "melto:" class = "second" id = "l4" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;    

    You have to change complete and vertical alignment li elements top .

      FN {width: 100%; Height: 100%; Max-height: 50px; Bottom: 0; Left: 0; Status: fixed; Background color: #fff; } .fn ul {text-align: center; Margin: 0; Padding: 0; List style: none; }. Fn li {display: inline-block; Vertical-alignment: top; } .fn A {display: block; Padding: 10px 5px 10px 30px; Text-decoration: None; Font-family: "ralve", without-serif; Font-size: 1.15em; Alphabets: 0.05em; Color: # 000; } .fn First {margin-right: 45.5px; Background image: URL (http://s28.postimg.org/f3f2a8mnd/fi2.png); Repeat Background: No Repetition; Background-position: left center; Background-size: 25px 25px; Status: Relative; } .fn .mid {height: 55px; Bottom: 0; Margin: 0 auto; Z-index: 99 9 8 9; } .fn .mid img {height: 100%; Display: Inline-block; } .fn .second {margin-left: 45.5px; Background-image: url (http://s28.postimg.org/ag908gzah/fi1.png); Repeat Background: No Repetition; Background-position: left center; Background-size: 25px 25px; Status: Relative; } .fn li: First-child, .fn li: last-child {padding-top: 10px; }   

    Object:

    Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -