Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I stock two arrow images (upvote/ downvote) on top of each other using CSS?
The layout of a website is an essential component. It raises the visual standards and overall quality of the website by promoting user engagement. Although CSS is not strictly necessary for website development, styling is important because no user wants to interact with a plain, unappealing website.
As you construct your website, you may believe that photographs are a "nice to have" feature that serves no use other than to look pretty. However, graphics on your website do far more than just create a lovely picture.
Images give aesthetic look to your web page. The advantages of employing photos for SEO are numerous. CSS enables us to style and position those images which creates fantastic visual effects. In this article, we will discuss how to stock arrow images (upvote/ downvote) on top of each other using CSS.
First, let’s see how to add arrow image in a HTML page.
Adding Arrow Images
To add arrow images, we will use <img> tag.
Example
<!DOCTYPE html> <html> <head> <title> Adding arrow images </title> </head> <body> <img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow"> <img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow"> </body> </html>
In the above example, we have displayed two arrow images- upvote and downvote.
Example
In the following example we are stacking two arrow images (upvote/ downvote) on top of each other
<!DOCTYPE html>
<html>
<head>
<title> Arrow Images </title>
<style>
h1{
color: green;
text-decoration: underline;
}
img{
width: 150px;
margin-left: 20px;
height: 100px;
margin-bottom: 30px;
}
.demo{
float: left;
clear: left;
}
.demo img{
display: block;
float: none;
clear: both;
}
</style>
</head>
<body>
<h1> Up and Down arrow images </h1>
<div class= "demo">
<img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow">
<img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow">
</div>
</body>
</html>
Properties Used
In this example, we have specified the height and width of the images using CSS. To stack those images on top of each other, we have used the following CSS properties −
The Display Property
This property of CSS allows the developers the type of display behaviour of an element. In simple words, it allows you to decide the type of container of an element.
Syntax
element{
display: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: green;
text-decoration: underline;
}
.p1{
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p class= "p1">This is an example</p>
</div>
</body>
</html>
The Float Property
This property of CSS enables the developers to specify on which side the element will float. The elements with position: absolute ignore the float property. Its values can be left, right or none.
Syntax
element{
float: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<title> Float </title>
<style>
h1{
color: green;
text-decoration: underline;
}
#img1{
float: left;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div>
<p>Left or right side of the container. <i class= "far fa-clock" id= "img1"></i> </p>
</div>
</body>
</html>
The Clear Property
Elements which are next to the floating elements follows the flow around it. To solve this issue, there is clear property of CSS. Its values can be none, left, right, both, initial and inherit.
Syntax
element{
clear: value;
}
Conclusion
In this article, we have learnt about how to display arrow (upvote and downvote) images in a HTML document. Also, we have discussed how to stack them on top of each other using the CSS display, float and clear properties.
85 Views
