mude uma página da web absolutamente posicionada em uma central

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

  •  20-09-2019
  •  | 
  •  

Pergunta

Então, eu tenho esse design de modelo que está absolutamente posicionado, mas estou tentando torná -lo centrado em qualquer navegador widescreen. Tentei fazer a largura automática no lado esquerdo e direito do meu recipiente, mas ainda está alinhado com o lado esquerdo.

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>

Conheço o contêiner que crio trabalhos se todas as minhas classes de div não estiverem absolutamente posicionadas. Tenho que mudar a posição ou cometi outro erro?

Foi útil?

Solução

Adicionar position: relative; para o .wrapper definição.

http://www.w3.org/tr/css2/visuren.html#choose-position

Um item absolutamente posicionado deve estar dentro de um item relativamente posicionado ou não será exibido como você pretendia.

Outras dicas

Seu principal problema é que seu invólucro precisa ser posição: relativa; e margem: 0 automático; Centralizará o invólucro. Além disso, você pode se livrar de seu elemento HTML não é necessário.

CSS:

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

Espero que isto ajude.

Eu sugiro fortemente o uso de uma estrutura CSS como "Blueprint CSS". Ele economizará muito tempo e ajuda não apenas ao posicionamento de elementos, mas vem com muitos recursos interessantes, como tipografia, CSS redefinindo para suporte a multi-navegador, etc.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top