I found this piece of code for a timeline I need for a website online. You can see how it looks at https://jsfiddle.net/ . My question is why is it so small? I don't see anything in the css setting the size, is this a bootstrap feature?
Code also posted below:
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
Thanks for any help, as you can tell I am not the best developer but I would really like to add this feature on my site.
You should change the class of div from ".col-md-6, .offset-md-3" to ".col-12" and if and it is not sufficient then change ".container" to ".container-fluid".
<body>
<div class="container-fluid mt-5 mb-5">
<div class="row">
<div class="col-12">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
Related
Per the following screenshot, I have two <div> elements, each containing tables, with those <div> placed adjacent to one another. Additionally, the <body> content is placed below those <div>.
How can I wrap the left table under the right one, if the there is unused space under the right table?
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent table wrapping</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
}
table tr:nth-child(odd) { background-color: #edf0f0; }
#left_div {
float: left;
wrap:inline;
width: 60%;
}
#left_div table td:first-child {
}
#right_div {
float: right;
clear: right;
width: 39%;
}
/* Without the following, "clear: left;", if there was space between the
* "left_div" and the "right_div", then the body text was wrapping between
* those adjacent (float {left | right}) <div>. The solution, per
* https://stackoverflow.com/questions/3258944/how-can-stop-text-wrapping-around-some-floated-divs
* was to add
* <div id="clear_left"></div>
* which enables text to both flow below the "left_div", and also to the left
* of the "right_div".
*/
#clear_left {
clear: left;
}
</style>
</head>
<body>
<!-- LEFT DIV -->
<div id="left_div">
<table>
<tr>
<td>URL</td>
<td>example.com</td>
</tr>
<tr>
<td>Source</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Year</td>
<td>2021</td>
</tr>
<tr>
<td>Modified</td>
<td>July 01, 2021</td>
</tr>
<tr>
<td>Comment</td>
<td> Suspendisse efficitur pulvinar elementum.</td>
</tr>
<tr>
<td>Key points</td>
<td>
<ul>
<li class="body">Vestibulum a est eu erat rutrum scelerisque non et diam.</li>
<li class="body">Nam ut fringilla enim.</li>
</ul>
</td>
</tr>
<tr>
<td>Notes</td>
<td>Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque.</td>
</tr>
<tr>
<td>More notes</td>
<td>Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
<tr>
<meta name="summary" content="" />
<td>Summary</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
</table>
</div>
<!-- RIGHT DIV -->
<div id="right_div">
<table>
<tr>
<td colspan="2">
<b><center>Flag of Canada</center></b>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/1280px-Flag_of_Canada_%28Pantone%29.svg.png" alt="Flag of Canada" width="400"/>
</td>
</tr>
</table>
</div>
<!-- Prevent <body> content between "left_div" and "right_div": -->
<div id="clear_left"></div>
<!-- ---------------------------------------------------------------------- -->
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</p>
</body>
Truly dynamically sized L-shaped tables are (at this time) impossible to achieve.
Grid might support it in the future.
Until then, you have to compromise on some level.
If you can reasonably estimate the size of the image and the size of first couple or rows then rowspan might be a good solution, having the image span the length of the first couple of rows.
Or if your content allows for it, you could mimic a table like behavior in css, and have the image float:right alongside it.
.table {
border-bottom: 1px solid black;
}
.table div.row {
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
display: flex;
}
.table div.row span {}
.table div.row span:first-child {
border-right: 1px solid black;
display: inline-block;
min-height: 100%;
min-width: 70px;
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.5rem;
}
.table div.row span:last-child {
padding-left: 0.5rem;
}
.table div.row:nth-child(odd) {
background-color: #edf0f0;
}
.right_div {
float: right;
clear: right;
padding: 10px;
padding-top: 0;
background-color: white;
}
.flag {
padding: 10px;
background-color: #edf0f0;
border: 1px solid black;
}
<!-- LEFT DIV -->
<div id="left_div">
<div class="table">
<div class="right_div">
<div class="flag">
<b><center>Flag of Canada</center></b>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/1280px-Flag_of_Canada_%28Pantone%29.svg.png" alt="Flag of Canada" width="340" />
</div>
</div>
<div class="row">
<span>URL</span>
<span>example.com</span>
</div>
<div class="row">
<span>Source</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row">
<span>Year</span>
<span>2021</span>
</div>
<div class="row">
<span>Modified</span>
<span>July 01, 2021</span>
</div>
<div class="row">
<span>Comment</span>
<span> Suspendisse efficitur pulvinar elementum.</span>
</div>
<div class="row">
<span>Key points</span>
<span>
<ul>
<li class="body">Vestibulum a est eu erat rudivum scelerisque non et diam.</li>
<li class="body">Nam ut fringilla enim.</li>
</ul>
</span>
</div>
<div class="row">
<span>Notes</span>
<span>Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque.</span>
</div>
<div class="row">
<span>More notes</span>
<span>Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharediva varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</span>
</div>
<div class="row">
<span>Summary</span>
<meta name="summary" content="" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rudivum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharediva varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</span>
</div>
</div>
</div>
I'm having a bit of trouble lining up the "Get updates right to your inbox!" text with the email submission form. It's supposed to be positioned at the bottom of the background image, but I can only get it there by adjusting the margins. Also, as you probably see, the "Read More" and "Get Tickets" buttons are supposed to be centered. I've tried text-align: center, but that doesn't seem to be doing anything. Also, is there any way to reduce the size of the columns? I'd really appreciate the help! Here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="indyfolk.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src=""></script>
<title>Indy Folk News</title>
</head>
<body>
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
NEWS
EVENTS
CONTACT
</div>
<div class="banner">
<p>Providing News of Indy Folk Music,
<br>
Folk Art, Storytelling & Cultural News
<br>
to the Community
</p>
<button class="button button1">LEARN MORE</button> <button class="button button2">SEE EVENTS</button>
<div class="bottomhdr">
<div class="bottomtxt">
<p>GET UPDATES RIGHT TO YOUR INBOX</p>
</div>
<div class="email">
<form action="/action_page.php">
<input type="text" placeholder="enter your email address" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<br>
<div class="row">
<h1>Recent Posts</h1>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#ccc;"></div>
<div class="column" style="background-color:#ccc;"></div>
<div class="column"style="background-color:#ccc;"></div>
<div class="column"style="background-color:#ccc;"></div>
</div>
<br>
<div class="link">
SEE ALL NEWS POSTS >
</div>
<br>
<hr>
<br>
<div class="row1">
<h1>Upcoming Events</h1>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
</div>
<br>
<br>
<div class="link">
SEE ALL EVENTS >
</div>
</body>
</html>
CSS
body, html {
height: 100%;
margin: 0;
font-family: 'Lato', sans-serif;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
margin-top: 30px;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-image: url('folkband.png');
background-position: center;
background-size: cover;
height: calc(100% - 96px);
}
.banner p {
font-family: 'Lato', sans-serif;
font-size: 42px;
color: white;
padding-left: 60px;
padding-top: 140px;
}
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 0px;
cursor: pointer;
padding: 4px 30px;
}
.button1 {
margin-left: 60px;
background-color: #E4631D;
}
.button2 {
background-color: #F2CB54;
}
.bottomtxt {
width: 50%;
float: left;
}
.bottomtxt p {
font-size: 18px;
background-color: #24664D;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 153px;
}
.email {
float: right;
background-color: #24664D;
margin-top: 153px;
padding-top: 20px;
padding-bottom: 21px;
padding-left: 386px;
padding-right: 16px;
}
.email input[type=text] {
font-size: 14px;
border: none;
}
.column {
float: left;
width: 24%;
margin: 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column img {
width: 100%;
background-size: cover;
}
.row h1 {
font-size: 25px;
text-align: center;
color: #E4631D;
}
.button3 {
background-color: #E4631D;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 30px;
}
.link {
text-align: center;
}
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
.row1 h1 {
font-size: 25px;
text-align: center;
color: #F2CB54;
}
.button4 {
background-color: #F2CB54;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 30px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 50px;
margin-right: 50px;
border-style: inset;
border-width: .25px;
}
You can do it easily using flexbox. Check the snippet below and try more until found desire solution.
.bottomhdr{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="bottomhdr">
<div class="bottomtxt">
<p>GET UPDATES RIGHT TO YOUR INBOX</p>
</div>
<div class="email">
<form action="/action_page.php">
<input type="text" placeholder="enter your email address" name="search">
<button type="submit"><i class="fa fa-search"></i>Search</button>
</form>
</div>
</div>
I am trying to create this in bootstrap 3:
However, right now I have got this:
My image is not lined up perfectly with the h4 tag and my p tags will not stay in a line as the first image. I am using bootstrap 3, so I am getting used it everything, and I was wondering if anyone can help me achieve this look. So far I have:
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
padding: 20px 10px;
text-align: left;
}
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
I am just trying to make it look like the first image with bootstrap 3.
remove text-align: center from .col-content p to avoid the text-centering in the paragraphs and change padding: 20px 10px; to padding: 0 10px 20px 10px; in .col-icon to move the icons up to the top of their container:
https://codepen.io/anon/pen/wpaebo
for line up use display:inline-flex;align-item: flex-start; and remove text-align: center; from p tag
Use a combination of top and left while making the icon position:relative
position: relative;
top: -11px;
left: 8px;
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
text-align: left;
position: relative;
top: -11px;
left: 8px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
I need to scroll a sidebar div and it's content (3 links) vertically between two points. I have used position:fixed; top: 100px. This works fairly well, it starts 100px down form the top and scrolls vertically when a user scroll down the page. But how do I get it to stop just before the footer? So far I have:
HTML
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
CSS
.scroll {position: fixed; top: 450px;}
Thanks,
Andy ;-)
Okay, I have added more code to give a better picture of what I am after. Here is the JSFiddle: https://jsfiddle.net/mwt4x90d/
The javascript should be placed before the closing scroll div of the HTML file. However, jsfiddle wants it separated out.
I got it working, but I have two issues. The first is the outer div (sidebar) collapses (just see a line above the scroll div. The second is the div is not stopping above the Left Box / Pagination no matter what figure I use inside the parenthesis. I am using a Liquid layout so maybe that is having an effect.
If anyone can see what I am doing wrong, it would be great, I don't know JavaScript, so I am just going by what ye say here. Thanks for any help, Andy ;-)
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolling Sidebar</title>
<link rel="stylesheet" type="text/css" media="screen" href="mainstyle.css">
</head>
<body>
<div class="headerContents">
<h1>Lorem Ipsum</h1>
</div>
<div class="leftM"></div>
<div class="centerM">
<a class="top"></a>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
</div>
<div class="rightM"></div>
<div class="sidebar">
<div class="scroll">
<h2>Lorem Ipsum</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<script type="text/javascript>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (350) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (350) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
</div>
</div>
<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.<p>
<p>Duis urna sapien, tristique non leo non, ultricies iaculis nibh. Sed posuere quis eros vitae vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas auctor sollicitudin condimentum. Pellentesque ipsum lacus, convallis sed nunc et, porta lacinia lectus. Nam vitae ante erat. Etiam elementum velit quis neque vehicula, quis blandit quam pulvinar. Vestibulum mollis pretium tortor porttitor accumsan. Proin nec semper nulla. Praesent mi augue, placerat vitae auctor vel, lobortis eget dolor. Donec eget mi augue. Maecenas eu augue cursus, maximus nisi eleifend, tempor lacus. Curabitur quis dolor vel urna venenatis pellentesque a nec est. Duis sit amet tempus dui. Integer egestas luctus efficitur. Etiam efficitur orci et ullamcorper pulvinar.<p>
Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. Curabitur turpis diam, molestie nec accumsan sed, scelerisque nec orci. Cras lobortis rutrum sem, vel viverra magna scelerisque ac. Phasellus convallis nunc quis consectetur congue. In vestibulum erat non tellus aliquam sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis rutrum augue, in faucibus nisi. Nulla bibendum ut massa vel eleifend. In nec ligula eget nisi ultricies eleifend. Aliquam ac finibus enim. Maecenas at lacus dictum, porta neque non, suscipit ex. Aenean sem nisl, pellentesque vel leo eget, volutpat condimentum odio. Curabitur sed dui nulla.
</div>
<div class="leftp">Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. </div>
<div class="pag snippetspag">
<ul class="pagination">
<li>«</li>
<li><a class="active" href="../page1.php">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>»</li>
</ul>
</div>
</div>
<div class="footer">
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
</div>
<div class="copyright">
<p class="copyrightText">Lorem ipsum dolor sit amet Lorem Ipsum 2016</p>
</div>
</body>
</html>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
body{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #3f3f3f;
margin: 0;
padding: 0;
color: #000;
background: #f4f3f2;}
h1{font-size: 2.8em; font-weight: 700;}
h2{margin: 0 0 .5em 0; font-size: 1.4em; font-weight: 700; line-height: 1.1em;}
h3{margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700;}
p{margin: 0 0 1em 0;}
.headerContents{background-color: #3f3f3f; padding: 1em 2em; margin-bottom: 2em;}
.leftM, .centerM, .rightM{
float: left;
margin-bottom: 2em;
margin-left: 3%;}
.centerM{background-color: #fff; border: 1px solid #dfdfdf;}
.leftM{width: 9%;}
.centerM{width: 68%;}
.rightM{width: 9%;}
.sidebar,.cards{
float: left;
margin-bottom: 1em;
margin-left: 3%;}
.sidebar {width: 21%; border: 1px solid #dfdfdf; background-color: #fff;}
.scroll{position: fixed; height: 200px;}
.cards {width: 70%;}
.leftp, .pag{
float:left;
margin-bottom: 2em;
margin-left: 3%;}
.leftp{clear: both; width: 21.5%;}
.pag{width: 69.5%; background-color: #fff; border: 1px solid #dfdfdf; padding: 1.5em 0;}
.footer{
clear: both;
padding: 1.5em 1em;
background-color: #3f3f3f;
overflow: hidden;
line-height: 1.5em;
border-top: 5px solid #ff0000;
color: #fff;}
.copyright{clear:both;}
.headerContents h1{font-size: 3em; color: #fff;}
.centerM aside{width: 33%; float: left; text-align: center;}
.centerM .content{
margin: 15px;
background: no-repeat center top;
background-size: 75px 75px;
padding-top: 15px;}
.centerM aside h2{text-decoration:none;}
.centerM aside h2:hover{text-decoration: underline;}
.snippetspag{
text-align: center;}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li a {
color: #3f3f3f;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;}
ul.pagination li a:hover {
color: #ff0000;}
ul.pagination li a.active {
background-color: #ff0000;
color: #fff;
font-weight: bold;
border-radius: 5px;}
.footer aside .content{
margin: 0 auto;
width: 22%;
float: left;
text-align: left;
margin-left: 3%;}
.footer a:link, a:visited{color: #99cc00; text-decoration: none;}
.footer a:hover, a:active{color: #cc9900;}
.copyright{
text-align: center;
background-color: #3f3f3f;
padding: 1%;
border-bottom: 5px solid #ff0000;}
.copyrightText{font-size:0.9em; color: #fff;}
.copyrightText a:link, a:visited{color: #99cc00; text-decoration: none;}
.copyrightText a:hover, a:active{color: #cc9900;}
Just insert this a the end of your HTML:
<script type="text/javascript>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (ENTER FOOTER POSITION HERE) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (ENTER FOOTER POSITION HERE) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
So that basically changes the position to stay where it is when it gets to the footer position.
REMEMBER TO ENTER THE FOOTER POSITION IN IN A STANDARD NUMBER FORM.
Like 600.
Not 600px.
<body>
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<div style="height:2500px">
</div>
<style>
.scroll {
position: fixed;
top: 450px;
}
</style>
<script>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (600) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (600) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
</body>
That's the entire thing.
And it might not work on JSFiddle. Just copy that into a Notepad++ HTML file and edit all you want!
I would like to know how to start my ol with a different number, say 4. I have tried using start="4" and I have tried adding a class to the ol and setting counter-reset: 4; but none of this seems to work. The number doesn't change.
I have tried to remove all my stylings to put it right back to a plain ol list but it still doesn't work. Can someone please tell me where I am going wrong?
I just want the second list to have the number in the red circle start with 4.
JSFIDDLE
HTML
<div class="row">
<div class="col-md-6">
<ol class="number-circles">
<li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 3</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
<div class="col-md-6">
<ol class="number-circles four">
<li><div class="ol-block"><div class="blue-heading">Title 4</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 5</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
</div>
CSS
.col-md-6 {
float: left;
width: 50%;
}
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
.blue-heading {
color: red;
font-weight: 600;
margin-bottom: 5px;
}
li {
counter-increment: step-counter;
margin-bottom: 40px;
}
.number-circles li::before {
content: counter(step-counter);
margin-right: 15px;
font-size: 17px;
background-color: red;
border: solid 6px yellow;
color: white;
font-weight: bold;
border-radius: 50%;
height: 40px;
display: inline-block;
width: 40px;
height: 40px;
padding: 2px 8px;
text-align: center;
float: left;
}
.ol-block {
float: left;
display: inline-block;
width: 85%;
margin-bottom: 20px;
}
ol.four { counter-reset: item 2; }
You have list-style-type set to none on your ol.
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
The start attribute won't make a difference, because the value will be hidden.
list-style-type
The list-style-type property specifies the appearance of a list item
element.
none
No item marker is shown.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
You don't have a counter named "item". You need to change:
ol.four {counter-reset: item 2}
to:
ol.four {counter-reset: step-counter 3}
The value of step-counter is 0 based so setting value to 3 will display 4
Check it out here - JSFiddle