-1

これらの質問のいずれか (主なものがあり、次に重要でないものがあります) のいずれかが絶対にばかげた質問である場合は、本当に申し訳ありませんが、困惑していることを認めなければならないので、私が得ることができる助けに感謝します.

まず、ここに私のサイトがあります: " Narnia Greenville ".

問題はこれです: タイムライン (thermometer.png という名前) は中心から外れていますが、ここからすべてのオプションに従いました: " http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal- an-image/ "、および他のいくつかのサイトから。さらに、ウィンドウのサイズを変更すると、明確な理由もなく、ある時点で右から左にジャンプするように見えます。私はそれを理解することができず、最後にこのようなサイトを試みたとき (惨めに失敗しました)、これと同じタイプの問題に遭遇しました。この問題は私を正面から見つめているはずです (そしておそらく私を笑っています) が、私は一生それを見ることができません。目標は、「thermometer.png」をページの水平方向と垂直方向の両方の中央に配置し、他のすべての画像の上に配置することです。

次へ: 画像がでかい! そして、読み込みには永遠にかかるので、インターネット接続が限られている場合は、他の人の質問に進むことをお勧めします. 私はそれに取り組んでいます。お察しのとおり、私はほとんどのことを初めて知りました。(私は限られたウェブデザインの経験のほとんどでワードプレスのテーマを「再構築」してきましたが、この種のものは含まれていません。うまくいきます... LoL.)とにかく、具体的な質問ではありませんが、画像の読み込み時間をどのように短縮したかを文書化したい場合は、お気軽にどうぞ.

私を助けてくれる人に感謝します。繰り返しますが、これらのいずれかがばかげた質問である場合はお詫び申し上げます。笑。

4

3 に答える 3

1

画像は、http ://tinypng.org/やhttp://www.jpegmini.com/などのツールで圧縮できます。Photoshop からエクスポートする場合は、「Web およびデバイス用に保存」オプションを使用します。

于 2013-10-03T01:36:04.717 に答える
0

Your thermometer jumps from the right to left if the window width is below 1024px. That's this portion of the CSS:

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

Try changing both of these to right and see if that solves the issue.

There are other problems, as well. That image is 3696px (2772px @ 75%) wide. You need to use some CSS3 math functions to get this beast centered properly.

.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;
}
于 2013-10-03T01:52:33.157 に答える