Easiest way to learn various technology: 12/12/20

12/12/2020

How to create fixed header menu using html

fixed header menu using html

in this blog shows how to make fixed header or menu bar, suppose user move scroll and developer wants menubar should fixed to easy navigation from pages.

<html>

<style>

.home {

width: 100%; height:100%; overflow-y: scroll;

margin-top: 100px;

}

div.header {

position: fixed;

top: 0;

left: 0;

right: 0;

}

</style>

<body>

</div>

<div>

<p>Title 1</p>

<p>Content 1</p>

<p>Author: Alex</p>

</div>

<div>

<p>Title 2</p>

<p>Content 2.</p>

<p>Author: Alex</p>

</div>

<div>

<p>Title 3</p>

<p>Content 3.</p>

<p>Author: Alex</p>

</div>

</body>

</html>

in above example header class setting fixed position , if user moving scroll position it still fixed header

please comment your query or valuable message.

How to create full screen video using html and css

create full screen video using html and css

<html>

<body>

<style>

/* video: 100% width and height- cover the entire window */

#myVideo {

position: fixed;

bottom: 0;

right: 0;

min-width: 100%;

min-height: 100%;

}

/* Add content at the bottom of the video/page */

.content {

position: fixed;

bottom: 0;

background: rgba(0, 0, 0, 0.5);

color: #f1f1f1;

width: 100%;

padding: 20px;

}

/* Style the button used to pause/play the video */

#abcbutton {

width: 200px;

font-size: 18px;

padding: 10px;

border: none;

background: #000;

color: #fff;

cursor: pointer;

}

#abcbutton:hover {

background: #ddd;

color: black;

}

</style>

</video>

<h1>Sample Text</h1>

<p>Learn with Mayur Infosys Solutions</p>

<button id="abcbutton" onclick="myFunction()">Pause</button>

</div>

</body>

</html>

above code in html and css which works on all devices, while creating webpage required full screen in these case use above sample code.

1)we set video to position fixed
2)all corner zero position , no padding
3) content also fixed and set to bottom position.

please comment if any query OR suggest new topic for blog.

Easiest way to learn various technology

abc

12/12/2020

How to create fixed header menu using html

How to create full screen video using html and css

An Introduction to the Laravel Framework: What It Is and Why You Should Use It

Translate

Total Pageviews