All geek questions in one place

Create a FIXED navigation bar at the top of the screen

I am creating a navigation system, and for now, all I have is headings at the top of the screen, side by side, for example. at home, about us, etc.

I'm not sure how to create a fixed position for the navigation system at the top of the screen, so when scrolling down, etc. Options will still be available for tapping at the top of the screen.

Also, how could one add background color only to the navigation system?

Thanks.

-1
source share
2 answers

Try something like this:

Between tags in HTML:

<div id='header'>NAVIGATION LINKS</div>

and in CSS put:

 #header{ padding:10px; height:20px; position:fixed; width:100%; }

Here's JSFiddle: http://jsfiddle.net/MGumH/

+2
source

Most likely, it's best to go the HTML5 route and use SEMANTIC tags.

Something along the lines below:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <!-- next line points to EXTERNAL Stylesheet --> <link type="text/css" rel="stylesheet" href="mystylesheet.css" /> </head> <body> <!-- HEADER --> <header> <h1>Header in h1</h1> </header> <!-- NAVIGATION --> <nav> <ul> <li class="MyMenuItem"><a href="#">Menu Option 1</a></li> <li class="MyMenuItem"><a href="#">Menu Option 2</a></li> <li class="MyMenuItem"><a href="#">Menu Option 3</a></li> </ul> </nav> <!-- SECTION(S) --> <br /> <section> <article> <header> <h3 class="MyArticleHeader">Article #1</h3> </header> <section> <p>This is the first article. This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p> </section> </article> <article> <header> <h3 class="MyArticleHeader">Article #2</h3> </header> <section> <p>This is the second article. These articles could be blog posts, etc.</p> </section> </article> </section> <!-- FOOTER --> <footer id="MyFooter">Footer - Copyright 2013</footer> </body> </html>

There are other semantic tags, for example, Aside.

And this is the stylesheet that comes with the above sample

 body { padding: 12px; } h1 { color: #FFFFFF; background-color: #FF0000; text-align: center; vertical-align: middle; } .MyMenuItem { margin: 2px; padding: 2px 8px 2px 8px; list-style-type: none; vertical-align: middle; text-align: center; float: left; color: #FFFFFF; background-color: #FFCC66; } .MyMenuItem:hover { margin: 2px; padding: 2px 8px 2px 8px; list-style-type: none; vertical-align: middle; text-align: center; float: left; color: #000000; background-color: #99CCFF; } .MyArticleHeader { color: #FF0000; text-decoration: underline; font-weight: bold; } p { font-family: Tahoma; font-size: 12pt; } #MyFooter { color: #FFFFFF; background-color: #FF0000; vertical-align: middle; text-align: center; }

Just copy as, paste the above two samples into separate files called test.htm and the other mystylesheet.css (in the same folder)

Link: for more information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

+2
source

Source: https://habr.com/ru/post/1479426/

More articles:


All Articles