В CSS да получите лого, което да се позиционира над централно оформление и да стърчи вляво?

Наистина съм заседнал тук...

Имам оформление на сайт с централно оформление (широчина е около 922px, центрирано върху страницата)... Имам малко лого, което е горе вляво на това, но то се придържа около 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 "position", той ще заеме позицията си от елемента body (който може да има някакво поле/подложка върху него в зависимост от вашия браузър).

Добавяне на позиция: относителна; към елемента, който искате да бъде "най-външният" контейнер, ще ви позволи да посочите позиция: абсолютна върху елемент в него и да посочите точните си координати от там.

person jvenema    schedule 01.04.2009
comment
И така, със задаване на „позиция: относителна“ към главния съдържащ хедър, след това мога да абсолютизирам позицията на логото и да задам ляво: -10px? Отново обаче, тези отрицателни граници не работят правилно в IE6, нали? - person ; 02.04.2009
comment
В този момент можете да зададете ляво: -10px, което трябва да работи добре в IE. Това не е марж, а неговата позиция, която се обработва по различен начин. - person jvenema; 02.04.2009

arrow_upward
1
arrow_downward

Задайте "position: relative" на контейнер 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