html - How to in-page anchor link into a grid of images and respect a fixed site header? -


this repost. when asked question marked duplicate of question:

html position:fixed page header , in-page anchors

but don't think duplicate because accepted answer there doesn't work question. accepted answer there add top padding element anchor linked to. have grid of images , of them anchor linked to. if add top padding of elements in grid anchor linking work fixed header grid gets messed top padding.

is there way without messing grid layout?

here's example code without top padding on each element:

<div id="header">     <a href="#grp1">grp1</a>     <a href="#grp2">grp2</a>     <a href="#grp3">grp3</a>     <a href="#grp4">grp4</a> </div> <div id="main">     <div id="content">         <div class="pic-a" id="grp1"></div>         <div class="pic-a"></div>         <div class="pic-a"></div>         <div class="pic-a"></div>         <div class="pic-b"></div>         <div class="pic-b" id="grp2"></div>         <div class="pic-b"></div>         <div class="pic-b" id="grp3"></div>         <div class="pic-c"></div>         <div class="pic-c"></div>         <div class="pic-c"></div>         <div class="pic-c"></div>         <div class="pic-d"></div>         <div class="pic-d" id="grp4"></div>         <div class="pic-d"></div>         <div class="pic-d"></div>     </div> </div> 

here's css:

body {     margin: 146px 32px 146px 32px;     background-color: #ffffff; }  #header {     background:#ffdddd;     position:fixed;     height:146px;     margin:0 auto;     white-space:nowrap;     top:0;     max-width:1206px;     left:37px;     right:37px;     z-index:1000; }  #header {     margin-right: 12px; }  #main {     margin:0 auto;     max-width:1216px; }  #content > div {     margin: 0 5px 10px 5px;     float: left;     width: 294px;     height: 441px; }  .pic-a {     background-color: #aaffaa; }  .pic-b {     background-color: #aaaaaa; }  .pic-c {     background-color: #aaaaff; }  .pic-d {     background-color: #777700; }

here's js fiddle:

https://jsfiddle.net/7yah3hqt/


Comments