2

Здравствуйте!

Подскажите пожалуйста новичку как нарисовать горизонтальную линию на сайте вверху экрана которая идет через всю страницу. Как пример этот сайт: http://nwoil.org/. Здесь линия уходит вверх вместе с прокруткой.

И второй вариант синяя горизонтальная линия вверху экрана как в фейсбуке.

Код html:

<!DOCTYPE html>
<html>
<head>
    <title>Горизонтальная линия</title>
    <link rel="stylesheet" href="styletest.css" type="text/css" media="screen" />
    <meta charset="utf-8">
    <div id="line">
    </div>
    </body>
</html>

Код css:

#line {
    border-top: solid;
}

Данный код не подходит тем что отрисовывает линию где видно начало и конец, а так же имеется отступ сверху. Хотелось бы видеть линию как на www.facebook.com, верхняя синяя линия. Которая во всю ширину страницы (не видно фона сверху и по бокам. Необходимо сделать ее как будто фоновой

10
  • 1
    В сайте по вашей ссылке просто же свойство border-top задано к контейнеру. А что в фейсбуке за линия? В смысле меню плавающее?
    – Moonvvell
    15 июл 2016 в 7:28
  • Что касается первого сайта как примерно будет выглядеть код? И что касается ФБ - да меню. Спасибо!!! 15 июл 2016 в 7:36
  • 1
    Вам азы css и html нужно изучить. А для получения кода для добавлении линии на сайт создайте заказ на фрилансе.
    – ilyaplot
    15 июл 2016 в 7:40
  • 1
    Так я сам учусь этому. Зачем же мне заказ. Я не зарабатываю не этом. Всего лишь попросил помочь сочувствующих. Но если мы уже докатились до того чтобы вместо небольшой помощи (уверен там всего пара строчек) отправлять на фриланс тогда печально господа. 15 июл 2016 в 7:46
  • Постарайтесь писать более развернутые вопросы. Для получения ответа поясните, в чем именно вы видите проблему, как её воспроизвести, что вы хотите получить в результате и т. д. Приведите пример кода.
    – Grundy
    15 июл 2016 в 7:50

4 ответа 4

3

body {
  margin: 0;
  border-bottom: 1em solid blue;
}

7
  • ну ты б хоть написал про margin:0 :)
    – Grundy
    15 июл 2016 в 8:35
  • @Grundy, а что про него написать?
    – Qwertiy
    15 июл 2016 в 8:36
  • Что отступы были из-за него :-) а не просто так :-)
    – Grundy
    15 июл 2016 в 8:37
  • Господа, а как задать обратно margin по умолчанию браузера? Теперь он всю страницу делает на всю ширину негодяй. Спасибо 15 июл 2016 в 8:40
  • @VitalyVitaly, body { margin: 8px; }
    – Qwertiy
    15 июл 2016 в 8:59
0

Добавьте параметров к стилю

#line {
    border-top: 5px solid black;
}
4
  • Этот код дает линию которая имеет отступы от верхней и боковых частей. Обратите внимание на сайт facebook.com. Верхняя синяя линия. Она как-бы не имеет начала и конца, во всю! длину страницы. 15 июл 2016 в 8:23
  • Так откройте режим разработчика, и посмотрите, откуда там отступы! Скорее всего, сброс стилей не подключен, и это стандартные стили браузера дают эти отступы. Потрите их, и все. UPD - клавиша F12. UPD2 - и посмотрите на код, Вами приведенный. Где закрытый хед, где открытый боди?!
    – Speller
    15 июл 2016 в 8:26
  • Юрий! Вы святой человек! Буду в церкви поставлю свечку за здравие! ))) в коде они как-то не уместились. Сам код правильный. Спасибо! 15 июл 2016 в 8:29
  • @Юрий_Смирнов, стоит добавить информацию из комментария в ответ
    – Grundy
    15 июл 2016 в 8:31
-1

У вас в html коде, нет закрывающего тега head и нет открывающего тега body и border-top не полностью написан.

body {
  margin: 0;
}
#line {
  border-top: solid 2px #000;
}
<!DOCTYPE html>
<html>

<head>
  <title>Горизонтальная линия</title>
  <link rel="stylesheet" href="styletest.css" type="text/css" media="screen" />
  <meta charset="utf-8">
</head>

<body>
  <div id="line">
  </div>
</body>

</html>

7
  • это не ошибка, браузеры позволяют довольно много вольностей с разметкой
    – Grundy
    15 июл 2016 в 8:31
  • @Grundy, это вообще не ошибка, стандарт разрешает их не писать.
    – Qwertiy
    15 июл 2016 в 8:32
  • Причина не в тегах.
    – Qwertiy
    15 июл 2016 в 8:32
  • @Qwertiy, так я и написал - что не ошибка :-)
    – Grundy
    15 июл 2016 в 8:33
  • В сниппете не надо писать разметку doctype/html/body - всё написанное помещается в body.
    – Qwertiy
    15 июл 2016 в 8:35
-1

границу можно назначить любому объекту, даже <html>

html {
  border-top: 2px solid red;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.