I am making a manual with html/css/js and to go through the manual I made two buttons.
This is what it looks like:
The strange this is, the first previewed menu-item 'introductie' has the same css code as the fourth previewed menu-item 'hart meten'. But why is there a gap between the paragraph and the buttons in the previewed 'introductie' ?
my code:
HTML
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'">
<img src="img/logo.png" alt="logo" />
<h1 >Hartmeting voor fitte mensen</h1>
</div>
</header>
<!-- Stappenplan Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
<li> Het Probleem </li>
<li> Stappenplan </li>
<li> Hartmeting </li>
</ul>
</nav>
<!-- HET STAPPENPLAN -->
<div id="content">
<!-- Intro Slide -->
<article id="menu_a">
<h2>Introductie</h2><br>
<figure>
<img src="img/intro1.jpeg" alt="Intro Afbeelding"/>
</figure>
<p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p>
</article>
<!-- Slide 1 -->
<article id="menu_b">
<h2>Het Probleem</h2><br>
<figure>
<img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding"/>
</figure>
<p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p>
</article>
<!-- Slide 2 -->
<article id="menu_c">
<h2>Hoe kan mijn hartslag meten?</h2><br>
<figure>
<img src="img/polsmeten.png" alt="Tweede Afbeelding"/>
</figure>
<ol id="stappen">
<li>Ga gerust zitten.</li>
<li>Houd je wijsvinger en middelvinger tegen elkaar.</li>
<li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li>
<li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li>
<li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li>
<li>De pop-up laat je gemiddelde hartslag per minuut zien.</li>
</ol>
</article>
<!-- Slide 3 -->
<article id="menu_d">
<h2>Hart Meten</h2><br>
<figure>
<!-- Hartmeet tool -->
<div id="klik_Hart" class="heart">
</div>
<br>
<br>
<br>
<!-- Einde hartmeet tool-->
</figure>
<ol id="stappen">
<li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li>
<li>Boven de 100 is slecht.</li>
<li>Richting de 40 is goed.</li>
</ol>
</article>
<!-- ABOUT -->
<!-- <div id="about">
<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>
</div> -->
<!-- vorige/volgende buttons -->
<table id="volgorde">
<th><button class="button" id="previous">Previous</button></th>
<th><button class="button" id="next">Next</button></th>
<th>
<!-- Checkbox Auto Slider -->
<div class="auto_menu">
<input type="checkbox" id="checkbox">
<label for="checkbox">Auto Handleiding</label>
</div>
<!-- -->
</th>
</table>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<p> Wij zijn ....</p>
</div>
</div>
</div>
<div id="buffer"></div>
<footer>
<a id="footer_" href="#" onclick="openNav()">☰ Over ons </a>
</footer>
</div>
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts1.js" type='text/javascript'></script>
</body>
</html>
CSS
#titel{ color: #B0C4DE; text-align: center;}
/*Verstop alle artikelen binnen content*/
article {
display:none;
}
body{
background-color: #333333;
color: grey;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 12pt;
width: 100%%
}
#wrapper{
background-color: #ADD8E6;
width: 90%;
margin-left: auto;
margin-right: auto;
/*background-image: url("../img/bg.jpg");*/
background-size: cover;
background-position: left top;
border: 2px groove #001f3f;
overflow: auto;
}
#content{
margin-left: auto;
margin-right: auto;
float: left;
width: 70%;
}
#content img{
height: 250px;
width: 450px;
}
#menu{
font-weight: thin;
color: #424242;
float: left;
width: 15%;
text-align: center;
margin-left: 5%;
margin-top: 6.7%;
font-size: 10pt;
}
ul{list-style-type: none;}
h1{ text-shadow: 1px 1px 3px #00008B;}
a{
display: block;
text-decoration: none;
color: #0074D9;
background-color: #001f3f;
border: 1px solid #B0C4DE;
padding: 5px;
}
a:hover{
background-color: #FFD900;
color: #001f3f;
}
footer{
overflow: hidden;
clear: both;
}
#volgorde{
font-weight: thin;
color: grey;
width: 10%;
text-align: center;
clear: both;
margin-left: 3%;
margin-bottom: 2%;
}
.button {
background-color: #001f3f;
color: #FFDC00;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
}
.button:hover{
background-color: #FFD900;
color: #001f3f;
}
.heart{
color:#FBF9FF;
background-image: url("../img/hart4.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
}
.heart:hoover{
color: #FFA07A;
background-color: grey;
}
#uitleg p {
color: #FA8072;
}
#logo img {
float: left;
width: 60px;
height: 60px;
margin-left: 2%;
}
#logo h1 {
position: relative;
top: 15px;
left: 10px;
}
#klik_ {
text-align: center;
}
article p {
height: 200px;
width: 450px;
font-size: 10pt;
color: grey;
font-weight: bold;
overflow: scroll;
margin-left: 4%;
margin-bottom: 5%;
text-align: justify;
text-justify: inter-word;
}
#buffer{
clear: both;
height: 10%;
}
#stappen{
font-weight: bold;
font-size: 10pt;
}
.auto_menu {
position: relative;
margin: 5px auto;
width: 160px;
font-size: 14px;
}
/*OVER ONS OVERLAY*/
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
EDIT: Web Inspector Shows:
Screenshot showing findings
So I think it might be:
margin-bottom: 5%;
when I deleted this, nothing happened..
You defined the height of your p. That means that your element will always stay at the height of 200px, no matter the content inside the element.
In order to change that to a dynamic height change it to:
display: inline-block;
height: auto;
The code is pretty straight forward, you display what is within the block. The height is automatically adjusted depending on the inline of that block.
Related
I need to make a simple CSS website. But I have a problem with my fixed footer. It falls over my buttons. I have tried making it an inline-block element. Then it stays right under the buttons. But when I resize the page it goes over my brandstory class. Is there any way to fix this problem? I'm new to CSS.
.main-navigation li{
display: inline-block;
margin: 0.1% 1%;
padding: 0%;
}
a{
color: white;
text-decoration: none;
}
.current{
text-decoration: underline;
}
.brandstory{
position: absolute;
margin-right: 25%;
height: 500px;
}
img{
width: 25%;
margin-left: 75%;
display: block;
}
.item-of-the-month{
color: black;
}
.text-block{
margin-left: 75%;
border: 1px solid black;
margin-top: 0%;
padding-top: 1%;
padding-bottom: 1%;
background: white;
text-align: center;
}
.buttons{
margin-left: 75%;
}
.button{
background-color: #000;
border: 1px solid red;
margin-top: -1.2%;
padding: 1%;
color: white;
font-family: Georgia,Times,Times New Roman,serif;
text-align: center;
text-decoration: none;
display: block;
}
.ForwardFashion{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ForwardFashion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>ForwardFashion</h1>
</div>
<div class="main-navigation">
<li><h3>Home</h3></li>
<li><h3>Interviews</h3></li>
<li><h3>Webshop</h3></li>
</div>
<div class="brandstory">
<p>ForwardFashion is sinds 2018 de place to be, als het gaat om upcoming fashionhypes. ForwardFashion biedt naast fashionnieuws ook de allerhipste fashionitems aan. Daarnaast interviewen designers en influencers met een forward-kijk op fashion. ForwardFashion is niet voor niets Forward. Waar andere fashionsites in het verleden blijven hangen, kijken wij verder. Wij schuwen niet voor mode met technologie. Dat zou jij ook niet moeten doen! Dus waar wacht je op, kijk rond in onze webshop, ga lekker zitten voor een interview en blijf op de hoogte in ForwardFashionland.</p>
</div>
<div class="container">
<img src="images/glassboots.jpg">
<div class="text-block">
<h4>Item of the Month</h4>
</div>
</div>
<div class="buttons">
Instagram
Youtube
Pinterest
Twitter
</div>
<footer class="ForwardFashion">
<p>© ForwardFashion</p>
</footer>
</body>
</html>
One thing you need to consider when you are making your footer fixed is, you have to leave some space in <body> element so that the fixed footer gets some space to avoid it overlapping the content part. Try this code
body {
padding-bottom: 100px;
}
How to put the line <hr> about 15 px above the bottom of the text block somewhere between button and bottom textblock?
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Why not simply border on text that you can easily control with padding:
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
p.space {
border-bottom:1px solid #000;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
</div>
And if you want to control the width of the line you can consider a linear-gradient trick (or pseudo-element):
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
p.space {
background:linear-gradient(to bottom,transparent calc(100% - 1px),#000 0) 0 0/50% 100% no-repeat;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
</div>
I accidentally put my footer in my main tag (but my page displayed correctly) and saw this so I corrected it. But when I did that my footer displayed somewhere in the mid between my header and my main... It's a really important project for school and tomorrow is the deadline if anyone could help me with this because I have been looking for hours and can't seem to find what I did wrong and it's driving me crazy! Any help is so so appreciated!
This is the link to the site
html{
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
}
*, *:before, *:after{
box-sizing: inherit;
}
#font-face {
font-family: 'Fira Sans';
src: url(../assets/fonts/FiraSans-Regular.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Light';
src: url(../assets/fonts/FiraSans-Light.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Heavy';
src: url(../assets/fonts/FiraSans-Heavy.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Extra Bold';
src: url(../assets/fonts/FiraSans-ExtraBold.otf) format('opentype');
}
#font-face {
font-family: 'Moon';
src: url(../assets/fonts/Moon-Light.otf) format('opentype');
}
.bg-header{
background-image: url(../assets/img/paintdrop-test-01-01.svg);
height: 77.5rem;
width: 128.6rem;;
background-repeat: no-repeat;
background-position: top ;
margin: 0 auto;
}
.container-header{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
nav{
display: flex;
justify-content: center;
padding: 4rem 0rem;
}
nav ul{
display: flex;
justify-content: space-between;
width: 50%;
}
nav ul li{
list-style: none;
display: inline;
}
a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
.link:hover /*, a:not([class="button-wit"])*/{
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
transition: all .2s ease-in-out;
}
.title{
display: flex;
background-image: url(../assets/img/blue-monday-title.svg);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 50rem;
}
h1{
font-size: 13.5rem;
text-transform: uppercase;
font-family: 'Fira Sans Heavy';
}
.hide{
display: none;
}
.intro{
font-size: 2rem;
letter-spacing: .15rem;
line-height: 1.5;
width: 45%;
margin-left: 37rem;
margin-top: -22rem;
font-family: 'Fira Sans Light';
}
.btn-class{
display: flex;
justify-content: center;
transition: all 1s ease-in-out;
}
.button-blue{
margin: 10rem 0rem 5rem 10rem;
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}
.button-blue:hover{
transform: scale(1.1);
}
main{
margin-top: 7rem;
}
h2{
font-family: 'Fira Sans Extra Bold';
letter-spacing: .18rem;
font-size: 6.5rem;
}
/* .bg-main-small{
background-image: url(../assets/img/splash-drop-small-01.svg);
height: 40rem;
width: 40rem;
background-position: left;
background-repeat: no-repeat;
position: absolute;
margin-left: 5rem;
} */
.bg-main-big{
background-image: url(../assets/img/splash-drop-02-01.svg);
height: 82rem;
width: 300rem;
background-position: right;
background-repeat: no-repeat;
position: absolute;
right: 0;
}
.container-main{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.article-1{
display: flex;
flex-direction: column;
margin-top: 30rem;
margin-left: 5rem;
}
.article-text{
margin-top: 2rem;
font-family: "Fira Sans Light";
font-size: 2rem;
letter-spacing: .1rem;
line-height: 3.2rem;
width: 50%;
}
.bg-flow{
margin-top: 5rem;
background-image: url(../assets/img/flow_1.svg);
height: 120rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
.article-2{
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 45rem;
}
.mid{
text-align: center;
width: 70%;
}
.button-wit{
color: white;
border-radius: 1.5rem;
margin-top: 5rem;
border: .1rem solid white;
}
.button-wit:hover{
background-color: white;
color: #005c97;
}
.article-3{
display: flex;
margin-top: 45rem;
}
.blue-moonday-text{
display: flex;
flex-direction: column;
padding-left: 5rem;
}
.right{
width: 100%;
}
.footer-img{
background-image: url(../assets/img/footer-splashes-01.svg);
background-repeat: no-repeat;
height: 30rem;
width: 100%;
position: absolute;
}
.container-footer{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
position: relative;
padding-top: 25rem;
}
footer li{
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media{
padding-top: 5rem;
display: flex;
justify-content: space-between;
}
.color{
background-image: url(../assets/img/COLOR.svg);
background-repeat: no-repeat;
width: 100%;
height: 30rem;
margin-top: 10rem;
animation-name: fadeInLeft;
animation-duration: 2s;
}
#keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-5%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.button-discover{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blue Monday</title>
<link rel="icon" href="./assets/img/devine.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> -->
</head>
<body>
<header>
<div class="bg-header">
<div class="container-header">
<h1 class="hide">Blue Monday</h1>
<nav>
<ul>
<li>home</li>
<li>activiteiten</li>
<li>extra </li>
</ul>
</nav>
<div class="title"></div>
<p class="intro">Het is ondertussen geen geheim meer. Maandagen zijn echt kutdagen. Maar als je er dan eentje moet uitkiezen die de ergste is, dan is het wel deze. </p>
</div>
<div class="btn-class">
Discover more
</div>
</div>
</header>
<main>
<!-- <div class="bg-main-small"></div> -->
<div class="bg-main-big" id="blok1"></div>
<div class="container-main">
<article class="article-1">
<h2>Feeling blue.</h2>
<p class="article-text">Het is amper 2 weken na het nieuwe jaar. Het jaar dat JOUW jaar ging worden... <br> Alleen zijn al je goede voornemens al mislukt, de vakantie lijkt nog mijlenver en bovendien maakt dit weer het geen haar beter. “To feel blue” betekent letterlijk
je rot of triestig voelen en dat is dan ook het gevoel dat je met nog veel andere mensen deelt.</p>
</article>
</div>
<div class="bg-flow">
<div class="container-main">
<article class="article-2">
<h2>Je bent niet alleen.</h2>
<p class="article-text mid">Je staat er niet alleen voor. Iedereen heeft last van deze dag. Elk jaar opnieuw is blue monday de meest depressieve dag ter wereld. Maar wij zullen proberen om blue monday wat meer kleur te geven!</p>
<br>
<span> activiteiten </span>
</article>
<article class="article-3">
<img src="./assets/img/moon-with-holes.svg" alt="Blue Moonday" width="500" height="500" class="blue-moon">
<div class="blue-moonday-text">
<h2>Blue Moonday.</h2>
<p class="article-text right">Voor degene die niet genoeg hebben aan deze tips: er is meer. Denk je dat de sky the limit is? Het kan verder. Veel verder. Zo ver dat je even een tripje naar de maan kan maken op deze dag waardoor je simpelweg blue monday kan overslaan! Laat
deze mensen maar afzien op deze kutdag op aarde, jij bent even gaan viben in space.</p>
</div>
</article>
</div>
</div>
</main>
<footer>
<div class="footer-img"></div>
<div class="container-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Devine</li>
</ul>
<div class="social-media">
<img src="./assets/img/devine.png" alt="devine" width=50 height=50>
<img src="./assets/img/facebook.png" alt="facebook" width=50 height=50>
<img src="./assets/img/twitter.png" alt="twitter" width=50 height=50>
</div>
</div>
</footer>
</body>
</html>
It actually is not between your header and main, but after your main. The problem is that your main is not expanding because .bg-flow is position: absolute thus is ignored by your main. You also set your .bg-flow to a fixed height which makes it not expanding. If you download Firefox and use "Inspect element" you can see the borders of your elements which will probably help you a lot.
It look like the footer is not by default at the bottom of the page.
You can try this:
footer style='position:fixed;bottom:0px;'
The text inside my divs goes over to the next image, from my image horizontal scroll. I want each text inside each image but I am trying everything and nothing works!
The overlapping text is caused by the white-space: nowrap; on the .list-inline selector. So lets add white-space: normal; to the .DocumentList p selector to fix this.
Here is the full updated CSS:
.factorSection{
display:none;
}
#section2-05{
padding-right:0;
padding-left: 10px;
padding-bottom:0;
}
#section2-05 h2{
color: #424242;
font-weight:900;
font-size: 1.7em;
line-height: 1.2em;
margin-bottom: 0;
}
#section2-05 .col-lg-12 p{
font-size: 1.2em;
line-height: 1.4em;
margin-bottom:1em;
}
.section2-05_phone{
display:block;
overflow-x: scroll;
width: auto;
white-space: nowrap;
}
.documentList{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.factorImgText{
position:absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
text-align: center;
width:90%;
}
.factorImg1, .factorImg2, .factorImg3, .factorImg4{
position: relative;
display: inline-block;
margin: 8px 8px;
box-shadow: 2px 2px 4px #bbb;
border-top-right-radius: 4px;
width: 320px;
height: 100%;
vertical-align: bottom;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height:370px;
}
.factorImg1{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg2{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg3{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.factorImg4{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.list-inline {
white-space:nowrap;
}
.DocumentList h6, .DocumentList p{
color:#fff;
font-weight:900;
}
.DocumentList h6{
font-size: 1em;
text-align: center;
width: 100%; /* Changed from 90% --> 100% to help center. */
margin: 0; /* Added to help center. */
}
.DocumentList p{
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
white-space: normal; /* Add to fix the overlapping text. */
}
<div class="row row-fluid section2-05_phone">
<div class="DocumentList col-lg-12">
<ul class="list-inline">
<li class="factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</li>
<li class="factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</li>
<li class="factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</li>
<li class="factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</li>
</ul>
</div>
</div>
You can view the issue here:
http://www.callensewout2011.dreamhosters.com/results.php?q=frankrijk
Who knows how to fix this?
<div id="result-wrapper">
<a href="article.php?articleId=173&q=frankrijk">
<div class="tile" id="tile1">
<div class="tileTextEmpty">
<img src="img/logos/hbvl.png" alt="Logo van Het Belang Van Limburg">
</div>
<div class="tileText">
<h4>Vliegtuig Hollande getroffen door bliksem </h4>
<p>De kersverse nieuwe Franse president François Hollande heeft dinsdag voor het eerst de Duitse kanselier Angela Merkel ontmoet. Hollande moest zijn reis naar Duitsland wel even...</p>
</div>
</div>
</a>
</div>
#result-wrapper {
-webkit-column-width: 340px;
-webkit-column-gap: 0px;
height: 649px;
width: 1024px;
overflow-y: auto;
background-color:
black;
}
.tile {
height: 325px;
background-position: center top;
background-repeat: no-repeat;
background-size: 340px;
background-color:
black;
}
.tileTextEmpty {
width: inherit;
height: 155px;
text-align: left;
}
.tileText {
height: 135px;
padding: 10px;
background-color: black;
opacity: .8;
color: #EAEAEA;
text-align: left;
}
there is a hbox module. it may helps:
http://ajaxian.com/archives/css-3-flexible-box-model
Why dont you position the content using display:inline-block or using float:left till the end of the container.
If you don't know how to use display:inline-block see this for your reference
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/