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
Related
I need to create a website (two columns) where one column contains some text (vertical centered) and the other column contains a picture (sticky to bottom).
Both of them need to be responsive (so position: fixed is not an option for the image).
I tried to achieve this by using Bootstrap and the w3 responsive framework. But both of them seem unable to put a responsive image inside a column that is always stuck to the bottom.
Any tips on how I can achieve this layout while being responsive (Picture needs to resize etc)?
Here's a solution without using flex. It's completely responsive and can be scaled both horizontally and vertically.
body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100vh;
overflow: hidden;
}
#column1 {
position: relative;
width: calc(50% - 4px);
height: calc(100% - 4px);
display: inline-block;
border: 2px solid black;
}
#column1 span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 10px;
}
#column2 {
position: relative;
top: -50%;
left: 50%;
width: calc(50% - 2px);
height: calc(50% - 4px);
display: inline-block;
border: 2px solid black;
border-left: none;
}
<div id="container">
<div id="column1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>
</div>
<footer id="column2"></footer>
</div>
Here's a quick example of how you can achieve it with flex.
/* Std */
body {
margin: 0;
width: 100%;
height: 100%;
}
/* Flex Classes */
.flex {
display: flex;
}
.flex--row {
flex-direction: row;
}
/* Column Classes */
.column {
position: relative;
min-height: 100vh;
}
.left-column {
flex: 0.7;
background: red;
}
.right-column {
flex: 0.3;
background: blue;
}
/* Picture */
#column-picture {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
}
<div class="flex flex--row">
<div class="column left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia auctor tincidunt. Sed a turpis et eros iaculis convallis quis in nisl. Donec fringilla auctor eros ut ultrices. Donec laoreet dui urna, ut pharetra neque molestie et. Ut sagittis diam a lacus euismod dignissim. Sed vulputate dui erat, at hendrerit ante commodo et. Sed gravida ex et est bibendum pretium. Aliquam a convallis dui. Maecenas magna velit, ultrices eu massa sit amet, dictum accumsan tellus. Maecenas eget placerat magna. Nullam mollis lacus tempor lorem tempor tincidunt. Aliquam erat volutpat.
</div>
<div class="column right-column">
<img id="column-picture" alt="Lion" src="https://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide.jpg"/>
</div>
</div>
Tell me what you think of this. #Mech
https://codepen.io/rickydam/pen/zdrmWX
HTML
<div class="left">
<div class="innerleft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla. Phasellus vel quam a sem elementum volutpat vel eget neque. Nam efficitur maximus risus, ac eleifend augue tempor rutrum. Fusce vehicula non lorem vitae blandit. Donec in scelerisque sem, quis congue velit.
</p>
</div>
</div><!--
--><div class="right">
<img src="http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg">
</div>
CSS
.left {
width: 50%;
height: 100vh;
background-color: lightgray;
display: inline-block;
vertical-align: middle;
margin: auto;
}
.innerleft {
background-color: lightblue;
height: 100vh;
display: flex;
align-items: center;
}
.left p {
margin: 20px;
padding: 10px;
background-color: gray;
}
.right {
width: 50%;
height: 100vh;
background-color: slategray;
display: inline-block;
vertical-align: top;
position: relative;
}
.right img {
position: absolute;
bottom: 0;
max-width: 100%;
}
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.
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've made a design with flex box. I've split my site in two parts. The left part has a width of 75% of the width of the window, the right side fill the rest.
The problem is now, when I place text into the right section, the text goes out of my screen. I've place a padding to the right side of that section but it must be 26.843.170 pixels (you read good) for to be good! To much of course... Note that the right side has a fixed position.
Now my question is, What I'm doing wrong? Here is my code:
$(".draw-area, .artist-info, .draw-en-info").css("height", parseInt($(window).height()) - parseInt($("fieldset").height()) + "px");
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.artist-info {
background-color: lightgray;
margin: 0;
position: fixed;
top: 50px;
padding: 0 10px;
width: 25%;
/* padding-right: 26843170px; */
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
.draw-en-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: absolute;
top: 47.9px;
width: 100%;
z-index: -1;
}
#draw-area {
width: 75%;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section id="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, </li>
</ul>
</section>
</div>
</main>
I'm not entirely clear on what you are trying to do but flexbox can manage most of this.
If there are some requirements that you haven't mentioned you may need to ask a new question.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.draw-en-info {
display: flex;
}
.draw-area {
background: plum;
flex: 1;
}
.artist-info {
background-color: lightgray;
padding: 0 10px;
flex: 0 0 25%;
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
//position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section class="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod
non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam,</li>
</ul>
</section>
</div>
</main>
i am having trouble sorting out my layout for my website, basically the footer at the bottom is being overlayed by the content above it and i cant figure out what is causing this.
Here is the - https://jsfiddle.net/2py4tus9/4/
Thanks for your help
Here is the html
html,
body {
height: 100%;
width: 100%;
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
Remove height:100% from your tabs class.
.tabs {
position: relative;
width:100%;
/*height: 100%;*/
background-color: greenyellow;
display:inline-block;
}
DEMO
Your body element is set to width 100% and height 100% this is makes your page align to the viewport.
So removing the height and width makes the content scale more reasonably.
This also causes the the elements to expend the content on body so that they don't overlap.
I believe this is what happened with your footer.
html,
body {
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->