В CSS, чтобы логотип располагался поверх центрального макета и торчал влево? - PullRequest
Новая
       26

В CSS, чтобы логотип располагался поверх центрального макета и торчал влево?

0 голосов
/ 02 апреля 2009

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

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

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

Ответы [ 3 ]

1 голос
/ 02 апреля 2009

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

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

1 голос
/ 02 апреля 2009

Когда вы размещаете свой логотип абсолютно, его нужно разместить относительно что-то . Это что-то, как правило, край окна просмотра. Если логотип находится внутри элемента, который расположен относительно этого, он будет расположен относительно этого элемента. Таким образом, ответ состоит в том, чтобы сделать вашу центрированную страницу 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;
}

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

1 голос
/ 02 апреля 2009

Установить «положение: относительное» в контейнере. 

<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>

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

...