Has anybody ever encountered the problem that pictures are not shown inline in the Google Chrome browser, even though i.e. display:inline-blockand other css codes were used? In any other browser everything is depicted as it was intended. However, the 4th picture is only suddenly in another row when the site is being opened in Chrome.
The problem looks like this:
Code:
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1981-1990</h4>
</div>
<div class="timeline-body">
<p>Some text</p>
<p>Some more text</p>
</div>
</div><div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
</li>
CSS
/*body*/
body {
background-color: white;
}
.panel {
background-color: white;
color: black;
border-radius: 0;
text-align: justify;
font-size: 1.3em;
}
.panel-extra {
padding: 10px 0;
margin-top: 25px;
background-color: lightgrey;
border-radius: 0;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.box {
padding-top: 30px;
padding-bottom: 30px;
border-bottom-width: 3px;
border-bottom-color: lightgrey;
border-bottom-style: solid;
}
/*Timeline*/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-bottom: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-picture-body: before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body: after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body {
float: left;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-images-right {
display: inline-block;
vertical-align: top;
width: 40%;
float: left;
padding: 0 10px;
}
.timeline-images-left {
display: inline-block;
vertical-align: top;
width: 40%;
float: right;
padding: 0 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.align {
display: block;
}
/*fonts*/
h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 220px;
margin-top: 0;
}
.box h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 30px;
margin-top: 0;
}
h2{
text-align: center;
font-size: 2.3em;
color: black;
}
p {
text-align: justify;
font-size: 1.3em;
}
Since bootstrap is being used, inserting <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div> after the second picture in the code fixed the problem.
<div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
Related
I am trying to do sticky header on my existing page an I have all margins in rem but when I set up font-size for main header which contains all header content is influenced just ul list part and other margins are the same. Can you please advice me what is problem?
I want to make header more slim when I scroll down.
JQuery code:
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
CSS header code:
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8rem !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3rem;
margin: 1.225rem 0.9375rem;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375rem 0 0.9375rem 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225rem 1.875rem 1.225rem 0;
}
.mheader__search input {
width: 100%;
height: 2.3rem;
border: 1px solid #aaa;
border-radius: 0.25rem;
font-size: 1.0625rem;
padding-left: 0.25rem;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125rem;
cursor: pointer;
}
HTML code
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
Thank you
Make sure you use EM instead of REM if you want to make it relative to some parent. So all the REM sizes are based on the <html> tag.
If you do em,
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
body{
height:4000px;
}
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8em !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3em;
margin: 1.225em 0.9375em;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375em 0 0.9375em 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225em 1.875em 1.225em 0;
}
.mheader__search input {
width: 100%;
height: 2.3em;
border: 1px solid #aaa;
border-radius: 0.25em;
font-size: 1.0625em;
padding-left: 0.25em;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125em;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
I am trying to show the progress bar.
I have uploaded the file here - https://jsfiddle.net/iftekhar09/7ojsz5qp/1/
Also there's a snippet below.
I want to put the Image (say from font-awesome) in place of the number "1", how can I achieve this?
.container {
width: auto;
}
.task-progress-header{
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img{
width: 15px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 14%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
Use content:'' background:url inside .progressbar li:before class and give the image URL it works.
I hope this is what you are expecting
For different images at each step:
.container {
width: auto;
}
.task-progress-header {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img {
width: 15px;
}
.progressbar li {
list-style-type: none;
width: 14%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:nth-child(1):before {
background: url(https://dummyimage.com/30x0/c0c/fff);
}
.progressbar li:nth-child(2):before {
background: url(https://dummyimage.com/30x0/00c/fff);
}
.progressbar li:nth-child(3):before {
background: url(https://dummyimage.com/30x0/c0/fff);
}
.progressbar li:nth-child(4):before {
background: url(https://dummyimage.com/30x0/0fc/fff);
}
.progressbar li:nth-child(5):before {
background: url(https://dummyimage.com/30x0/f0c/fff);
}
.progressbar li:nth-child(6):before {
background: url(https://dummyimage.com/30x0/002/fff);
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">
Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
Same image at each step:
.container {
width: auto;
}
.task-progress-header {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img {
width: 15px;
}
.progressbar li {
list-style-type: none;
width: 14%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
background: url(https://dummyimage.com/30x0/002/fff);
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">
Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
I made my own progress step bar.
Maybe this will come to use for someone.
In this progress step bar every step has its own image.
.bs-wizard {margin-top: 20px;}
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative; width: 16.5% !important;}
.stepvijf > .bs-wizard-step {padding: 0; position: relative; width: 20% !important;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #333; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #84b826; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; border-bottom: 1px solid; border-top: 1px solid;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #84b826;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f7f8;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
#media all and (max-width: 1550px) {
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #333; font-size: 10px !important;}
}
#media all and (min-width:1550px) {
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #333; font-size: 14px;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container" style="width: 105%; padding-right: 60px;">
<div class="row bs-wizard" style="border-bottom:0;">
<div class="col-xs-3 bs-wizard-step complete">
<div class="text-center bs-wizard-stepnum">Step 1</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Start order</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 2</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Payment received</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 3</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Sorting</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 4</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Package underway</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 5</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Almost delivered</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 6</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Delivered</div>
</div>
</div>
</div>
I want to integrate a timeline on a website and used this code as a basis for the timeline: http://bootsnipp.com/snippets/featured/timeline-responsive
I further expanded the snippet by adding pictures. In the beginning everything worked great with two pictures (in the first row), three were also okay(below the first two), but as soon as a forth came, latter suddenly appeared one row below instead of next to the third under the second.
html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1981-1990</h4>
</div>
<div class="timeline-body">
<p>Some text</p>
<p>Some more text</p>
</div>
</div><div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
</li>
CSS:
/*body*/
body {
background-color: white;
}
.panel {
background-color: white;
color: black;
border-radius: 0;
text-align: justify;
font-size: 1.3em;
}
.panel-extra {
padding: 10px 0;
margin-top: 25px;
background-color: lightgrey;
border-radius: 0;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.box {
padding-top: 30px;
padding-bottom: 30px;
border-bottom-width: 3px;
border-bottom-color: lightgrey;
border-bottom-style: solid;
}
/*Timeline*/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-bottom: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-picture-body: before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body: after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body {
float: left;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-images-right {
display: inline-block;
vertical-align: top;
width: 40%;
float: left;
padding: 0 10px;
}
.timeline-images-left {
display: inline-block;
vertical-align: top;
width: 40%;
float: right;
padding: 0 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.align {
display: block;
}
/*fonts*/
h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 220px;
margin-top: 0;
}
.box h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 30px;
margin-top: 0;
}
h2{
text-align: center;
font-size: 2.3em;
color: black;
}
p {
text-align: justify;
font-size: 1.3em;
}
I already tried deleting any padding and changing the display and vertical-alignment property.
For clarification, the problem looks like this:
If you need further parts of the code, please tell me, I am happy to upload them as well.
I appreciate any help, thank you in advance!
It is not the perfect solution as it does not target the initial browser problem but this way the pictures no longer behave weird:
I have added a containerbetween the rows. It must be a bootstrap container, with all the other elements and classes that I tried it did not work.
<div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="img/tl7.jpg">
<img class="timeline-images-left padding-bottom" src="img/tl8.jpg">
<div class="container"></div>
<img class="timeline-images-left align" src="img/tl9.jpg">
<img class="timeline-images-left align" src="img/tl10.jpg">
</div>
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>