0

I am very new to web design HTML/CSS and we are asked to make a simple website for our school project, I saw a layout and liked the idea. here's the link: http://theme-frsch2.tumblr.com/

I'm having a problem on how to make the left part (the fixed part) stays on the center of the page when zooming out the browser(CTRL-/+). Can someone help me on how to make this possible?

I have made some progress, and used position fixed on the left part so that it will stays on screen even after scrolling but the thing is it sticks to the top when I tried zooming out the browser.

ayasocool
  • 157
  • 1
  • 4
  • 13

2 Answers2

0

Just use the css from the site you referenced.

  <div id="container"> <!-- horizontal centering (margin:auto) -->
    <div class="sidebar"> <!-- keep in screen when zooming (position:fixed) -->
      <div class="logo"> <!-- vertical centering (height 50% of 100%) -->
       <div class="something"> <!-- rearrange position (position absolute) -->
       </div> 
      </div>
    </div>
   </div>

#container {
    margin: auto;
    width: 860px;
}
.sidebar { 
    width: 400px;
    position: fixed;
    height: 100%;
}
.logo {
    height: 50%;
    position: relative;
    top: 0;
}
.something {
    position:absolute;
}
funerr
  • 7,212
  • 14
  • 81
  • 129
  • tried it, the image and text on the left side is gone but reappears at he bottom of the page when I zoom out at 50%. – ayasocool Aug 16 '14 at 09:22
0

It worked for me, hope it will work for you add at the end of your code (if you want just center the page delete the first row transform: scale(0.8)

body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}
Vineeth Sai
  • 3,389
  • 7
  • 23
  • 34
pickupartist
  • 11
  • 1