Jump to content
  • 0

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


Diego
 Share

Question

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

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

image_4c95d10eb8043.jpg

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

КОД:

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 by Diego
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

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

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

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

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

Link to comment
Share on other sites

  • 0

 

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

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

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

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

Edited by Diego
Link to comment
Share on other sites

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

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

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] }

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

Link to comment
Share on other sites

  • 0

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 by sigma77
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy