For some reason my footer is appearing in the middle of my screen in between all of my content. I have the exact code for my footer on other pages and it works fine there. Does anyone have any idea why?
I already tried a lot on the internet, but the footer just will not stay in the right place.
.footer {
width: 100%;
height: 30vh;
background-color: #bbbbbb;
}
.footer button {
background-color: #dddddd;
border: 0.15vw solid #999;
border-radius: 0.3vw;
text-align: center;
padding: 0.25vw 0.5vw;
font-size: 1.5vw;
}
.footer p {
padding-top: 2vw;
text-align: center;
}
.footer ul {
padding-left: 0;
text-align: center;
list-style: none;
}
<link href="https://fonts.cdnfonts.com/css/handel-gothic-d" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<header>
<nav>
<!--navigation menu-->
Home
Making off
<!--different links-->
Plot
Characters
Credits
</nav>
</header>
<div class="wallpaper">
<p class="wallpaper-text">WALL•E</p>
</div>
<article id="homepage-intro">
<h1><strong> Wall-E Fan page </strong></h1>
<p>
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
</p>
</article>
<article class="page-content-index">
<h3>Making off</h3>
<p>
Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
</p>
<p>
Go to:
<button onclick="window.location.href='making_off.html';" id="Home-page-button">
Making off
</button>
</p>
<h3>Plot</h3>
<p>
Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
</p>
<p>
Go to:
<button onclick="window.location.href='plot.html';" id="Home-page-button">
Plot
</button>
</p>
<h3>Characters</h3>
<p>
Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
</p>
<p>
Go to:
<button onclick="window.location.href='characters.html';" id="Home-page-button">
Characters
</button>
</p>
<h3>Credits</h3>
<p>
Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
</p>
<p>
Go to:
<button onclick="window.location.href='credits.html';" id="Home-page-button">
Credits
</button>
</p>
</article>
<aside id="Fun-fact">
<h2><b>Fun facts</b></h2>
<ul>
<li>
Wall-E, the name of the main character of the movie, stands for Waste Allocation Load Lifter: Earth class.
</li>
<li>
Wall-E was the first instance of Pixar using live-action to create a feature-length film.
</li>
<li>
At the 20 minute mark, a pizza delivery truck which also appeared in Toy Story can be spotted.
</li>
<li>
To learn about pure visual storytelling, Andrew Stanton, the director of Wall-E, watched every single movie of Charlie Chaplin.
</li>
<li>
The font used for the navigation bar at the top of this page is the same font that was used in the Wall-E posters.
</li>
</ul>
<p>
<i> Source: </i>
<a href="https://m.imdb.com/title/tt0910970/trivia/?ref_=tt_ql_trv">
Imdb.com</a
>
</p>
</aside>
<footer class="footer">
<p>
Next page:
<button onclick="window.location.href='plot.html';">Plot</button
><br /><br />Made by:
</p>
<ul>
<li>Bart de Roos</li>
<li>Quinten Nijsen</li>
<li>Walter Hooijmans</li>
</ul>
</footer>
Adding height: 30vh on the footer tag along with background-color: #bbbbbb is telling your website that you want that background color to only take up 30% of its container space.
Lets add an actual container inside your footer and use padding instead of height to give it space.
Hope this helps!
.footer .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #bbbbbb;
padding: 2rem;
}
<footer class="footer">
<div class="container">
<p>
Next page:
<button onclick="window.location.href='plot.html';">Plot</button
><br /><br />Made by:
</p>
<ul>
<li>Bart de Roos</li>
<li>Quinten Nijsen</li>
<li>Walter Hooijmans</li>
</ul>
</div>
</footer>
Related
This is what it looks like, and the arrow kind of shows where I wish for the image to be.
my html code
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
<img src="images/emilybillede.jpg" alt="">
my css code
.underline {
text-decoration: underline;
}
.box2 img{
position: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p {
width: 300px;
}
I tried float as well but that takes it out of the padding.
I also tried vertical align
You could achieve it in several ways, using float, flex or position for example.
Here an example with float
.underline {
text-decoration: underline;
clear: both;
}
.box2 img {
float: right;
}
.box2 {
width: 100%;
}
p {
width: 300px;
float: left;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
<img src="https://www.filterforge.com/more/help/images/size200.jpg" alt="">
</section>
With floats the document order must be reversed. If you don't like that, consider using flexbox instead, with the paragraph and the image being children in a flex row.
Here are both options demonstrated.
.underline {
text-decoration: underline;
}
.box2 img {
width: 200px;
height: 200px;
margin-left: 10px;
}
img.float-right {
float: right;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p.sized {
width: 300px;
}
.flex-row {
display: flex;
}
.flex-row p:first-child {
margin-top: 0;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<img src="https://via.placeholder.com/200" alt="" class="float-right">
<p class="sized">Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
</section>
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<div class="flex-row">
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig,
held og lykke med jeres mange fremtide projekter!</p>
<img src="https://via.placeholder.com/200" alt="">
</div>
</section>
You can use the (flexbox) on the parent of the childrens then use (justify-content: space between), like the example below:
.underline {
text-decoration: underline;
}
.box2 img {
position: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
display:flex;
justify-content: space-between;
}
p {
width: 300px;
}
<section class="box2">
<div>
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
</div>
<img src="https://via.placeholder.com/200" alt="">
</section>
Use float, not position. Use this CSS. I hope it will help you.
.underline {
text-decoration: underline;
}
.box2 img {
float: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p {
width: 300px;
float: left;
}
.underline {
text-decoration: underline;
grid-column: 1/3;
grid-row: 1/2;
}
.box2 img {
width: 200px;
height: 200px;
grid-column: 2/3;
grid-row: 2/3;
}
.box2 {
margin: 20px 20%;
background-color: rgb(255, 255, 255);
padding: 15px;
display: grid;
grid-template-columns: min(1fr, 300px) 1fr;
grid-template-rows: min-content min-content;
gap: 15px;
box-shadow: 0 0 100px rgba(0, 0, 0, .1);
}
p {
text-indent: 2em;
margin: 0;
grid-column: 1/2;
grid-row: 2/3;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
<img src="https://via.placeholder.com/100" alt="">
</section>
All I had to do was move my img above the p, example:
so instead of this:
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
<img src="images/emilybillede.jpg" alt="">
It had to look like this:
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<img src="images/emilybillede.jpg" alt="">
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
I want to make a list of fish with their respective descriptions aligned with their image. As you can see, "Saumon" is roughly aligned with it's image, but "Truite" isn't at all, so much that it's with a wrong image. How can I align it correctly with all window sizes? Thank you in advance.
Here is my code
<img class="imgfish" src="/images/saumon.png" alt="Saumon" />
<h3 class="titlefish">Saumon</h3>
<p>
Le saumon est un poisson gras à la chair rosée, de la même famille que la
truite ou l'omble. Il nait et se reproduit en eau douce, mais vit dans
l'océan. Il existe plus de 60 sortes de saumon et il a été le poisson le
plus consommé sur terre depuis la préhistoire.
</p>
<img class="imgfish" src="/images/truite.png" alt="Saumon" />
<h3 class="titlefish">Truite</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
CSS
.imgfish {
float: left;
clear: left;
width: 400px;
padding-top: 0rem;
border-radius: 15px;
max-width: 40vw;
margin: 30px;
}
.titlefish {
margin-bottom: 1rem;
}
And here are the results
As I mention in the comment you need to use "grid layout".
body{
display: flex;
justify-content: center;
align-items: center;
}
#container {
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"a b"
"c d"
"e f";
row-gap: 5px;
width: 80%;
height: 100%;
}
img{
max-width: 400px;
max-height: 400px;
}
#container:nth-child(1){
/*First Image*/
grid-area: a;
}
#container:nth-child(2){
/*Description of first image*/
grid-area: b;
}
<div id="container">
<img class="imgfish" src="https://images.unsplash.com/photo-1633885096653-53ea6830e77a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Saumon</h3>
<p>
Le saumon est un poisson gras à la chair rosée, de la même famille que la
truite ou l'omble. Il nait et se reproduit en eau douce, mais vit dans
l'océan. Il existe plus de 60 sortes de saumon et il a été le poisson le
plus consommé sur terre depuis la préhistoire.
</p>
</div>
<img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Truite</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
</div>
<img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Something else</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
</div>
You should post your code to have a specific answer.
You could put the image and its description within the same parent div, you could use a table, etc. It depends on your current code.
I have tried to put in table-cell, table, inline-block, inline, but nothing works. Do any of you know what and where should I put in to make the div that has the text inside it to be vertical-align = middle?
.div1b {
width: 100%;
background-color: white;
height: 100vh;
}
.div2 {
width: 90%;
overflow: hidden;
}
.div6 {
width: 90%;
margin-left: 10%;
float: left;
}
.div8b {
width: calc(100% - 20px);
background-color: white;
padding: 10px;
border-radius: 2px;
}
.text5 {
color: black;
text-align: left;
margin: 0px;
line-height: 1.5;
}
<div id="BIO" class="div1b">
<div class="div2">
<div class="div6">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
</div>
</div>
using display:table with vertical-align = middle.
.div1b {
width: 96%;
background-color: white;
height: 100vh;
padding: 0 2%;
display: table;
}
.div8b {
display: table-cell;
vertical-align: middle;
}
<div id="BIO" class="div1b">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
using display:flex with vertical-align = middle.
.div1b {
width: 96%;
background-color: white;
height: 100vh;
padding: 0 2%;
display: flex;
}
.div8b {
margin: auto;
}
<div id="BIO" class="div1b">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
My goal is to have the two Pictures side by side with its text beneath it, as described here.
The HTML cannot be changed.
I tried a bunch of things, like margin, display and float, nothing has yet done the trick.
What I have so far :
/*stildeklarationer för rubriker */
body {
margin-bottom: 496px !important;
}
h1 {
font-size: 30px;
letter-spacing: 4px;
color: blue;
font-family: helvetica;
font-weight: normal;
margin: auto;
border: 2px;
text-align: center;
border-style: solid;
border-color: #000000
}
h2 {
font-size: 20px;
letter-spacing: 4px;
color: #000000;
font-family: helvetica;
font-weight: normal;
}
/*stildeklarationer för bilder */
img {
float: left;
max-width: 260px;
max-height: 480px;
position: relative;
}
/*stildeklarationer för all text */
p {
width: 50%;
font-family: Verdana;
color: #CCC;
font-size: 13px;
line-height: 20px;
text-align: justify;
background-color: white;
color: black;
border-style: solid;
border-color: #000000
}
article section footer {
float: left;
clear: both;
font-family: Verdana;
color: #CCC;
font-size: 10px;
line-height: 16px;
text-align: justify;
}
footer {
clear: both;
overflow: auto;
font-family: Verdana;
color: #CCC;
font-size: 12px;
line-height: 16px;
text-align: center;
}
#wrapper {
width: 900px;
margin: 0 auto;
/*centrerar*/
position: relative;
}
<div id="wrapper">
<header>
<h1>Smakprov ur studieguiden för webbutveckling 2</h1>
</header>
<article>
<section>
<header>
<h2>Om CSS</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/W6GqEQ" alt="css3">
<p>Vad CSS kan användas till har vi lärt oss i föregående kurs men vi kommer arbeta vidare med stilmallar i denna studieguide eftersom det är ett sätt att styra utseendet på hemsidan som ska användas. Inga hemsidor görs idag utan att använda just stilmallar
och allt eftersom nya versioner av CSS släpps så förbättras möjligheterna och utbudet av funktioner som erbjuds.</p>
<p>Den senaste versionen av CSS är då CSS3 och för att vi fullt ut ska kunna utnyttja denna version ska vi alltså använda HTML5. Glöm dock inte att webbdesign utvecklas hela tiden och det som är sanning idag behöver inte vara sanning imorgon</p>
<p class="linktext">Här är ett youtube-klipp om CSS</p>
<footer>Skrivet av Oscar Antbring den 12 juni 2013</footer>
</section>
<section>
<header>
<h2>Om märkspråk</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/U7tltv" alt="html5">
<p>Märkspråk – eller markup language – är ett sätt att med hjälp av olika textkoder ge direktiv till ett program (i vårt fall då en webbläsare) hur ett dokument ska presenteras och vilka funktioner som ska finnas. Som vi kommer ihåg från första kursen
så finns flera olika sådana textkoder att använda – eller taggar som vi ofta kallar dem för. Det kan vara en tagg för att berätta för webbläsaren att vi vill presentera en hyperlänk, eller att vi ska presentera en bild exempelvis. Naturligtvis
måste webbläsaren veta vad de olika koderna – eller taggarna – betyder. Det är därför som olika märkspråk (och versioner) finns och från föregående kurs kommer vi ihåg HTML 4.01 samt XHTML. Vilket märkspråk som används ska vi specificera i dokumentet
så att webbläsaren vet vilka taggar som kan användas och vad de betyder</p>
<p>När vi skapar en hemsida så specificerar vi en så kallad DOCTYPE som beskriver vilket typ av dokument som webbläsaren kan förvänta sig. Vi säger helt enkelt till webbläsaren – ”detta dokument är av typen HTML5, och då kan du förvänta dig dessa taggar
och struktur”. Naturligtvis måste webbläsaren ha stöd för HTML5 så att programmet vet vad som ska göras med taggarna och deras egenskaper.Det är därför det är så viktigt att vi validerar koden så att vår kod stämmer överens med vad webbläsaren
förväntar sig utifrån typen av dokument. Vi kommer återkomma till just validering av koden i sista modulen även om det redan tagits upp i första kursen – validera gärna kontinuerligt koden genom hela utvecklingsarbetet.</p>
<p class="linktext">Här är en svensk artikel som beskriver HTML5</p>
<footer>Skrivet av Oscar Antbring den 11 juni 2013</footer>
</section>
</article>
<footer>©Hermods</footer>
</div>
If you want the blocks to be side-by-side you could try the following:
section {
float: left;
width: 50%;
}
I've been trying hard for the past hours to switch from the left column to the right one. I mean, I'm trying to center vertically the text div inside the grey div.
I would love to get some of your help. I've read a lot of tutorials and forum answer but didn't get the expected result yet.
Any advice is more than welcome :)
HTML Code :
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>
You could use the inner div as a table-cell, then vertical-align works on it.
I also improved your HTML, instead of using two line breaks, it's better to use paragraphs or margin.
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<p>Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.</p>
<p>Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<p>Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.</p>
<p>Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<p>Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.</p>
<p>Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
</div>
</div>
</div>
.box-key-message {
height: 240px;
background-color: #eeeeee;
border-radius: 10px;
margin-bottom: 2em;
display: table;
}
.box-key-message div {
display: table-cell;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
DEMO
Just use display: table; table-layout: fixed; for the parent div and display: table-cell; vertical-align: middle; for every child. See how it works below. You probably also will need to specify width: 100% to both of them.
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
display: table;
table-layout: fixed;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>
You can use display: table; width:100%; on .box-key-message, and display: table-cell on the div within it in. You want to use the table css hack because tables support vertical-align: middle while regular divs do not.
HTML:
<div class="row">
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<p><strong> Gratuit</strong></p>
<p>Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.</p>
<p>Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Simple et Rapide</strong></p>
<p>Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.</p>
<p>Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Sans engagement</strong></p>
<p>Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.</p>
<p>Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Et pour payer l’étudiant ?</strong></p>
<p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
</div>
</div>
</div>
</div>
CSS:
.box-key-message{
height: 240px;
display:table;
background-color: #eeeeee;
border-radius: 10px;
margin-bottom: 20px;
width: 100%;
}
.box-key-message div {
display:table-cell;
vertical-align: middle;
padding: 20px;
text-align: justify;
}
.box-key-message strong {
font-size:16px;
color: #D5420F;
}
As a sidenote, you overused break tags a little too much. You can get the spacing you want for the content inside the .box-key-message divs by using paragraph tags around your content. To separate out the box-key-message blocks so they won't touch each other, you can add a margin-bottom: 20px; (or whatever spacing you prefer) to .box-key-message in your css.
See this codepen for an example.