Изображение заголовка слева: 0 - плавать с изменением размера браузера - но останавливаться после выравнивания с элементом div страницы - PullRequest
Новая
       30

Изображение заголовка слева: 0 - плавать с изменением размера браузера - но останавливаться после выравнивания с элементом div страницы

0 голосов
/ 28 марта 2012

У меня есть вопрос, который я не знаю, как правильно сформулировать, поэтому заранее извиняюсь за отсутствие правильной терминологии.Я пытаюсь выровнять изображение заголовка по левому и левому краям: 0px;- с положением: абсолютное;так что когда страница загружается на экранах разных размеров, она всегда будет прилипать к левой части окна браузера.Но в то же время я хочу, чтобы изображение заголовка останавливалось, когда оно загружается на экран большего размера, когда оно выравнивается по левому краю страницы (если это имеет смысл).Страница ниже:

http://tinyurl.com/d2zttye

Я хочу, чтобы изображение BREAKWATER перемещалось вместе со страницей по мере ее изменения размера, но останавливалось, когда оно встречало фоновое изображение под ним (#page div).Таким образом, при загрузке в окнах, размер которых превышает размер фонового изображения (1592 пикселя), он не будет перемещаться дальше влево.На данный момент он не плавает с размером страницы и обрезается на маленьких экранах.

Надеюсь, это имеет смысл, и дайте мне знать, если мне нужно что-то прояснить.Буду признателен за любую помощь!

Спасибо !!!

1 Ответ

1 голос
/ 08 апреля 2012

Разобрался!Используя экран @media, я смог определить, как будет располагаться заголовок на странице, когда окно браузера меньше 1592px и больше 1593px.#bwheader - это div, и когда окно меньше 1592px, оно перемещается влево с помощью браузера с отступом в 10px.Когда окно больше 1593px, оно остается фиксированным (но с использованием позиции: абсолютное и центрирование div с использованием отрицательных полей и оставшихся 50%).Надеюсь, это поможет всем, кому это нужно! 

@media screen and (max-width: 1592px) 
 {
    #bwheader{
    position:absolute;
    top:0px;
    height:74px;
    float:left;
    padding-left:10px;
 }
}

@media screen and (min-width: 1593px) 
 {
    #bwheader{
    position:absolute;
    top:0px;
    width:1592px;
    margin-left:-796px;
    left:50%;
    height:74px;
 }
}
...