I want to create a sticky background which starts to stick after the header is scrolled out of frame
so far this is my progress
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.header
{
width:100%;
background-color:black;
height:100px;
}
div.sticky {
position: -webkit-sticky;
position:sticky;
width:100%;
top: 0;
z-index: -1;
}
#contain
{
width: 50%;
background-color: yellow;
margin: auto;
padding-left: 100px;
padding-right: 100px;
height: 1000px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg" style="background-size: cover; flex-shrink: 0;min-width: 100%;min-height: 100%; "></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
</body>
</html>
but the yellow div is below the image, whereas I need it to start below the black header
so is there anyway to "ignore" the middle image wrapper <div>?
(I'm a beginner so please provide the simplest possible solution)
Make its height 0:
.header {
background-color: black;
height: 100px;
}
div.sticky {
position: sticky;
top: 0;
z-index: -1;
height:0;
}
div.sticky img {
width: 100%;
}
#contain {
width: 50%;
background-color: yellow;
margin: auto;
padding:10px 100px;
height: 1000px;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
Or consider a hack using float and shape-outside:
.header {
background-color: black;
height: 100px;
}
div.sticky {
position: sticky;
top: 0;
z-index: -1;
float:left;
width: 100%;
shape-outside:inset(50%);
}
div.sticky img {
width: 100%;
}
#contain {
background-color: yellow;
margin:0 20%;
padding:10px 100px;
box-sizing:border-box;
height: 1000px;
display:inline-block;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
Related
I have build a page like in this sample below. You can also play around with it on codepen.
The idea was, that the dark grey hero box is placed on the bottom of the viewport. So far so easy.
BUT if the screen is too small in height (e.g. for a small laptop), so that the text would fill most (or even all) of the viewport, the background image could hardly be realized. In this case the hero box should be placed in the golden ratio instead of the bottom of the viewport.
I have already build that solution in the sample as well. Just reduce the height of your browser window.
I just have the feeling that I am doing soemthing wrong in general. At the moment I am placing hero, content and footer in absolute positioned divs. It's working ok as long as there is only static content inside the #content div. But if there is for example an accordion or some other collapsing/dynamic stuff, the position of the footer has to be re-calculated.
I can easily do this in re-calling the ratio function. But meanwhile the whole solution does look wrong or maybe too complex to me.
Isn't there another and more easy solution to place the content div with a RELATIVE position after the hero container?
// call function after everything has been loaded
$(window).load(function() {
checkRatio();
});
window.dispatchEvent(new Event('resize'));
$(window).resize(function() {
checkRatio();
});
function checkRatio() {
var ratio = 0;
var contentTopPos = 0;
var footerTopPos = 0;
var windowHeight = $(window).height();
var headerHeight = $("#hero").height();
var contentHeight = $("#content").height();
ratio = (windowHeight / headerHeight);
contentTopPos = (windowHeight / 1.618);
if(ratio < 1.618) {
// Window too small or Content too long
$("#hero").css('bottom', 'initial');
$("#hero").css('top', contentTopPos);
} else {
// Default Position: bottom 0
$("#hero").css('top', 'initial');
$("#hero").css('bottom', 0);
}
var sumHeight = $("#hero").offset().top + $("#hero").height();
$("#content").css('top', sumHeight + "px");
footerTopPos = (sumHeight + contentHeight);
$("#footer").css('top', footerTopPos + "px");
}
body {
padding: 0;
margin: 0;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#header_img {
position: fixed;
top: 0;
height: 100vh;
width: 100%;
background-size: cover;
z-index: 1;
}
#hero_container {
position: relative;
height: 100vh;
width: 100%;
}
#hero {
position: absolute;
margin: 0 5%;
bottom: 0;
width: 90%;
height: auto;
background-color: #333;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.46);
z-index: 2;
}
#hero_text {
padding: 20px;
color: #fff;
}
#content {
position: absolute;
width: 100%;
background-color: transparent;
z-index: 3;
}
section {
background-color: #dedede;
padding: 20px;
border-bottom: solid 1px #333;
}
#footer {
position: absolute;
width: 100%;
z-index: 3;
background-color: #999;
color: #555;
}
#footer_text {
padding: 10px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="header_img" style="background: #ffffff url('https://cdn4.vectorstock.com/i/1000x1000/80/28/free-sample-rubber-stamp-vector-13448028.jpg') no-repeat center top; background-size: cover;"></div>
<div id="hero_container">
<div id="hero">
<div id="hero_text">
<h1>Lorem ipsum dolor sit</h1>
<h4>Cras felis leo, pellentesque non dui ut, molestie mollis lorem.</h4>
<p>Fusce venenatis metus id est venenatis ornare. Aliquam id ante et nulla rutrum malesuada vel sit amet felis. Maecenas maximus, quam vitae cursus ultrices, est augue consequat magna, vitae bibendum ex urna eget lacus. Donec quis sagittis diam.</p>
</div>
</div>
</div>
<div id="content">
<section>
<h2>Vivamus molestie</h2>
<p>Sem sit amet posuere elementum, ligula dolor laoreet eros, sed ultrices mi lacus quis est. Sed ut venenatis metus, id consectetur mauris.</p>
</section>
<section>
<h2>Mauris sollicitudin ante est</h2>
<p>Ut ultrices neque volutpat quis. Aenean bibendum dui sed pulvinar vestibulum. Vestibulum finibus ornare dui at lobortis.</p>
</section>
<section>
<h2>Sed consequat euismod sem</h2>
<p>In venenatis lacus luctus in. Nam elementum dolor a magna eleifend consectetur. Curabitur efficitur magna erat, et eleifend enim placerat sit amet. Fusce cursus, sem vel porta tempor, diam dolor auctor lorem, eu venenatis velit lorem ac lectus.</p>
</section>
</div>
<div id="footer">
<div id="footer_text">© 2020 SchweizerSchoggi</div>
</div>
.hero-container {
height: 100vh;
display: flex;
}
.hero-content {
width: 100%;
background: grey;
align-self: flex-end;
}
#media only screen and (max-height: 300px) {
.hero-container{
padding-top: 25vh;
}
.hero-content{
align-self: flex-start;
}
}
<div class="hero-container">
<div class="hero-content">
<h1>Lorem ipsum dolor sit</h1>
<h4>Cras felis leo, pellentesque non dui ut, molestie mollis lorem.</h4>
<p>Fusce venenatis metus id est venenatis ornare. Aliquam id ante et nulla rutrum malesuada vel sit amet felis. Maecenas maximus, quam vitae cursus ultrices, est augue consequat magna, vitae bibendum ex urna eget lacus. Donec quis sagittis diam.</p>
</div>
</div>
<div id="content">
<section>
<h2>Vivamus molestie</h2>
<p>Sem sit amet posuere elementum, ligula dolor laoreet eros, sed ultrices mi lacus quis est. Sed ut venenatis metus, id consectetur mauris.</p>
</section>
<section>
<h2>Mauris sollicitudin ante est</h2>
<p>Ut ultrices neque volutpat quis. Aenean bibendum dui sed pulvinar vestibulum. Vestibulum finibus ornare dui at lobortis.</p>
</section>
<section>
<h2>Sed consequat euismod sem</h2>
<p>In venenatis lacus luctus in. Nam elementum dolor a magna eleifend consectetur. Curabitur efficitur magna erat, et eleifend enim placerat sit amet. Fusce cursus, sem vel porta tempor, diam dolor auctor lorem, eu venenatis velit lorem ac lectus.</p>
</section>
</div>
<div id="footer">
<div id="footer_text">© 2020 SchweizerSchoggi</div>
</div>
The content boxes look good when they're full size, but when the page shrinks they are no longer centred. I've tried messing around with a bunch of things but can't for the life of me figure out what's wrong.
I've only been learning to code for a few weeks to please be kind lol, however if you have any off topic tips they are also appreciated
* {margin: 0; padding: 0}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim. Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
You have to read more about box-sizing, just add box-sizing: border-box; to all elements and it will fix your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra
ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim.
Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
Here is a link where you could know more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
My HTML structure shows a paragraph first and then a graphics at the bottom. Using CSS, I want to show the graphics at the top and paragraph at the bottom. The paragraph will be dynamic so the height is not fixed. I can't figure out how to solve the issue.
This my code:
.centerDiv {
width: 500px;
margin: 0 auto;
}
.topDiv {
display: inline-block;
width: 460px;
vertical-align: top;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
vertical-align: top;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
If the Graphic has a fixed height you can achieve that using positioning
see the code bellow
.centerDiv {
width: 500px;
margin: 0 auto;
}
/* added code */
.centerDiv>div {
position: relative;
padding-top: 100px; /* padding value equals to bottomDiv's height*/
}
/*---------------*/
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
/* added code */
position: absolute;
top: 0;
left: 0;
/*---------*/
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
Or you can use flex-direction: column-reverse; which reverses the order of the div children
But this may not be supported in some browsers
.centerDiv {
width: 500px;
margin: 0 auto;
}
.centerDiv>div {
display: flex;
flex-direction: column-reverse;
}
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
My problem is that I cannot center this image. I've tried margin: 0 and absolute positions but nothing seem to work. I'm kind of a rookie when it comes to html and css. I've cleared my tries to center it from the html and css.
I want the image to be centered even when the site window width changes so padding does not work.
This is my CSS
/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}
img {
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
HTML
<!--Front page image and text-->
<div class="container">
<img src="Aberlady_Church.png" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
</div>
At the moment, the image looks like this: http://puu.sh/o706W/ed57f22e12.jpg
You can try something like this
<!--Front page image and text-->
<div class="container">
<figure>
<img src="http://lorempicsum.com/futurama/350/200/1" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
</figure>
</div>
CSS
/* image and text setup container */
.container {
position: relative;
width: 100%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
color: #fff;
right: 80px;
font-size: 18px;
}
figure { position: relative; width: 400px; margin: auto; /* the width of your image */}
img {
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
I've added a figure and position the text in absolute position relative to this tag instead of the .container
Generally speaking, you are looking for
margin-left: auto;
margin-right: auto;
to horizontally centre a block level element within its container.
Please aware though, that you will complicate matters by adding float and position to its containing block, so try to avoid those unless you really need them.
I would try the following styles for that markup.
.container {
width: 100%;
}
.imagetext {
width: 5%;
font-size: 18px;
margin:0;
}
img {
margin:0;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
You have a lot of errors and excess code. I recomend you to read some books about HTML, CSS to upgrade your level.
Here's an example of simply solve of your problem with minimum code. We add image wrapper .image_wrapper, that centered images and text inside it.
CSS
.image_wrapper {
text-align: center;
}
.imagetext {
font-size: 18px;
}
img {
padding: 5px;
}
HTML
<div class="container">
<div class="image_wrapper">
<img src="http://www.theimaginativeconservative.org/wp-content/uploads/2016/02/Pretty-Church.jpg" alt="Church" width="400" height="200" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
</div>
Check it.
https://jsfiddle.net/r1rh7wn4/
You might want to consider wrapping your image and it's associated text in a <div> to separate it from the rest of the page text. This will also allow you to center both elements, regardless of page width. Here's an example:
https://jsfiddle.net/Bendrick92/gyc2n5o5/
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagecontainer {
width: 75%;
height: auto;
margin: 0 auto;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
.imagecontainer .imagetext {
width: 20%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
<div class="imagecontainer">
<img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>
Or if you'd like the image text to be centered below the image:
https://jsfiddle.net/Bendrick92/gyc2n5o5/1/
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagecontainer {
width: 75%;
height: auto;
margin: 0 auto;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
.imagecontainer .imagetext {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
<div class="imagecontainer">
<img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>
You actually just need to apply a "display:block;" + "margin:0 auto;" to your image.
/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}
img {
/* add this to make it center */
display:block;
margin:0 auto;
/* add this to make it center */
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
<div class="container">
<img src="Aberlady_Church.png" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
I'm not an expert in CSS 3 yet however I attempted to hack a code I found to create a cool timeline. I need to add a code to end the timeline (step 5 in this example) without the last line going down. Any help would be appreciated. See code:
section#timeline {
width: 100%;
margin: 20px auto;
position: relative;
}
/* the LINE */
section#timeline:before {
content: '';
display: block;
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 100%;
background: #000;
}
/* each section */
section#timeline article {
width: 100%;
margin: 0 0 50px 0;
position: relative;
}
/* section clear divs */
section#timeline article:after {
content: '';
display: block;
clear: both;
}
/* dots */
section#timeline article div.inner span.step {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -30px;
border-radius: 100%;
border: 7px solid #ffffff;
font-size: 1.7em;
background: #000;
color: #fff;
text-align: center;
padding: 0px;
line-height: 2em;
}
/* right column */
section#timeline article div.inner {
width: 45%;
float: left;
margin: 5px 0 0 0;
border-radius: 6px;
}
/* left column */
section#timeline article:nth-child(2n+2) div.inner {
float: right;
}
<section id="timeline">
<article>
<div class="inner">
<span class="step">1</span>
<div style="text-align: right;">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
</div>
</div>
</article>
<article>
<div class="inner">
<span class="step">2</span>
<h3>Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
</div>
</article>
<article>
<div class="inner">
<div style="text-align: right;">
<span class="step">3</span>
<h3>Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
</div>
</div>
</article>
<article>
<div class="inner">
<span class="step">4</span>
<h3>Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
</div>
</article>
<article>
<div class="inner">
<div style="text-align: right;">
<span class="step">5</span>
<h3>Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
</div>
</div>
</article>
</section>
Simply, add background to the last article (step 5).
section#timeline article:last-child {
background-color: white;
}
you can try this one:
section#timeline {
width: 100%;
margin: 20px auto;
position: relative;
}
/* the LINE */
section#timeline:before {
content: '';
display: block;
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 82%;
background: #000;
}
/* each section */
section#timeline article {
width: 100%;
margin: 0 0 50px 0;
position: relative;
}
/* section clear divs */
section#timeline article:after {
content: '';
display: block;
clear: both;
}
/* dots */
section#timeline article div.inner span.step {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -30px;
border-radius: 100%;
border: 7px solid #ffffff;
font-size: 1.7em;
background: #000;
color: #fff;
text-align: center;
padding: 0px;
line-height: 2em;
}
/* right column */
section#timeline article div.inner {
width: 45%;
float: left;
margin: 5px 0 0 0;
border-radius: 6px;
}
/* left column */
section#timeline article:nth-child(2n+2) div.inner {
float: right;
}
DEMO FIDDLE