The layout of the website is an important component. By promoting user engagement, it improves the visual standards and overall quality of the website. Although CSS is not necessary in website development, styling is important because no user wants to interact with a bland and boring website.
When you build a website, you may think of photos as a “nice to have” feature that serves no purpose other than to look pretty. However, there’s more to graphics on a website than just creating a cute picture.
Images provide a beautiful look to your web pages. The advantages of using photos for SEO are many. CSS allows us to style and position these images to create fantastic visual effects. In this article, we will discuss how to overlay arrow images (pro/con) on top of each other using CSS.
First, let’s see how to add an arrow image in an HTML page.
To add an arrow image, we will use the tag.
<!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 example above, we are showing two arrow images - upvote and downvote.
In the example below, we stack 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>
In this example, we specify the height and width of the image using CSS. To stack these images together we use the following CSS properties -
This CSS property allows developers to determine the type of display behavior of an element. Simply put, it allows you to determine the container type of an element.
element{
display: value;
}
<!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>
This CSS property enables developers to specify which side an element will float on. Elements with position: absolute have float attributes ignored. Its value can be left, right or none.
element{
float: value;
}
<!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>
Elements next to a floated element follow the flow around it. To solve this problem, there is clear property in CSS. Its values can be None, Left, Right, Both, Initial and Inherited.
element{
clear: value;
}
In this article, we learned how to display arrow (upvote and downvote) images in HTML documents. Additionally, we discussed how to stack them together using the CSS display, float, and clear properties.
The above is the detailed content of How to store two arrow images (upvote/downvote) on top of each other using CSS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
