Hello!

Please tell the beginner how to draw a horizontal line on the website at the top of the screen that goes through the whole page. As an example, this site: http://nwoil.org/ . Here the line goes up with scrolling.

And the second option is a blue horizontal line at the top of the screen as in Facebook.

Html code:

<!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 code:

 #line { border-top: solid; }

This code does not fit the fact that draws a line where you can see the beginning and end, as well as there is indentation from above. I would like to see the line as on www.facebook.com, the top blue line. Which is the full width of the page (the background is not visible from above and on the sides. It is necessary to make it as if it were background

  • one
    In the site of your link, the border-top property is simply set to the container. And what's on facebook for the line? In the sense of the floating menu? - Moonvvell
  • As for the first site, what will the code look like? And as for FB - yes the menu. Thank!!! - Vitaly Vitaly
  • one
    You need to learn the basics of css and html. And to get the code to add a line to the site, create an order for freelancing. - ilyaplot
  • one
    So I myself am learning this. Why do I order. I do not earn it. Just asked for help sympathizers. But if we have already sunk into sending instead of a little help (I am sure there are only a couple of lines) sending to freelance then sad gentlemen. - Vitaly Vitaly
  • Try to write more detailed questions. To get an answer, explain exactly what you see the problem, how to reproduce it, what you want to get as a result, etc. Give a sample code. - Grundy

4 answers 4

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

  • at least you would have written about margin:0 :) - Grundy
  • @Grundy, what to write about him? - Qwertiy ♦
  • That the indents were because of him :-) and not just like that :-) - Grundy
  • Gentlemen, how to set back the default browser margin? Now he makes the whole page for the entire width of a scoundrel. Thank you - Vitaly Vitaly
  • @VitalyVitaly, body { margin: 8px; } body { margin: 8px; } - Qwertiy ♦

Add parameters to the style

 #line { border-top: 5px solid black; }
  • This code gives a line that is indented from the top and sides. Pay attention to the website facebook.com . Upper blue line. She, as it were, has no beginning and end, full! page length. - Vitaly Vitaly
  • So open the developer mode, and see where the indents are from there! Most likely, the reset of styles is not connected, and these standard browser styles give these indents. Rub them and that's it. UPD - F12 key. UPD2 - and look at the code given by you. Where is the closed head, where is the open body ?! - Yuri_Smirnov
  • Yuri! You are a holy man! I'll put a candle in the church for health! ))) They somehow did not fit in the code. The code itself is correct. Thank! - Vitaly Vitaly
  • @Yuriy_Smirnov, it is worth adding information from the comment in response - Grundy

You have in html code, there is no closing head tag and there is no opening body tag and the border-top not completely written.

 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>

  • this is not an error, browsers allow quite a lot of liberties with markup - Grundy
  • @Grundy, this is not a mistake at all, the standard allows them not to write. - Qwertiy ♦
  • The reason is not in the tags. - Qwertiy ♦
  • @Qwertiy, so I wrote - which is not a mistake :-) - Grundy
  • In the snippet, you do not need to write doctype / html / body markup - everything written is placed in the body. - Qwertiy ♦

the border can be assigned to any object, even <html>

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