изменить абсолютно позиционированную веб-страницу на центрированную - PullRequest
Новая
       36

изменить абсолютно позиционированную веб-страницу на центрированную

3 голосов
/ 16 марта 2010

Итак, у меня есть этот шаблон дизайна, который в настоящее время абсолютно позиционирован, но я пытаюсь сделать его центром любого широкоэкранного браузера Я попытался сделать ширину автоматической с левой и правой стороны в моем контейнере, но она все еще выравнивается по левой стороне.

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>

Я знаю, что созданный мной контейнер работает, если все мои классы div не позиционированы абсолютно. Нужно ли менять позицию или я сделал другую ошибку?

Ответы [ 3 ]

5 голосов
/ 16 марта 2010

Добавьте position: relative; к определению .wrapper.

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

Абсолютно позиционированный элемент должен находиться внутри относительно позиционированного элемента, иначе он не будет отображаться так, как вы предполагали.

0 голосов
/ 16 марта 2010

Ваша главная проблема в том, что ваша обертка должна быть позиционной: относительной; и маржа: 0 авто; будет центрировать обертку. также вы можете избавиться от HTML-элемента, который вам не нужен.

CSS: 

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

Надеюсь, это поможет.

0 голосов
/ 16 марта 2010

Я настоятельно рекомендую использовать CSS-фреймворк, такой как «Blueprint CSS». Это сэкономит вам много времени и поможет не только с позиционированием элементов, но и с множеством полезных функций, таких как типография, сброс CSS для поддержки нескольких браузеров и т. Д.

...