CSS Позиционирование не работает - PullRequest
Новая
       0

CSS Позиционирование не работает

0 голосов
/ 29 июля 2011

Я был усугублен этой проблемой в течение последних 2 часов. Это невероятно.

Я создаю простой левый столбец с тремя компонентами: фон заголовка, средний повторяющийся белый фон и фон бота. По какой-то глупой причине средний повторяющийся фон продолжает перекрывать заголовок. Он не будет двигаться вниз, когда я использую "background-position".

Вот мой код CSS: 

.leftcolumn .block{

background-color:#FFFFFF;

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_center.png);[/url]
background-position:0px 10px;
background-repeat: repeat-y;

width:205px;
}


.leftcolumn .block .wrap {

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_header.png);[/url]
background-repeat: no-repeat no-repeat;
width:205px;
padding-left:0px;
padding-top:10px;

}


.leftcolumn .block .bot {
background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_bot.png);[/url]
background-repeat: no-repeat repeat;
background-position: 0px 51px;
}

Мой HTML: 

        <div class="block">

            <div class="wrap">

            <div class="navigation">
                <ul>
                <li><a href="#" title="">Link 1</a></li>
                <li><a href="#" title="">Link 2</a></li>
                <li><a href="#" title="">Link 3</a></li>

                </ul>
            </div>
            </div>
            <span class="bot"> </span>

        </div>

Ответы [ 2 ]

0 голосов
/ 29 июля 2011

Это то, что вы ищете?

http://jsfiddle.net/7TVkh/

0 голосов
/ 29 июля 2011

background-position не будет перемещать реальные элементы, это только там, где начинается получение изображения.Примером может служить изображение со спрайтом: вы устанавливаете фоновую позицию, чтобы получить состояние «over», а затем другое для состояния «hover».Вы можете попробовать использовать фактическое позиционирование (например, top, bottom, left и right), или попытаться использовать поля, чтобы расположить его так, как вы хотите.Что касается комментария iamserious, то добавление контента и display:block; в заголовок также поможет.

...