отступы от элементов сайта.. центрирование

Diego · September 19, 2010

Здравствуйте! У меня собсно, такая проблема:

верстаю сайт(так, для отработки навыков) и не получается убрать отступы (выделено красным на картинке)

и еще вопрос? как сделать так, чтобы сайт отцентрировался в опере, осле и мозиле? сколько делал.. что-то в голову не прихолит решения... Помогите пожалуйста... По возможности объясните технологию..)))

КОД:

html

</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	  <html>
	  <head>
	  <title>Test page</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	  <link href="styles.css" type="text/css" rel="stylesheet">

	  </head>
	  <body>

	  <div class="bar"><img src="bar.png"></div>
	  <div class="header-area"><img src="header.jpg"></div>


	  <div class="content">


	  <p>1)	Hammer on. Вы его уже изучали, а сейчас закрепим. 
	  Прижмите 1ю струну  указательным пальцем левой руки на 4м ладу. 
	  Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, 
	  сразу же отпустив средний палец. 
	  Получились 2 приёма:  «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p>

	  <p>2)	Вибрато. Выполняется этот приём так. 
	  Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, 
	  водите им вдоль струны в пределах лада (но не перепендикулярно струне). 
	  Водить сильно не надо – буквально десятые доли миллиметра.</p>

	  <p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. 
	  Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. 
	  Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p>

	  <p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. 
	  В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, 
	  поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p>

	  <p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). 
	  Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p>

	  <p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, 
	  нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p>


	  </div>


	  <div class="footer"><img src="footer.jpg"></div>

	  </body>

	  </html>
	  </p><p>

CSS:

</p><p>body 
	  { 
	  margin: 0 auto; 
	  padding: 0 1.6em;
	  background: #354 url('12.jpg');
	  overflow: auto; 
	  }


	  .header-area 
	  {
	  margin: 0 6.1em;
	  padding: 0;
	  } 

	  .bar
	  {
	  position: absolute;
	  margin: 2.3em 8.3em;
	  padding: 7.3em 0;
	  }

	  .content 
	  { 
	  background: white;
	  margin: 0 6.1em;
	  width: 746px;
	  padding: 6em .6em .6em .6em;
	  } 

	  p 
	  { 
	  text-align: justify;
	  font-family: verdana, tahoma, monospace;
	  font-size: 9pt;	
	  } 

	  .footer img 
	  {
	  margin: 0 6.1em;
	  padding: 0;
	  }
	  </p><p>

Если кому-то нужно, то вот мой сайт полностью: мой сайт

Edited September 19, 2010 by Diego

sigma77 · September 19, 2010

верстаю сайт(так, для отработки навыков) и не получается убрать отступы (выделено красным на картинке)

Этот отступ образует картинка, которую вы используете в качестве фона. Убрать ёё можно назначив картинке свойство display:block; Но лучше просто вставить картинку как фон, т.е. background: url(адрес к картинке относительно css).

и еще вопрос? как сделать так, чтобы сайт отцентрировался в опере, осле и мозиле? сколько делал.. что-то в голову не прихолит решения... Помогите пожалуйста... По возможности объясните технологию..)))

Оберните весь ваш сайт в один див обертку, установите этому диву нужную ширину и задайте свойство margin: 0 auto.

Diego · September 19, 2010

Оберните весь ваш сайт в один див обертку, установите этому диву нужную ширину и задайте свойство margin: 0 auto.

Спасибо большое!! Сделал, всё работает.. теперь по центру)))

Этот отступ образует картинка, которую вы используете в качестве фона. Убрать ёё можно назначив картинке свойство display:block; Но лучше просто вставить картинку как фон, т.е. background: url(адрес к картинке относительно css).

Но вот это, к сожалению, не помогло...

Edited September 19, 2010 by Diego

sigma77 · September 19, 2010

Но вот это, к сожалению, не помогло...

Значит что-то не так сделали.

И какой из способов не помог?

Diego · September 19, 2010

И какой из способов не помог?

Оба... Сначала исправил вот это:

body 
	  { 
	  margin: 0 auto; 
	  padding: 0 1.6em;
	  [u]background: #354 url('12.jpg');[/u]
	  overflow: auto; 
	  }

на это:

body 
	  { 
	  margin: 0 auto; 
	  padding: 0 1.6em;
	  [u]background: url('12.jpg');[/u]
	  overflow: auto; 
	  }

.. произведенные манипуляции не избавили от отступов в опере и мозиле, но вот в осле пропали.. а потом я еще добавил к этому :

body 
	  { 
	  margin: 0 auto; 
	  padding: 0 1.6em;
	  [u]background: url('12.jpg');[/u]
overflow: auto
[u]display: block;[/u]	  }

к сожалению, безуспешно... ((

sigma77 · September 19, 2010

Diego,

Так. Ладно. Всё ясно.

Теперь обо всем по-порядку.

Стили нужно применять не к body, а к тому элементу к которому они относятся.

У вас идет такой код

<div class="header-area"><img src="header.jpg"></div>

Соответственно, чтобы убрать отступ, образуемый этой картинкой нужно:

1-й вариант. Прописать в css-файле

.header-area img {display: block;}

2-й вариант

.header-area {
  width: 766px; /* ил любая другая нужная ширина */
  height: 222px;
  background: url(header.jpg) no-repeat; /* в принципе, т.к. градиент повторяющийся ширину картинки можно уменьшить и задать свойство repeat-x */
}

Второй вариант предпочтительней. Т.к. в img рекомендуется выносить только несущие смысл картинки, всё остальное фоновое оформление должно и оформляться фоном.

Аналогично нужно сделать и с остальными блоками.

А вообще рекомендую начать с:

CSS по шагам

http://htmlbook.ru/content/

Edited September 19, 2010 by sigma77

Diego · September 19, 2010

Спасибо Вам, Sigma77!!!))) Раскрыли мне глаза!!!)))) Всё получилось! на данном этапе я доволен))) Но верстка ещё не закончилась..))

Edited September 19, 2010 by Diego

Searcher · September 20, 2010

а что делает в этой строке параграф?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Diego · September 20, 2010

а что делает в этой строке параграф?

это опечатка просто... при копи-пасте кода получилась...))

Sign In

отступы от элементов сайта.. центрирование

Question

Diego

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Diego

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Diego

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Diego

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Diego

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information