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:
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
Post a Comment