Sliding menu in html css

Slider menu in html page using css To create a slider navigation menu in html by using CSS syntax. Copy the following program and paste in Notepad then save as .html file extension and view in browser. <html> <style> body { font-family: “Tahoma”, sans-serif; } .sidemenu { height: 100%; width: 0; position: fixed; top: 0; […]


fixed background image using css

Fixed background image in HTML page using CSS To fix the background image static at center, means no scrolling image! The following CSS page must be created. Have a look. h1 { background-color: green; } div { background-image: url(“d:\solid.jpg”); } p { background-color: yellow; } BODY { background-image:url(“d:\java-logo.jpg”); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } […]


Navigation bar with header logo using css

Navigation bar with header logo or text demo using css / html Below CSS and HTML program shows the use of Header Logo along with Navigation or Menu bar in the same line or alignment. <html> <head> <style> .menu{ background-color: red; color: white; padding: 18px; font-size: 18px; border: none; } .submenu { position: relative; display: […]


fixed top bar using html

Fixed header in html Fixed header menu or top bar using html is an essential in most of the modern web pages are concerned. To fix this header  menu bar constant at particular location, implement the following css code in your html program. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <html> <head> <style> #menu1 { position: fixed; background-color:cyan; […]


Hyper Text Markup Language

it’s a method that adds markup to text, no more, no less. It can be compared to a Rich Text File or Word Document, with the difference that HTML can be coded by hand. An HTML document (like any other document) consists of “header” or “meta” information. This tells a program (the web browser) what […]


CSS blocks-and-menus

In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site. Below are the some of examples you can refer . Creating beautiful hyperlink buttons with CSS blocks. Example 1. <html> <head> <style> #corner1{ border-radius: 15px 50px 30px 5px; background: skyblue; padding: 20px; width: 100px; height: 25px; } #corner2{ […]


HTML5 Validation

Following example states the use of HTML5 control form validation. <!DOCTYPE html> <html> <body> <h1> HTML5 Form Validation </h1> <hr> <form name=f1> Enter name: <input type=”text” pattern=”[a-zA-Z]+” title=”Your name without space” required /> </br> Email id: <input type=”email” required /> </br> WebAddress: <input type=”url” required/> starts with http:// </br> Phone number: <input type=”tel” pattern=”^\d{2}-\d{10}” required/> […]