HTML Position DIV Tag для абсолютного ТОПа - PullRequest
Новая
       5

HTML Position DIV Tag для абсолютного ТОПа

3 голосов
/ 21 апреля 2010 
.myDiv  
{

background-image: url(urltomyimgheader);

height:100px;

margin: auto;

position:relative;

top:-10px;

width:600px;

}

Это простой тег div, используемый для отображения логотипа ...

Я установил верхнюю -10px, чтобы она касалась верхней части браузера, если между логотипом и страницей нет промежутка.

Однако я плохо отношусь к использованию -10px для позиционирования div :( Есть ли лучшее и совместимое с браузером решение?

Ответы [ 2 ]

3 голосов
/ 21 апреля 2010

@ Тату Ульманен прав, что это проблема браузера по умолчанию. Вам не нужно добавлять отрицательные поля, вам просто нужно установить атрибут CSS по умолчанию для тегов body / html.

Чтобы быть в безопасности, вы должны использовать сброс CSS, чтобы в любом случае избавиться от настроек стиля браузера. Вот код, который вы можете использовать для решения вашей проблемы. Ниже приведен хороший сброс CSS, который вы можете добавить в начало всех ваших таблиц стилей CSS. 

html, body {
padding: 0;
margin: 0;
}

CSS Reset: / * Сброс * / 

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
                        { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    blockquote:before,
    blockquote:after,
    q:before, q:after   { content: ""; }
    blockquote, q       { quotes: "" ""; }
    body                { line-height: 1; color: black; background: white; }
    caption, th, td     { text-align: left; font-weight: normal; }
    :focus              { outline: 0; }
    table               { border-collapse: separate; border-spacing: 0; }
    ol, ul              { list-style: none; }
1 голос
/ 21 апреля 2010

Да, 10-пиксельный разрыв создается по умолчанию для определенных элементов в браузере. 

body {
   padding: 0;
}

Возможно, вы захотите просмотреть таблицы стилей сброса CSS, чтобы сбросить все специфичные для браузера настройки для элементов. Вот хороший .

...