change an absolutely positioned webpage into a centered one

StackOverflow https://stackoverflow.com/questions/2451043

  •  20-09-2019
  •  | 
  •  

Question

So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side.

Css

  .JosephSettin_png
  {
   position: absolute;
   left:0px;
   top:0px;
   width:216px; 
   height:40px;
   background: url("JosephSettin.png") no-repeat;
  }
  .home_png
  {
   position: absolute;
   left:472px;
   top:16px;
   width:48px; 
   height:16px;
  }
  .discography_png
  {
   position: absolute;
   left:528px;
   top:16px;
   width:80px; 
   height:24px;
  }
  .purchase_png
  {
   position: absolute;
   left:608px;
   top:16px;
   width:88px; 
   height:24px;
  }
  .about_png
  {
   position: absolute;
   left:696px;
   top:16px;
   width:48px; 
   height:24px;
  }
  .contact_png
  {
   position: absolute;
   left:744px;
   top:16px;
   width:56px; 
   height:24px;
  }
  .main__pic_png
  {
   position: absolute;
   left:0px;
   top:56px;
   width:264px; 
   height:264px;
   background: url("main_pic.png") no-repeat;
  }
  .footer__lines_png
  {
   position: absolute;
   left:0px;
   top:512px;
   width:800px; 
   height:24px;
   background: url("footer_lines.png") no-repeat;
  }
  .info__heading_png
  {
   position: absolute;
   left:32px;
   top:360px;
   width:216px; 
   height:32px;
   background: url("info_heading.png") no-repeat;
  }
  .info__pic3_png
  {
   position: absolute;
   left:265px;
   top:360px;
   width:159px; 
   height:112px;
   background: url("info_pic3.png") no-repeat;
  }
  .info__pic2_png
  {
   position: absolute;
   left:432px;
   top:360px;
   width:176px; 
   height:112px;
   background: url("info_pic2.png") no-repeat;
  }
  .info__pic1_png
  {
   position: absolute;
   left:616px;
   top:360px;
   width:177px; 
   height:112px;
   background: url("info_pic1.png") no-repeat;
  }
  .info__pane_png
  {
   position: absolute;
   left:0px;
   top:345px;
   width:800px; 
   height:144px;
   background: url("info_pane.png") no-repeat;
  }
  body
  {
   text-align: center;
   background-color:maroon;
  }
  #wrapper {
            width: 800px;
            margin-left: auto;
   margin-right: auto;
            text-align: left;
  }
  #a {
   text-decoration: none;
   color:white;
   font-weight:bold;
  }
 .style1 {
  font-weight: bold;
  color: #FFFFFF;
 }

html

    <body>
  <center>
  <div id="wrapper">
    <div class="JosephSettin_png"> </div>
    <div class="home_png"> <a href="home.html" style="color:yellow">Home</a></div>
    <div class="discography_png"> <a href="discography.html">Discography</a></div>
    <div class="purchase_png"><a href="store.html"><span class="style1">Store</span></a></div>
    <div class="about_png"><a href="about.html">About</a></div>
    <div class="contact_png"><a href="contact.html"><span class="style1"></span>Contact</a></div>
    <div class="ad_png"> </div>
    <div class="main__pic_png"> </div>
    <div class="welcome__header_png"> </div>
    <div class="welcome__text_png"> </div>
    <div class="footer__lines_png"> </div>
    <div class="footer__text_png"> </div>
    <div class="info__pane_png"></div>
    <div class="info__heading_png"> </div>
    <div class="info__text_png"> </div>
    <div class="info__pic3_png"> </div>
    <div class="info__pic2_png"> </div>
    <div class="info__pic1_png"> </div>
    <div class="info__pic3_png"> </div>
  </div>
  </center>
  </body>

I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?

Was it helpful?

Solution

Add position: relative; to the .wrapper definition.

http://www.w3.org/TR/CSS2/visuren.html#choose-position

An absolutely positioned item must be inside of a relatively positioned item, or it will not display as you intended.

OTHER TIPS

Your main problem is that your wrapper needs to be position:relative; and margin:0 auto; will center the wrapper. also you can get rid of you HTML element its not needed.

CSS:

#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}

Hope this helps.

I strongly suggest using a CSS framework like "Blueprint CSS". It'll save you a lot of time and helps not just with positioning of elements but comes with a lot of nice features like typography, css reset for multi-browser support, etc.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top