Centre resizing image between fixed header/footer

Question

How to place an image between a fixed header/footer and prevent overlap?
How to centre an image on the page when the window is bigger than its max-width/height?

The current working example: http://john-marshall.net

CSS

#content {
    position:relative;
}

#headerwrap {
    position:fixed;
    width: 100%;
    height:60;
    background-color:#fff;
    z-index:99;
}

#header {
    border-top: 1px solid #000;
    margin:20 20 0 20;
}

#title {
   font-size:15px;
   font-family: "Fugue-Regular";
   font-weight:100;
   padding-top:5px; 
}

#footerwrap {
   position:fixed;
   width: 100%;
   height:60;
   bottom:0;
   background-color:#fff;
   z-index:99;
}

#footer {
   border-bottom: 1px solid #000;
   height:40;
   margin:0 20 20 20;
}

/*gallery*/

#gallerywrap{
   position:fixed;
   margin:60 20 60 20;
   text-align: center;
}

#gallery{
   width:100%;
   height:auto;
}

.img {
   max-width: 100%;
   max-height: 100%;
}

HTML

<body>
<div id="content">

   <div id="headerwrap">
       <div id="header">

           <div id="title"><a href="#" class="menu">John Marshall</a></div>

           <div id="menuli">
                <ul>
                     <li><a href="#">Project 1</a></li>
                </ul>
           </div>

       </div>
   </div>

   <div id="gallerywrap">
       <div id="gallery">
             <img src="http://john-marshall.net/images/selected/cafe.jpg" class="img" alt="Cafe" />
       </div>
   </div>

  <div id="footerwrap">
       <div id="footer">

       </div>
  </div>

all your elements are in position:fixed, that's not the way to go — valerio0999, Jul 08 '14 at 13:58
Possible duplicate of http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — Blazemonger, Jul 08 '14 at 14:03

Bobby5193 · Answer 1 · 2014-07-08T14:46:34.907

0

Make the following changes to your css :

    #gallerywrap {
       position: fixed;
       margin: 60px 0px 60px 0px;
       text-align: center;
       width: 100%;
    }

Is this the effect you are looking for ?

edited Jul 08 '14 at 14:46

answered Jul 08 '14 at 13:55

Bobby5193

1,585
1
13
23

Though the image centres it still sits beneath the footer and when shrunk the right margin doesn't function. – John Marshall Jul 09 '14 at 09:23

score 0 · Answer 2 · answered Jul 08 '14 at 14:03

0

CSS :

#gallery{
   width:100%;
   height:auto;
   margin:0px auto;
}

try this and check your margin in #gallerywrap.

answered Jul 08 '14 at 14:03

J Prakash

1,323
8
13

Centre resizing image between fixed header/footer

2 Answers2