 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson-36.
In our previous lesson, we have studied CSS float property.
Today we will study more about CSS float properties.
CSS float property - displaying elements inline
By default elements are displayed from top to bottom in a web page. Using CSS float property we can display them side by side. Today we will learn to display two divisions side by side. We will also learn how to display a horizontal menu by making list items inline.Let us begin. Open a new Notepad file. In this copy all code given below.
<html>
<head>
<!-- Normal div -->
<style>
.div1 {
background : red;
padding:5vw 0vw;
}
.div2 {
background : blue;
padding: 5vw 0vw;
}
p {
text-align:center;
}
</style>
</head>
Let us write code to display these divisions in body. It will be as follows:
<body>
<div class="div1">
<p>This is div-1</p>
</div>
<div class="div2">
<p>This is div-2</p>
</div>
</body>
Save this file as "Lesson-36-1" and "Lesson-36-1.html".
 |
| Figure 36-1. Normal divisions in a web page |
Double click on HTML document. See the output. Two divisions are displayed, one in red color and another in blue.
 |
| Figure 36-2. Normal divisions in a web page |
Now let us use CSS float property to make these inline. In the style for divisions insert following:
float:left;
width:50%;
Save this file as "Lesson-36-2" and "Lesson-36-2.html". This code is shown in following figure.
 |
| Figure 36-3. CSS float property |
Again double click on HTML document and see the output.
 |
| Figure 36-4. Inline divisions - CSS float property |
Two blocks are displayed side by side. We have specified width 50%, therefore 50% of width is used by each block.
Now let us display vertical menu and horizontal menu.
List items are displayed one below other by default. By using this we can make a vertical menu. We can apply CSS properties to lists to make list items inline. We can display a horizontal menu using this.
Let us write code for this in our script. Open a new Notepad file. Write following code for style.
<style>
ol.a {
list-style-type: none;
}
ol li {
width: 15vw;
padding: 1vw;
letter-spacing: 0.5vw;
word-spacing: 1vw;
font-weight: bold;
background: yellow;
}
a:hover {
background-color:red;
}
</style>
In the body, write code for list as follows:
<ol class="a" >
<li><a href="Lesson-36-4-wpage-login.html">Log in</a></li>
<li><a href="Lesson-36-4-wpage-home.html">Home</a></li>
<li><a href="Lesson-36-4-wpage-about us.html">About Us</a></li>
<li><a href="Lesson-36-4-wpage-contact us.html">Contact us</a></li>
<li><a href="Lesson-36-4-wpage-faq.html">FAQ</a></li>
</ol>
In this code we have written a code to display an ordered list. Also we have created hyperlinks for every list item. On clicking an option corresponding page will be opened. Save this file as "Lesson-36-3" and "Lesson-36-3.html".
 |
| Figure 36-5. Code to display vertical menu |
Double click on HTML document. See the output. A vertical menu is displayed. Clicking on any option in this menu will take us in the corresponding page.
 |
| Figure 36-6. Vertical menu |
Now let us apply CSS float property to list items and make list items inline. This will display a horizontal menu.
Once again open a new Notepad file. Copy all code from Lesson-36-3 in this file. We will need to insert only one line in this code namely float property. In the style of ol.li insert the following:
float: left;
This will float list items to the left.
 |
| Figure 36-7. CSS float property to make list items inline |
Save this file as "Lesson-36-4" and "Lesson-36-4.html". Double click on Lesson-36-4.html and see the output.
 |
| Figure 36-8. Horizontal property using CSS float property |
Now a horizontal menu is displayed.
Important Points
1. By using CSS float property we can display elements inline.2. We can display horizontal menu by applying CSS float to list items.
Lesson-35 Lesson-37
