В CSS получить логотип, расположенный над центральным макетом и выступающий влево?

Я действительно застрял здесь...

У меня есть макет сайта с центральным макетом (около 922 пикселей в ширину, по центру страницы)... У меня есть небольшой логотип, который находится в верхнем левом углу этого, но он находится примерно на 10 пикселей слева от центрального дизайна. . Если вы можете себе представить, он как бы торчит слева от дизайна...

Мне сказали, что это произойдет благодаря абсолютному позиционированию. Но я не понимаю, как логотип будет работать с абсолютным позиционированием, если сам дизайн находится в центре страницы. Я думаю, это сделано для того, чтобы убедиться, что он работает в IE6... Я пробовал плавать логотип в центральном заголовке, а затем применять отрицательное поле margin-left: -10px;, что действительно работает, но я читал, что это не работает в IE6.


layout css margins internet-explorer-6
person Community    schedule 01.04.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Без фрагмента кода трудно сказать, но, вероятно, это проблема с тем, откуда ваш элемент получает свое «абсолютное» позиционирование. «Абсолют» — неправильное название. На самом деле это означает «абсолютно... относительно ближайшего родителя». Поэтому, если в вашем дизайне у вас нет родительского элемента со стилем «позиция» css, он займет свою позицию из элемента body (который может иметь некоторое поле/отступ на нем в зависимости от вашего браузера).

Добавление позиции: относительной; к элементу, который вы хотите сделать «самым внешним» контейнером, позволит вам указать position: absolute для элемента внутри него и указать ваши точные координаты оттуда.

person jvenema    schedule 01.04.2009
comment
Итак, установив «position: относительный» для основного заголовка, я могу затем установить абсолютное положение логотипа и установить left: -10px? Опять же, именно эти отрицательные поля не работают правильно в IE6, верно? - person ; 02.04.2009
comment
В этот момент вы можете установить left: -10px, что должно нормально работать в IE. Это не маржа, это позиция, которая обрабатывается по-разному. - person jvenema; 02.04.2009

arrow_upward
1
arrow_downward

Установите «позиция: относительная» в контейнере div.

<style type="text/css">
    div.page {
        position: relative;
        margin: 0 auto;
        width: 922px;
    }
    div.page img.logo {
        position: absolute;
        left: -10px; top: 0;
    }
</style>


<div class="page">
    <img class="logo" ... />
</div>

Хотя .. Я бы предпочел, чтобы это работало без абсолютного позиционирования.

person Konstantin Tarkus    schedule 01.04.2009

arrow_upward
1
arrow_downward

Когда вы позиционируете свой логотип абсолютно, он должен располагаться относительно чего-то. Обычно это край области просмотра. Если логотип находится внутри элемента, который расположен относительно, то вместо этого он будет расположен относительно этого элемента. Таким образом, ответ заключается в том, чтобы сделать вашу центрированную страницу div display:relative;, чтобы логотип всегда выравнивался по странице, а не по краю окна браузера. Вот пример:

HTML:

<div id="centeredpage">
   <img id="logo"... />
</div>

CSS:

body {
   text-align:center;
}
#centeredpage {
   width:922px;
   margin:0 auto;
   text-align:left;
   position:relative;
}
#logo {
   position:absolute;
   top:0;
   left:-10px;
}

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

person Matthew James Taylor    schedule 01.04.2009