I would like to achieve something similar to this:
https://i.sstatic.net/KYSfC.jpg
I have been successful in creating the following:
https://i.sstatic.net/XSR3y.png
How can I remove the extra line at the beginning?
I am having trouble posting CSS and HTML code due to some errors, so I am sharing screenshots of the code:
Check out this code snippet I created for you on JSFiddle. I hope it meets your needs!
.timeline {
position: relative;
width: 30px;
margin: 0 auto;
overflow: hidden;
}
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: #ccc;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.word {
width: 100%;
font: bold 12px arial, sans-serif;
color: blue;
position: relative;
display: block;
background: #fff;
overflow: hidden;
z-index: 999;
clear: both;
margin: 0 auto 30px auto;
padding: 5px 0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<div class="timeline">
<div class="word">2016</div>
<div class="word">2014</div>
<div class="word">2013</div>
<div class="word">2012</div>
<div class="word">2010</div>
</div> <style>
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
width: 50px;
text-align: center;
}
li::before{
content: ' ';
position: relative;
bottom: 2px;
display: block;
width: 5px;
height: 50px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
</ul>
</body>
Utilizing the power of flex layout makes solving this issue a breeze. Flex layout offers a much simpler way to arrange complex applications compared to the traditional block layout method suggested in other responses.
Exploring flex and grid layouts can greatly enhance the organization of modern applications.
.root {
display: flex;
flex-direction: column;
align-items: center;
color: blue;
}
.line {
height: 30px;
width: 0px;
border: solid
}
<div class='root'>
<div class='line'></div>
<div class='text'>2016</div>
<div class='line'></div>
<div class='text'>2014</div>
<div class='line'></div>
<div class='text'>2012</div>
<div class='line'></div>
<div class='text'>2010</div>
<div class='line'></div>
</div>
Check out the sample link for reference.
I am struggling to create a blank space between my divs. Despite trying numerous CSS properties such as margin-top, padding-top, and others from various sources online, I have not been successful. The only way I can add space is by using an excessive amou ...
I'm currently in the process of tidying up a CSS file, and I'm contemplating whether it's now acceptable to remove vendor-specific properties if they have been standardized (or at least partially standardized). For instance, should I contin ...
I am facing a challenge in assigning multiple values from a dictionary to a variable within a Django template. For example: fruit.supplier = tesco fruit.color = blue {% with test=fruit.supplier_fruit.color %} {{ test }} {% endwith %} The expected ...
I need help with displaying a digit from 1 to 10 in an HTML object. This digit, referred to as "mood," is stored in models.py and is linked to another class called "day" using models.ForeignKey. In views.py, I retrieve both the "day" and "mood" values to ...
Struggling to center my form using bootstrap as a beginner. I've tried different methods without success. Hoping for some guidance on how to center it while keeping the same size. Any assistance would be appreciated! This is the HTML code: <div ...
When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other. I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be wo ...
I am facing an issue with CSS media queries... For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) ...
Encountering issues with CSS on all links. After clicking on a button/link, an unusual border appears (refer to image). Checked all CSS files and did not find any classes associated with this color. View screenshot here ...
Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...
I tried copying the navbar code from the bootstrap website, but unfortunately the dropdown list and hamburger menu are not functioning as expected. I attempted to include popper.js and meta tags in the code based on some suggestions from Stack Overflow a ...
When I work with a text editor, it generates HTML code that I save in the database. On another page, I need to display only the first 100 characters of the text without counting the HTML tags. For instance, let's say this is the HTML code saved in th ...
I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: https://i ...
There seems to be an issue with my dropdown button. Previously, it only appeared when clicking on a specific part of the button. I attempted to resolve this problem but unfortunately, the dropdown no longer works at all and I am unable to revert my changes ...
Is there a way to use JavaScript to automatically adjust the font size when the screen reaches 1050px? ...
My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly apprecia ...
I'm attempting to create a nested table within a table cell, but I can only get it to work using pure html and Javascript. When trying to do the same with an asp.net table, it doesn't seem to function properly. I've successfully added other ...
Does anyone have a solution for removing the grey layer (cf the image) in Safari? This issue does not occur in Chrome. The structure is as follows: <div class="class1"> <div class="class2"> <select> ... </selec ...
I need a hidden text inside a div that will only appear when the mouse pointer is hovering over a specific button. Here is my current code: // Show help-text on hover $("#help-container") .mouseover(function(e) { $(this).find("#help-t ...
In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...
I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...