Попытка выровнять текст с фоновым изображением.Если ниже определенного разрешения, текст слева перемещается. Как я могу это исправить? - PullRequest
Новая
       11

Попытка выровнять текст с фоновым изображением.Если ниже определенного разрешения, текст слева перемещается. Как я могу это исправить?

0 голосов
/ 31 января 2011

Вот код CSS, который я использую: 

#wrapper{
 position:relative;
 width:950px;
 margin-left:auto;
 margin-right:auto
}

#content {
 text-align: left;
 padding: 0px 25px 0px 25px;
    margin-left: auto;
    margin-right: auto;
 position: absolute;
 left: 50%;
 /*half of width of element*/
 margin-left: -450px;
 height: auto;
 }

А это сайт: http://projectstratos.com/31-01-11/

Пожалуйста, игнорируйте социальные иконки и проблемы с ростом.

Чтобы понять, что я имею в виду, сделайте ваш браузер меньше и больше. Текст перемещается вправо, а фоновое изображение остается в центре. Как я могу это исправить?

1 Ответ

0 голосов
/ 02 февраля 2011

Я не верю, что есть реальное «решение» проблемы, которую вы представляете. Когда вы говорите, что текст «движется вправо» в действительности, текст вообще не движется. Ваше фоновое изображение просто пытается удержаться в центре горизонтальной оси, которую вы меняете.

Например .. Если у вас есть сайт Bungie http://www.bungie.net/Projects/Reach/default.aspx и вы выполняете то же действие. Вы получите тот же «эффект», что и вы. Разница лишь в том, что фон текста на их веб-сайте не является частью фонового изображения.

Вот что вам нужно сделать, чтобы «исправить» вашу проблему.

  1. Отделите фон (планета, космос и т. Д.) От логотипа, фиолетовой рамки и т. Д.
  2. Держите пространство, планету и т. Д. В том же месте, что и фоновое изображение, которое там сейчас.
  3. Возьмите фиолетовую коробку и поместите ее в свой собственный div, который оборачивает все ваше содержимое

Ваш код будет выглядеть примерно так: 

<body>
  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">
      <h1>jhkljhlkjhlkj</h1>
    </div>
  </div>
</body>

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

...