Take a look at the code I have provided below.
http://jsfiddle.net/xymgwonu/3/
Everything was working perfectly fine until I introduced a new div with the class name
<div class="bubble"></div>Here is the solution for you to enjoy :) http://jsfiddle.net/xymgwonu/13/
.bubble {position:absolute; margin-top: -40px;}
Creating a simple HTML layout:
<div class="container">
<div class="box-1">
<div class="line"></div>
<div class="circle"></div>
<hr class="horizontal-line" />
<div class="cloud"></div>
</div>
<div class="box-2">
<div class="line"></div>
<div class="circle"></div>
<hr class="horizontal-line" />
<div class="cloud"></div>
</div>
<div class="box-3">
<div class="line"></div>
<div class="circle"></div>
<hr class="horizontal-line" />
<div class="cloud"></div>
</div>
</div>
Styling with CSS:
.container {
padding: 10px;
}
.line {
margin-left: 50px;
padding: 50px;
position: relative;
border-left: 5px solid blue;
}
.circle {
color: white;
margin-left: 46px;
width: 10px;
height: 10px;
border: 2px solid #666666;
border-radius: 50%;
z-index: 2;
}
.horizontal-line {
margin-left: 60px;
margin-top: -10px;
width: 250px;
border-top: 5px solid #ccc;
}
/* Styling for the cloud */
.cloud {
position: relative;
margin-top: -40px;
margin-left: 340px;
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 100px;
width: 275px;
}
.cloud::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
content: "\00a0";
display: block;
overflow: auto;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 20px;
}
Feel free to duplicate
<div class="box"></div>While implementing scroll body lock packages like body-scroll-lock, react-scrolllock, or tua-body-scroll-lock alongside the W3 CSS package, I have encountered an issue where the body remains unlocked even when the designated element is active or open (e. ...
Having an issue with a component that has an @Input string value linking to an image. In my HTML file, I originally had: <div class="parallax" [ngStyle]="{'background-image': 'url({{parallaxImage}})'}"></div> This was not ...
I seem to be encountering an issue with my code, as part of the dropdown menu is appearing off-screen. Can you help me identify what I'm doing wrong? Interestingly, when scrolling horizontally, the menu position corrects itself. <div class="contai ...
Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...
Struggling to extract data from a table using Selenium in Python. Any suggestions on how to achieve this? https://i.stack.imgur.com/rPlKR.png <div class="js--property-table-body project-property-table__body"> <span aria-hidden=&quo ...
Recently, I encountered an issue with using clearfix to clear the floating effect in CSS. Someone mentioned that it may not be the best technique and suggested using alternative methods. Is this information accurate? If so, what are some other options tha ...
Can anyone help me figure out how to run a function every 10 seconds when the system is idle? Here's an example: setInterval(function () { test(); },10000); //for every 10 Sec I really need assistance in getting this function to ...
I need a responsive menu that always maintains the appearance shown in the image below. Any overflowing content should trigger the addition of a scrollbar: https://i.sstatic.net/Gen7g.png Although my current solution works initially, it fails when additi ...
Is there a way to maintain the data entry values in a placeholder during postbacks? <input type="text" name="name" value="<?PHP $name;?>" placeholder="Enter Name"/> It can be frustrating when PHP detects an error and posts it back, causing al ...
Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...
I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...
I'm curious about why my chart is not aligned to the left and how I can fix this issue. Here is the code snippet I am working with: var data = { labels: ["ID"] , datasets: [ { label: "Sensor 1" , data: [{ ...
Within the realm of Angularjs, there exists a DropDown: <select ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories"> <option value="">Se ...
Within my Electron application, I have implemented elements that, upon clicking, redirect to a URL. However, navigating back to the previous (local) page is not currently achievable. Is there a feasible method to incorporate a layered back button on top o ...
Here is the code snippet I am working with: <?php session_start();?> <!DOCTYPE html> <html> <head> <title>Narcis Bet</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"&g ...
Is there a difference between executing this code: conversationPane.setText(msg + conversationPane.getText()); and this code? conversationPane.setText(conversationPane.getText() + msg); I noticed that the second line does not display the message, but I ...
I created a basic Accordion menu using just HTML and CSS. The functionality works well, but I'm facing an issue where clicking on an open accordion doesn't close it. Can this be achieved with CSS alone or would I need to use JavaScript? .midd ...
I am looking to overlay text on an image using the bootstrap card-img-overlay feature. Here is the code I have written: <div class="h-100"> <div class="card h-100"> <img class="card-img" src="../imgs/header.jpg" alt="Card image"& ...
My HTML structure consists of repeating pairs of img and p tags. Often, the img tag is missing from the sequence. <img> <p></p> <img> <p></p> <img> <p></p> <p></p> <p></p> <i ...
Is there a way to stop Bootstrap from impacting a specific div and its nested divs in my HTML document? Since adding Bootstrap, the images inside this particular div have turned dull and acquired an undesirable blue tint. Thank you for considering my conce ...