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

KHyT

KHyT

Знаток
Регистрация
26 Апр 2008
Сообщения
328
Реакции
25
Вот занялся первый раз созданием шаблона на 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);
 
}
 
Вообще надо css учить))) а так вот как профиксать проблему. в css файле пропиши на самом верху

html, body {
margin: 0px;
padding: 0px;
}
 
  • Нравится
Реакции: KHyT
я учу но к сожалению такой вот у меня способ обучения, только на практике, иначе все тут же из башки вылетает и ничего не остается.

А как сделать чтоб двигался только контент, а шапка оставалась наместе
если сайт шире чем стандартное окно браузера
 
KHyT написал(а):
я учу но к сожалению такой вот у меня способ обучения, только на практике, иначе все тут же из башки вылетает и ничего не остается.

А как сделать чтоб двигался только контент, а шапка оставалась наместе
если сайт шире чем стандартное окно браузера
Нажмите для раскрытия...
Для шапки задать ширину а также свойство
margin :{0 auto}
 
  • Нравится
Реакции: KHyT
KHyT написал(а):
я учу но к сожалению такой вот у меня способ обучения, только на практике, иначе все тут же из башки вылетает и ничего не остается.

А как сделать чтоб двигался только контент, а шапка оставалась наместе
если сайт шире чем стандартное окно браузера
Нажмите для раскрытия...
а вообще в файрфоксе или гуглехроме есть средства, которые позволяют посмотреть и на лету экспериментировать с css, у шапки должно быть position fixed насколько я помню
Для просмотра ссылки Войди или Зарегистрируйся
 
KHyT написал(а):
Вот занялся первый раз созданием шаблона на html и СSS и не пойму почему не получается сделать header на весь экран, у него почему то присутсвуют отступы по 10px c каждой стороны
Нажмите для раскрытия...

Полагаю, что один из основных вопросов, с которым стоит разобраться, это почему же так происходит.
Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. И для того чтобы делать "чистую" вёрстку используют reset.css для сброса значений браузера.

Для просмотра ссылки Войди или Зарегистрируйся - хорошая вводная статья на тему.
 
я применяю вот такие сбросы, и верстать пора в 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;
}
 
Тоже всегда применяю "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 им пользуюсь. Практически никогда не подводил.
 
Самый простой и эффективный прием это:

Код: 
* {margin:0;padding:0;}

он форматирует все элементы.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху