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/
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>
Code: https://jsfiddle.net/z4udfg3o/
I want the divs "caixa" to be centered in the div "produtos". I was able to do it with exact values using margin-left. But I want it to be responsive for other screen sizes so I putted margin-left and margin-right as auto.
Image of desired format:
section {
padding: 2em 0;
display: flex;
justify-content: space-between;
background: antiquewhite;
}
section:before, section:after {
content: "";
}
div {
width: 10em;
height: 10em;
background: silver;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
Use this CSS:
.produtos {
width: 100%;
background: gray;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.caixa {
width: 27.1%;
height: 250px;
background: darksalmon;
border: 1px solid #000;
float: left;
margin: 0 3%;
}
Like This?
.produtos {
width: 100%;
height: 252px;
background: gray;
text-align: center;
}
.caixa {
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
margin: 0 auto;
}
<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div>
<div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div>
<div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>
Otherwise, i suggest you to have a look at flexbox
Do it like below:
#wrap {
background: #e7e7e7;
padding: 4px;
text-align: center;
width:100%;
}
#one, #two, #three {
background: #ccc;
display: inline-block;
padding: 20px;
width:20%;
}
<div id="wrap">
<div id="one">I am div 1</div>
<div id="two">I am div 2</div>
<div id="three">I am div 2</div>
</div>
try changing your css like below
.produtos
{
width: 100%;
height: 252px;
background: gray;
text-align: center;
}
.caixa
{
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
display: inline-block;
}
The following code sets the orange boxes as display: inline-block which causes them to follow the text flow, which is set to center in the parent container. This allows the boxes to flow depending on available screen space. On wide screens they're all side by side, on smaller ones they're arranged vertically.
I have also modified the HTML in order to get rid of newlines between the boxes. These newlines would cause margins otherwise.
.produtos
{
width: 100%;
background: gray;
text-align: center;
}
.caixa
{
vertical-align: top;
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
display: inline-block;
}
<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div
><div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div
><div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>
I hope it works for you. I added each div class row for each to so you can set the padding in classemphasized text row.
.produtos
{
width: 100%;
height: 252px;
}
.caixa
{
width: 33%;
height: 100%;
background: darksalmon;
border:1px solid red;
float: left;
}
.row{
height:100%;
padding:0 20px;
}
<div class="produtos">
<div class="caixa">
<div class="row">
<img src="imagens/croa.png">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div>
</div>
<div class="caixa">
<div class="row">
<img src="imagens/dinheiro.png">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div> </div>
<div class="caixa">
<div class="row">
<img href="#" src="imagens/definicoes.png">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div> </div>
</div>
There are different ways, but if the boxes are to contain an image or something, then you will need a fixed aspect ratio, that can be accomplished like this:
.wrapper{float:left; width:100%; background-color:deeppink;}
.lil-box{float:left; width:22%; margin:0 5.665%; background-color:bisque;}
.tight-fit{float:left; width:100%; margin-top:100%;}
<div class="wrapper">
<div class="lil-box">
<div class="tight-fit"></div>
</div>
<div class="lil-box">
<div class="tight-fit"></div>
</div>
<div class="lil-box">
<div class="tight-fit"></div>
</div>
</div>
you should balance the width of both divs. "caixa" and "produtos".
I think using % will be responsive for other screeen size too.
Fiddle
Hope Fiddle link help you .
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.
First of all, I'm new to HTML and CSS so please be kind with me!:)
So, for a school assignment I need to replicate the IKEA website. I'm having a problem where a menu drops down about 150px
What it needs to be:
What I got:
The part in the blue box needs to go where the arrow points.
The code I got:
HTML:
<header>
<h1>
<a href="index.html">
<img src="logo.gif" alt="IKEA" title="Klik hier om terug te gaan naar de hoofdpagine" />
</a>
</h1>
<div id="login">
<p>Welkom bij IKEA België! <a href="#">Log in<a> of <a href="#">maak een profiel aan<a></p>
</div>
<div id="headerlinkswrapper">
<div class = "headertaal">
NL
FR
</div>
<div class = "headerlijst1">
Winkel informatie
IKEA FAMILY
Mijn boodschappenlijs
</div>
<div class = "headerlijst2">
Startpagina
Mijn profiel
Jobs#IKEA
</div>
<div class = "headeranna">
Vraag het aan Anna"
Vraag het aan Anna
</div>
</div>
<nav id="hoofdmenu">
<ul>
<li>Alle producten</li>
<li>Nieuw</li>
<li>Promoties</li>
<li>Inspiratie</li>
<li>Plannen</li>
<li>Praktische info</li>
<li>3D Keukenplanner</li>
<li>Alle afdelingen</li>
</ul>
</nav>
</header>
CSS:
#wrapper {
background-color: white;
width: 900px;
margin: auto;
}
#wrapper > header {
height: 200px;
}
#wrapper > header {
position: relative;
}
#wrapper > header h1 {
position: relative;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
}
#login {
position:relative;
margin-left: 10px;
}
#hoofdmenu ul li {
display: inline-block;
margin-top: 10px auto;
margin-left: 0;
margin-right: 0;
float: inherit;
}
#headerlinkswrapper {
position: absolute;
width: 400px;
margin-left:450px;
margin-right: 10px;
float:right;
}
You were almost there.
#headerlinkswrapper {
margin-top: -140px; /* I'm estimating distance, change this! */
}