Положение кнопки CSS продолжает меняться при изменении размера/масштабировании

У меня большие проблемы с кнопками css ... Размер моего экрана - 1366x768, и их положение прекрасное, пока я не уменьшу масштаб в браузере или не покажу его кому-то, у кого больше экрана.Положение кнопки CSS продолжает меняться при изменении размера/масштабировании

Может ли кто-нибудь помочь мне, пожалуйста?

сайта с проблемами: http://riotpointscodes.info/region.html

источник

2012-03-26 dvLden

Ваше отверстие HTML разметка очень плохо :( – sandeep

Ваша проблема является абсолютным позиционирование ваших кнопок, но вы должны подумать о своей полной архитектуре. Страница построена каким-то странным образом. –

Скучно на работе сегодня и ваши графики было довольно прохладно так ....

Вот ты мой друг:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Riot Points Codes</title> 
     <link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" /> 
     <style type="text/css"> 
      body { 
       background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14; 
       margin: 0; 
       padding: 0; 
      } 
      #wrapper { 
       width: 895px; 
       height: 493px; 
       position:relative; 
       top:180px; 
       margin:0 auto; 
       background: url('region_files/paper.jpg') no-repeat top center; 
      } 

      .choice { 
       background: url("region_files/map.png") no-repeat scroll 0 0 transparent; 
       height: 212px; 
       left: 50%; 
       margin-left: -259px; 
       position: absolute; 
       top: 43px; 
       width: 517px; 
      } 

      .logo { 
       left: 50%; 
       margin-left: -205px; 
       position: absolute; 
       top: -135px; 
      } 
      #lol-custom-buttons { 
       position: absolute; 
       bottom: 107px; 
       left: 0px; 
       width: 100%; 
       height: 90px; 
       text-align:center 
      } 
      .play-free-link { 
       height: 90px; 
       width: 251px; 
       background-repeat: none; 
       color: #ECC873; 
       display: inline-block; 
      } 

      .play-free-link.one { 
       background-image: url("http://riotpointscodes.info/images/1n.png"); 
      } 

      .play-free-link.one:hover { 
       background-image: url("http://riotpointscodes.info/images/1h.png"); 
      } 

      .play-free-link.two { 
       background-image: url("http://riotpointscodes.info/images/3n.png"); 
      } 

      .play-free-link.two:hover { 
       background-image: url("http://riotpointscodes.info/images/3h.png"); 
      } 
      .play-free-link.three { 
       background-image: url("http://riotpointscodes.info/images/2n.png"); 
      } 

      .play-free-link.three:hover { 
       background-image: url("http://riotpointscodes.info/images/2h.png"); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div class="logo"><img src="region_files/logo.png"></div> 
      <div class="choice"></div> 
      <div id="lol-custom-buttons"> 
       <a class="play-free-link one" href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link two " href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link three" href="http://riotpointscodes.info/"></a> 
      </div> 
     </div> 
    </body> 
</html>

источник

2012-03-26 19:20:06

Дальнейшая оптимизация будет заключаться в использовании спрайтов изображений. –

Спасибо всем вашим людям, и особенно TimWickstrom;) Cheers ! Работает как шарм. – dvLden

Вы позиционируют свои кнопки Absolutley в теле документа:

Пример левой кнопкой:

position: absolute; 
top: 475px; 
width: 251px;

Place все кнопки в контейнере, расположенные над бумагой и установите положение относительно или абсолютное, а затем воспроизведите с размещением кнопок.

источник

2012-03-26 18:45:12

Когда вы используете абсолютное позиционирование, вам нужна опорная точка. Якорная точка - это первый элемент в дереве HTML, который имеет position:relative. Если элемент не найден, тег BODY становится точкой привязки.

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

источник

2012-03-26 18:47:08

Положение кнопки CSS продолжает меняться при изменении размера/масштабировании

ответ

Смежные вопросы