CSS убрать отступы по из header

Тема в разделе "Верстка", создана пользователем KHyT, 15 янв 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. KHyT

    KHyT

    Регистр.:
    26 апр 2008
    Сообщения:
    328
    Симпатии:
    27
    Вот занялся первый раз созданием шаблона на html и СSS и не пойму почему не получается сделать header на весь экран, у него почему то присутсвуют отступы по 10px c каждой стороны открывал во всех браузерах эфект один и тот же, как только не расширял header но с левой стороны отсупы так и остаются....
    Код:
    </HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Мой первый Диз</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
     
      <div id ="wrapper">
     
          <div id ="header"></div>
          <div id ="sidebar"></div>
          <div id ="content"></div>
          <div id ="foter"></div>
     
      </div>
     
    <body>
     
    </body>
    </html>
    Код:
    #wrapper {
    width:1020px;
    outline:1px;
     
     
     
    }
     
    #header {
    height:90px;
    background-image: url(../images/partner_header_bg.png);
     
    }
    
     
  2. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    Вообще надо css учить))) а так вот как профиксать проблему. в css файле пропиши на самом верху

    html, body {
    margin: 0px;
    padding: 0px;
    }
     
    KHyT нравится это.
  3. KHyT

    KHyT

    Регистр.:
    26 апр 2008
    Сообщения:
    328
    Симпатии:
    27
    я учу но к сожалению такой вот у меня способ обучения, только на практике, иначе все тут же из башки вылетает и ничего не остается.

    А как сделать чтоб двигался только контент, а шапка оставалась наместе
    если сайт шире чем стандартное окно браузера
     
  4. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    777
    Симпатии:
    231
    Для шапки задать ширину а также свойство
    margin :{0 auto}
     
    KHyT нравится это.
  5. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.726
    Симпатии:
    2.100
    а вообще в файрфоксе или гуглехроме есть средства, которые позволяют посмотреть и на лету экспериментировать с css, у шапки должно быть position fixed насколько я помню
    http://stackoverflow.com/questions/6013686/how-to-freeze-header-of-the-page
     
    antiterror нравится это.
  6. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.451
    Симпатии:
    1.245
    Полагаю, что один из основных вопросов, с которым стоит разобраться, это почему же так происходит.
    Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. И для того чтобы делать "чистую" вёрстку используют reset.css для сброса значений браузера.

    http://habrahabr.ru/post/45296/ - хорошая вводная статья на тему.
     
  7. chayteam

    chayteam Писатель

    Регистр.:
    15 янв 2013
    Сообщения:
    2
    Симпатии:
    1
    я применяю вот такие сбросы, и верстать пора в HTML5 =)

    HTML:
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    И вот такой сброс для старых браузеров

    HTML:
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    
     
  8. kuzmit42

    kuzmit42 Постоялец

    Регистр.:
    9 янв 2013
    Сообщения:
    131
    Симпатии:
    31
    Тоже всегда применяю "Reset CSS"
    Вот мой вариант. С пояснениями.
    HTML:
    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,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0; /* нулевая граница */
        padding: 0; /* нулевые отступы */
        border: 0; /* больше всего для картинок в IE6 */
        outline: 0; /* точечная граница вокруг ссылок в Firefox */
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    Уже года 3 им пользуюсь. Практически никогда не подводил.
     
    ipbfan2008 нравится это.
  9. stylebig

    stylebig Создатель

    Регистр.:
    12 янв 2013
    Сообщения:
    33
    Симпатии:
    7
    Самый простой и эффективный прием это:

    Код:
    * {margin:0;padding:0;}
    он форматирует все элементы.