Forgive my ignorance, but I'm feeling a bit lost here. Can anyone provide guidance on how to achieve this in css or javascript? (css preferred)
Forgive my ignorance, but I'm feeling a bit lost here. Can anyone provide guidance on how to achieve this in css or javascript? (css preferred)
You might want to consider implementing the following styling:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.section_header {
background-color: #7e9489;
border-radius: 20px;
width: 200px;
height: 20px;
color: #fff;
text-align: center;
padding: 10px;
line-height: 20px;
}
.section_content {
margin: 0px;
padding: 0px;
display: block;
border-left: solid 2px #7e9489;
margin-left: 99px;
padding-top: 10px;
}
.section_content > li {
display: block;
position: relative;
line-height: 40px;
}
.section_content > li::before {
position: relative;
display: inline-block;
vertical-align: middle;
content: '';
width: 12px;
height: 12px;
border-radius: 10px;
background-color: #7e9489;
margin-left: -7px;
margin-right: 20px;
z-index: 10;
}
.section_content > li > span {
display: inline-block;
vertical-align: middle;
}
.section_content > li:last-child::after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: -2px;
width: 2px;
height: 50%;
background-color: white;
z-index: 1;
}<div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
<li><span>Segment 1</span></li>
<li><span>Segment 2</span></li>
<li><span>Segment 3</span></li>
<li><span>Segment 4</span></li>
</ul>Here's a quick and simple way to style your date element along with a box containing a list of items:
.date {
border-radius: 30px;
background-color: #7C9288;
width: 200px;
text-align: center;
padding: 10px;
color: #fff;
}
.box {
border-left: 2px solid #7C9288;
margin-left: 110px;
margin-top: -16px;
padding-top: 20px;
}
li {
color: #7C9288;
list-style-type:none;
}
li:before{
content:'\00b7';
font-size:100px;
line-height:24px;
vertical-align:middle;
}
ul {
margin-left: -57px;
}<div class="date">Today</div>
<div class="box">
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>First, let me explain what I am currently using and attempting to achieve: I started with the basic setup for this effect found at flowplayer.org/tools/demos/overlay/index.html Then, I implemented the Apple Leopard Preview Effect from flowplayer.org/tool ...
I currently have multiple iframes on my main page, each with a src attribute set to an empty value. I've used jQuery to create a function that when a button is clicked, the src for the corresponding iframe fills up with website.com/#title1. My issue ...
Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...
I'm trying to figure out how to call a function within a random range of time intervals in Node.js. What I need is for the function to run once between 2 and 12 hours, then again at another random interval between 2 and 12 hours, and so on. However, I ...
<script type="text/javascript"> function checkBrowser() { try { return new XMLHttpRequest(); } catch (e) { try { return ActiveXObject("Msxm12.XMLHTTP"); } catch (e) { try { retur ...
I am currently working on a project to create a card generator for educational purposes and to have some fun. I am learning how to gather data from user inputs and save it to a database. However, I encountered an issue when trying to send a simple JSON da ...
My container has a nested <p/> tag serving as the message text. The container is set to have a width of 200px, with a max-width of 600px to allow for expansion if the message length exceeds the initial 200px. However, despite these settings, the div ...
I am dealing with a table called Places(id, name, timestamps) containing approximately 4,000 rows. My goal is to send all of them to the select input in my create.blade.php file, where their names will be displayed and their corresponding IDs will be sent ...
Hello everyone, I have a question to ask. Be gentle with me as this is my first time posting here. I've been learning CSS3 and recently came across an effect that caught my eye. I'm not sure if it falls under the category of parallax scrolling or ...
My current situation requires me to organize a list based on two values in ascending order. First, it should be sorted by SCHEDSTART if available. If SCHEDSTART is blank, then it should be sorted by WONUM. The div containing SCHEDSTART should always appe ...
I have a link on Page A. Page B has two tabs, with the content of tabs 1 and tab 2 currently set to "display:none". I want clicking the hyperlink on page A to automatically open or activate the second tab on page B. I am seeking a solution using JavaScri ...
fetching data from multiple APIs and storing it in an array has been a challenge. While attempting to set the data using useState, only one piece of data successfully makes it into the array. Even after trying Promise.all method, the same issue persists al ...
Currently, I am utilizing Node, Express with EJS view engine, nano for CouchDB, and encountering a perplexing error that I couldn't find any specific information about on Node or JavaScript via Stack Overflow or Google. The troublesome section of my c ...
Upon creating a basic application using the CLI tool (v6.3.0), I encountered an issue when attempting to push it to a production server. My deployment process involves using Shipit (although this may not be relevant), and part of it includes installing np ...
Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...
I am facing an issue with my jquery datepicker in the input field. It does not display properly unless I remove the cdn link for jquery and replace it with the datepicker cdn. However, this causes another problem with my modal functionality. If I switch ba ...
I have developed a calculator web application using node.js with express. My goal is to create buttons for addition, subtraction, multiplication, and division operations. While my POST request works fine with a single res.send(), I encountered an issue whe ...
Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...
My current setup involves using jQuery to load sub-pages through AJAX, which contain some Dojo widgets. Initially, these widgets work fine, but upon subsequent loads, I encounter an error message: "Error: defineAlreadyDefined". This issue causes the rema ...
I've been grappling with this problem for the past few hours. I have successfully implemented react-moveable in a simple node.js app, but when I attempt to integrate it into a NEXTjs app, an error crops up: TypeError: Cannot read property 'userAg ...