I am trying to create a vertical line inside a DIV container.
After that, I want to add an image on top of the vertical line (see attached picture for reference).
This is what my current source code looks like:
<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">
<img src="triangle.png">
Is there a way to layer these elements properly?
To center the elements, you'll have to do some calculations with math.
.outer-flex {
display: flex;
width: 40px;
align-items: center;
position: absolute;
}
.line {
background-color: gray;
width: 1px;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.circle {
position: absolute;
left: calc(50% - 15px);
top: 20px;
border: 5px solid white;
border-radius: 20px;
}
.arrow {
position: absolute;
top: 70vh;
left: calc(50% - 15px)
}<div class="outer-flex">
<div class="line"></div>
<img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">
<img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>The images have been neatly placed inside the div as shown below:
div {
background-color: gray;
width: 1px;
height: 200px;
}
img:first-of-type {
margin-left: -10px;
top: 30px;
position: relative;
}
img:last-of-type {
margin-left: -10px;
top: 85px;
position: relative;
}<div>
<img src="https://picsum.photos/20/20" />
<img src="https://picsum.photos/20/20" />
</div>If you are aware of the images' widths, you can adjust them to the left by applying a negative margin equal to half of their width.
I am currently implementing Slick Carousel on a website that I am working on. One challenge I am encountering is trying to get the "slider-nav" to move in the opposite direction than it normally does. For instance, at the moment, the order goes like this ...
Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...
After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...
I am encountering an issue where no JavaScript events are triggering inside an ng-show div in my code. You can access my code through the following link on Plnkr: http://plnkr.co/edit/kGqk8x?p=preview Upon loading data from JSON, I set ng-show to true. Ho ...
I'm a beginner in web development and I have some basic knowledge: HTML - structure of websites CSS - design aspect JavaScript - for adding interactivity Now, what exactly is jQuery, AngularJS, and Node.js? Upon researching, I discovered that jQue ...
Currently, I am implementing an‘<input type="file" . . .’ to select files individually and then attach them to a table located right under the file picker. This functionality is quite similar to using the attachment button on a SharePoint form’s r ...
I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...
My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...
Encountering two console warnings while using Chrome: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". ...
When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...
Here is the current structure of my code: <div style="height: 100px; Width: 200px;"> <!-- Container --> <div style="float: left; height: 50px; Width: 100px; background-color: ...
I've set the display property to inline-block, but the htmlDiv div in this code snippet is not behaving as expected. It's acting as though the inner divs are next to each other even when they're not. How can I fix this? If it's unclear ...
Is there a way to align the numbers in a numbered list within a table using monospace font so that they are at the same level as bullets on a bullet list? Simplest example: ol { font-family: monospace; } ul, ol { margin-top: 10px; margin-bottom: ...
When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...
I'm having some trouble explaining this, but here it goes.. My home.php file looks like this: <body> <div id='leftColumn'> <?php include ('includes/roomQuery.php') </div> ...
[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...
I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...
I am currently designing a website that utilizes a frameset featuring a horizontal split - a menu sidebar on the left and a content area. <!DOCTYPE html> <html> <head> <title>Frameset Test</title> </head> ...
When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...
Currently working on a project with Python using Flask and Jinja2, I am exploring ways to integrate a sidebar. Within the HTML pages, there is this snippet: {% include "sidebar.html" %} My objective for the sidebar file is to showcase a section highlight ...