Центр не является центром на ответственном сайте

Question

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

Прежде всего, вот мой сайт: «Narnia Greenville».

Вопрос заключается в следующем: временная шкала (named thermometer.png) находится вне центра, хотя я следил за всеми вариантами отсюда: «http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/», а также с нескольких других сайтов. Кроме того, если вы измените размер своего окна, он, по всей видимости, прыгнет справа налево в определенный момент. Я не могу понять это, и в последний раз, когда я попытался создать такой сайт (я потерпел неудачу с жадностью), я столкнулся с такой же проблемой. Я уверен, что этот вопрос должен смотреть мне в лицо (и, вероятно, смеяться надо мной), но я не вижу его для жизни. Цель состоит в том, чтобы «thermometer.png» центрировался как по горизонтали, так и по вертикали на странице, а также поверх всех других изображений.

Дальше: Изображения ОГРОМНЫЕ! И возьмите FOREVER, чтобы загрузить, поэтому, если вы находитесь на ограниченном интернет-соединении, я предлагаю перейти к чужому вопросу. Я работаю над этим. Как я уверен, вы можете сказать, что я новичок в этом. (Я «перестраиваю» темы Wordpress для большей части моего ограниченного опыта веб-дизайна, и ни одна из них не включает в себя такие вещи. Это просто работает ... LoL.) Так или иначе, хотя и не конкретный вопрос, если вы чувствуйте себя документирующим, как вы сокращаете время загрузки изображения, пожалуйста, не стесняйтесь.

Большое спасибо всем, кто готов помочь мне. И снова, я прошу прощения, если любой из них - глупый вопрос. Лол.

Answer 1

Ваши изображения могут быть сжаты с помощью инструментов, таких как http://tinypng.org/ и http://www.jpegmini.com/, если вы экспортируете из фотошоп, используйте опцию «сохранить для Интернета и устройств».

Answer 2

Ваш термометр прыгает справа налево, если ширина окна ниже 1024 пикселей. Вот эта часть CSS:

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    .thermometer { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
} 

Попробуйте изменить оба этих направо и посмотреть, если это решит проблему.

Существуют и другие проблемы. Это изображение 3696px (2772px @ 75%) в ширину. Вам нужно использовать некоторые математические функции CSS3, чтобы правильно настроить этот зверь.

.thermometer { 
    /* Set rules to fill background */ 
    min-height: auto; 
    min-width: 100px; 

    /* Set up proportionate scaling */ 
    width: 75%; // maybe this should be: **width: calc(100% - 1386px);** 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 50%; 
    left: 50%; // I don't see a reason for this at all... just let it take up the entire page 
    z-index: 9997; 
} 

Answer 3

Woohoo !!! Большое спасибо @DevlshOne за помощь! С небольшим количеством игр, у меня это получилось! Код, который я в конечном итоге с помощью был это (изменение, используя все проценты от @ кода DevlshOne здесь: http://jsfiddle.net/devlshone/WASbe/2/):

.class { 
position: fixed; 
min-height: auto; 
min-width: 100px; 
/* Set up proportionate scaling */ 
width: calc(100% - 30px); 
left: calc(50% - 47%); 
height: auto; 
/* Set up positioning */ 
top: 40%; 
z-index: 9997; 

}

Я загрузив его на тестовом сайте, как я печатаю, и он должен оставаться там в течение некоторого времени для ссылки на кого-нибудь, у кого есть эта проблема. (Тестовый сайт здесь: http://goo.gl/9aXRcf.) Пока все хорошо, и еще раз спасибо за вашу помощь!