I am pretty new to everything and is trying to achieve header, 2 boxes with different width and a footer. Everything all together but I need to make so when content in the box is changed the height always stay the same.
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
I want to achive the look like this photo i attach here:
enter image description here
What it looks like now:
enter image description here
`
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie zombies ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>
`
My CSS:
`
#font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}
`
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
Perhaps this simple Flexbox layout might help as a starting point? According to the desired layout image it seems to replicate that quite closely. The nav element seemed to contain content that did not really constitute navigation so that was removed but could easily be slotted into the LHS section or header?
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
width: 80%;
height: 100vh;
margin: 0 auto;
}
header,main,footer,main>section {
display: flex;
margin: 0;
border: 1px solid rgba(133, 133, 133, 0.5);
}
header {
flex: 2;
order: 1;
align-items: center;
justify-content: center;
}
main {
flex: 10;
order: 2;
}
footer {
flex: 1;
order: 3;
align-items: center;
justify-content: center;
}
main>section:nth-of-type(1) {
flex: 10;
order: 1;
}
main>section:nth-of-type(2) {
flex: 4;
order: 2;
}
/* ONLY for visually identifying elements */
header {
background: azure
}
main {
background: yellow
}
footer {
background: pink
}
main>section:nth-of-type(1) {
background: rgba(0, 255, 0, 0.25);
}
main>section:nth-of-type(2) {
background: rgba(255, 0, 0, 0.25);
}
<div id='wrapper'>
<header>#header#</header>
<main>
<section>#LHS-Large#</section>
<section>#RHS-Small#</section>
</main>
<footer>#footer#</footer>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 6 months ago.
I can't manage to get my text to vertical align to the center of a div. I tried so simplify the problem as much as I could but it still doesn't work.
I tried with display:table but I need flexbox so that my columns are the right width and it didn't work either anyway. Removing elements one by one didn't bring me to the answer...
Edit: there is no span so it's not a problem of the last element being inline.
.row {
display: flex;
align-items: center;
margin-left: 44px;
margin-right: 44px;
margin-top: 10px;
}
.column_left {
flex: 28%;
}
.column_right {
flex: 72%;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
Edit:
Removing the parent div to give both classes row and exercise_list to the child almost work, but I lose the margin to the left and the text is too close to the edge of the rectangle.
Take a look in the code:
.row {
display: flex;
align-items: space-arround;
width:100%;
}
.column_left {
padding-left:44px;
flex:1;
}
.column_right {
flex:2;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
width:100%;
display:flex;
align-items:center;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
add display:flex; to your .exercise_list elements
Try adding display: flex to .exercise_list. It should be the containing element that dictates child element alignment.
The margin on .row is confusing the spacing too so I would remove margin-top: 10px from .row and add that to .exercise_list.
I need to align those two columns horizontally but it seems that all the solutions I've find are not working for me. The column on the right side will always be below the column in the left side. How can I solve it?
article {
margin: 0 auto;
padding-top: 80px!important;
padding-bottom: 10%!important;
width: 80%;
}
article:after {
content: '';
display: block;
clear: left;
margin: 0;
}
h2,
p {
float: left!important;
font-size: 1em;
font-weight: normal;
}
h2 {
text-align: start!important;
clear: left;
/*Move to new line*/
width: auto;
margin: auto;
}
p {
margin: 0 0 0 300px;
white-space: normal;
}
p+p {
margin-left: 300px;
clear: left;
}
h2+p {
text-align: start!important;
}
<article id="lyrics">
<h2>NEWS<br>
<br><br>31.08.2022</h2>
<p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>
just use flex on the <article> tag
article {
margin: 0 auto;
padding-top: 80px!important;
padding-bottom: 10%!important;
width: 80%;
display:flex;
justify-content:space-around;
align-items:start;
}
#news, #date{
display:block;
text-align:center;
margin:0;
}
h2,
p {
font-size: 1em;
font-weight: normal;
}
p {
margin: 0 0 0 300px;
white-space: normal;
}
<h2 id='news'>NEWS</h2>
<article id="lyrics">
<h2 id='date'>31.08.2022</h2>
<p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>
EDITED: Complete rehash.
The best way to display this imho is using display:table and table-cell as it aligns the columns. I've wrapped each element in a div with the class of 'container' which acts as a table row so we can put the title on the left and the lyrics on the right. The div with the class of title is the left hand column and the article section is the right hand column. This means you can have multiple paragraphs in the article.
Finally I've remmoved the white-space:pre as when writing this in an editor, the indenting is rendered on the browser. I've added br tags to provide new lines.
#lyrics {
display: table;
width: 600px;
background: #FFF;
font-size: 1em;
font-weight: normal;
}
.container {
display: table-row;
}
article,
.title {
display: table-cell;
padding: 0.5rem 0;
}
p {
margin: 0;
margin-bottom: 0.5rem;
}
<div id="lyrics">
<div class="container">
<div class="title">Frank:</div>
<article>
<p>My my my<br> My my my my my<br> My my my my<br> My my<br> I'm a wild and an untamed thing<br> I'm a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds
rock on<br> We're gonna shake it 'till the life has gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
</article>
</div>
<div class="container">
<div class="title">Chorus:</div>
<article>
<p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
<p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
gone, gone, gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
</article>
</div>
<div class="container">
<div class="title">Riff Raff:</div>
<article>
<p>Frank-N-Furter, it's all over<br> Your mission is a failure<br> Your lifestyle's too extreme<br> I'm your new commander<br> You now are my prisoner<br> We return to Transylvania<br> Prepare the transit beam</p>
</article>
</div>
</div>
I am trying to align the caption differently to the image but it is stuck with the image and I am unable to alter its features even though it has a separate id inside its element. The id='img-caption' does not seem to affect the 'caption' element.
HTML
<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
A tribute to Agha Sahib</h2>
<div id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'></img><caption id='img-caption'>Picture of Agha Hassan Abedi</caption>
</div>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>
CSS
#main {
background-color: #eee;
}
#title {
background-color: lightgray;
text-align: center;
width: 100%;
}
#img-div {
background-color: lightblue;
text-align:left;
}
#img-caption {
background-color: gray;
}
#img {
align: center;
max-width: 100%;
height: auto;
#position: absolute;
#center: 0px;
}
h1 {
color: gray;
font-family: Times New Roman;
text-align: center;
}
https://codepen.io/wajieraja/pen/gOaeGvm
The caption element is used inside a table. If you want to use it with an image, I suggest you to wrap your image inside a figure element and to add a figcaption element.
In your case it can't be something like this :
#main {
background-color: #eee;
font: calibri;
}
#title {
background-color: lightgray;
text-align: center;
width: 100%;
}
#img-div {
background-color: lightblue;
text-align:left;
}
#img-caption {
background-color: gray;
}
#img {
align: center;
max-width: 100%;
height: auto;
#position: absolute;
#center: 0px;
}
h1 {
color: gray;
font-family: Times New Roman;
text-align: center;
}
<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
A tribute to Agha Sahib</h2>
<figure id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'><figcaption id='img-caption'>Picture of Agha Hassan Abedi</figcaption>
</figure>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>
I changed the name of the element from caption to h3, perhaps the name was the issue but this change now allows me to write directions that now works. Thanks for the suggestions to use the figure element tag. Will try it out.
A few tiny problems have been torturing me for weeks. After many researches and many trials I still can't figure out what to do.
On my online resume, the desktop display if perfect. On mobile though, there are many inconsistencies with font and images sizes.
Link of the page: t.btmx.fr
Problems
If you have an idea what's wrong or if there's something I should learn that would be very helpful :)!
Thank you very much!
Below is the code as asked by Paulie_D. I'm sorry if it's so long I don't know what to remove :(. First you'll find the CSS for small screens using media queries, then the "normal" CSS and then the HTML.
#
media screen and(max - width: 1000px) {
header {
font - size: 1em;
}
p {
font - size: 0.8em;
}
#
contact_button {
font - size: 1em;
}
#
personal - info - and - topskills {
display: flex;
flex - direction: column;
}
#
containermain {
display: flex;
flex - direction: column;
}
.topitem: nth - child(2) {
max - width: 100 % ;
}
.subelementspecial /* floating logo | title */ {
display: flex;
flex - direction: column;
}
}
header {
border-radius: 0.5em;
background-color: #AFC600;
opacity: 0.7;
margin: auto;
margin-bottom: 4em;
padding-bottom: 0.1em;
padding-top: 0.1em;
font-size: 0.8em;
text-align: center;
max-width: 1920px;
}
.bg1 {
background: url("medias/background.jpg") no-repeat top center;
}
.bg2 {
background: #232A2A;
}
#main-wrapper {
width: 100%;
background-attachment: scroll;
background-size: contain;
font-family: "texgyrescholaregular", Verdana, Georgia, serif;
}
#personal-info-and-topskills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
padding: 2em;
}
.topitem {
border-radius: 0.5em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
}
.topitem h2 {
margin-bottom: 1.5em;
}
.topitem:nth-child(2) {
opacity: 0.9;
min-width: 300px;
background-color: #3D3D39;
border-radius: 0.5em;
/* padding : top right bottom left */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
max-width: 40em;
}
.topitem:nth-child(2) p {
color: white;
line-height: 2em;
}
.topitem:nth-child(2) strong {
color: #d8616f;
}
#contact_button {
background: #D3D699;
text-align: center;
color: black;
border-radius: 1em;
width: 40%;
margin: auto;
margin-bottom: 1em;
margin-top: 1em;
}
.topitem:nth-child(3) {
background: #C4D9D0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.topitem:nth-child(3) h2 {
color: black
}
#languages {
width: 100%;
}
.topitem:nth-child(4) {
background: #e0cece;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 350px;
}
.topitem:nth-child(4) h2 {
color: #b25960;
}
#containermain
/* contains experience, skills and education */
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: flex-start;
padding: 2em;
}
.cmain-element {
background-color: #FCF8F5;
border-radius: 1em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
max-width: 1500px;
/*properties for all the childs*/
}
.cmain-element:nth-child(1) {
flex: 1;
}
.cmain-element:nth-child(2) {
flex: 1;
}
.float-logo-title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.work-place-time h3 {
margin-top: 0.1em;
}
.logo {
margin-right: 30px;
}
#hobbies-passions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
align-items: flex-start;
background-color: #FCF8F5;
border-radius: 5px;
width: 40em;
margin: auto;
margin-bottom: 3em;
}
#hobbies-img {
text-align: center;
}
footer {
display: flex;
height: 60px;
border-radius: 5px;
background-color: #546363;
opacity: 0.8;
margin: auto;
max-width: 1920px;
}
#footerbox {
width: 40%;
display: flex;
margin: auto;
justify-content: space-around;
}
#font-face {
font-family: 'texgyrescholaregular';
src: url('font/texgyreschola-regular-webfont.eot');
src: url('font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/texgyreschola-regular-webfont.woff') format('woff'), url('font/texgyreschola-regular-webfont.ttf') format('truetype'), url('font/texgyreschola-regular-webfont.svg#texgyrescholaregular') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {
color: #DE7F89;
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
}
p {
font-size: 0.9em;
line-height: 1.5em;
}
ol,
ul {
font-size: 0.9em;
line-height: 1.5em;
/* for changing indent
padding-left: 30px;
*/
}
/*strong=default*/
a {
color: green;
text-decoration: none;
font-style: italic;
}
a:hover {
color: green;
}
a:active {
color: red;
}
a:visited {
color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="smallscreen.css" />
<meta charset="utf-8">
<title>Resume - Thibault Bétrémieux</title>
<link rel="icon" href="http://t.btmx.fr/wp-content/uploads/2016/07/favicon.png">
</head>
<div class="bg2">
<body>
<div class="bg1">
<div id="main-wrapper">
<header>
<h1>Thibault Bétrémieux - Resume as of 16<sup>th</sup> July 2016</h1>
</header>
<section id="personal-info-and-topskills">
<div class="topitem">
<p>
<a href="medias/thibault_betremieux_photo.jpg" target=_blank>
<img src="medias/thibault_betremieux_photo_mini.png" title="click to enlarge :) !" alt="Resume photo Thibault Bétrémieux" />
</a>
</p>
<!-- <a href.../> <Miniature/> </a> -->
<!-- target=_blank open in new link -->
</div>
<div class="topitem">
<h2>Personal information</h2>
<p><strong>About me: </strong>I am a young french expat living in Germany since two years, I speak four languages (French,English,German and Italian)</p>
<p><strong>Date of birth: </strong>24/12/1991</p>
<p><strong>Desired position: </strong>Online marketing or management in an international environment</p>
<p><strong>Place of residence:</strong> Bamberg, Bavaria (Germany)</p>
<a href="http://t.btmx.fr/contact">
<div id="contact_button">Contact me</div>
</a>
</div>
<div class="topitem">
<h2>Languages</h2>
<div id="languages">
<img src=medias/languages_450px.png alt="Languages">
</div>
</div>
<div class="topitem">
<h2>Computer skills</h2>
<h3>Microsoft Office</h3>
<ul>
<li>Word (including Mailing)</li>
<li>Excel (including charts and pivot tables)</li>
<li>PowerPoint (including masks)</li>
<li>Outlook</li>
</ul>
<h3>Internet</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>WordPress</li>
</ul>
</div>
</section>
<section id="containermain">
<div class="cmain-element">
<h2>Professional experience</h2>
<div class="float-logo-title">
<!-- is used to put the logo next to the title of work, place, and date-->
<div class="logo">
<p>
<img src="medias/aul_logo.png" alt="Logo Arbeit und Leben NRW" />
</p>
</div>
<div class="work-place-time">
<h3>Project manager (non renewable fixed-term contract)</h3>
<h4>Arbeit und Leben NRW, Düsseldorf, Germany</h4>
<p>05.2015 - 04-2016</p>
</div>
</div>
<ul>
<li>Organization and leading of Franco-German meetings for young people in vocational training – within the Program funded by the Franco-German Youth Office (OFAJ/DJFW) “Work in the partner country”</li>
<li>Animator of some of those meetings and training for the leading of intercultural exchanges</li>
<li>Development of partnerships between “Arbeit und Leben NRW”, socio-political organizations and/or vocational training centers</li>
</ul>
<div class="float-logo-title">
<div class="logo">
<p>
<img src="medias/dialoge_logo.png" alt="Logo Dialoge Sprachinstitut" />
</p>
</div>
<div class="work-place-time">
<h3>Assistant to the school direction (Master internship)</h3>
<h4>Dialoge Sprachinstitut GmbH, Lindau, Germany</h4>
<p>09.2013 - 01.2014</p>
</div>
</div>
<ul>
<li>CRM</li>
<li>Marketing: competition analysis and prospect survey research</li>
<li>Data exploitation and creation of documents for the ISO 9001 school certification</li>
<li>Various tasks for the school manager</li>
</ul>
<p>
<img src="medias/hsbc_trinkaus_logo.png" alt="HSBC Trinkaus logo" />
</p>
<!-- the logo is too large for any text to stand on its side -->
<h3>Assistant of the Team “Support to insolvency administrators” (Bachelor internship)</h3>
<h4>HSBC Trinkaus & Burkhardt AG (Corporate cients), Düsseldorf, Germany</h4>
<p>05.2012 – 08.2012</p>
<ul>
<li>Insight into equity backing principles, insolvency re-financing and trust accounts administration</li>
<li>Assistance to the team for opening trust accounts and for monitoring steps of insolvency proceedings</li>
<li>Daily queries for new insolvency cases in dedicated data bases</li>
</ul>
</div>
<div class="cmain-element">
<h2>Education</h2>
<h3>Specialization in E-Commerce and online Marketing</h3>
<h4>Conservatoire National des Arts et Métiers, Paris (Online training), France</h4>
<p>10.2014 - 04.2016</p>
<ul>
<li>“Online advertising and communication “(ESC127) - Grade: 1</li>
<li>"E-Commerce “(ESC128) - Grade: 1</li>
<li>“Collection and processing of digital marketing data “(ESC129) - Grade: 1</li>
<li>“Decision-making statistics in marketing “(ESC104) - Grade: 2,2</li>
<li>“Electronic marketing – digital marketing “(ESC123) - Grade: 1</li>
</ul>
<h3>Double degree: Master of Arts “Internationale Wirtschaftsbeziehungen” (International Economic Relations) – Grade 1,9</h3>
<h4>Albert-Ludwigs-Universität Freiburg, Freiburg im Breisgau, Germany</h4>
<p>10. 2012 - 09. 2014</p>
<p><strong>Masterarbeit: “Legislative environment of the bio-food sector”</strong> (Master’s thesis, 2014, 77p.) in German.</p>
<p>The founding texts (Codex Alimentarius and IFOAM Guidelines) and the laws of organic food; their relationships with the most famous bio private labels, internationally and in some regions and countries deeply involved in the organic food sector
(EU, USA, Switzerland, Germany, France, Austria ...).</p>
<h3>Double degree: Master of Arts „Commerce et Affaires internationales“ (International Business) – Grade 1,9</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2012 - 09. 2014</p>
<p><strong>Theoretical work for preparing my internship: “Quality and training”</strong> (Sept. 2013, 35 p.) in French.</p>
<p>EFQM (European Foundation for Quality Management) excellence model and quality management with examples relative to training. Management process of a training action, from creation to evaluation and its improvement in the context of a quality
approach.
</p>
<h3>Bachelor of Arts „Commerce et Affaires Internationales“ (International Business) – Grade 1,6</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2009 - 08.2012</p>
<p>Diploma with four languages (French, English, German, Italian)</p>
<h3>Baccalauréat</h3>
<h4>Lycée d’Arsonval, Saint Maur des Fossés</h4>
<p>06.2009</p>
<p>Scientific Baccalauréat in engineering sciences</p>
</div>
</section>
<section id="hobbies-passions">
<div id="hobbies-img">
<h2>Hobbies and passions</h2>
<p>
<img src="medias/hobbies_passions_1.png" alt="My hobbies and passions" />
</p>
<p>
<img src="medias/hobbies_passions_2.png" alt="My hobbies and passions" />
</p>
</div>
</section>
<footer>
<div id="footerbox">
<div class="footerelement">
<a href="https://linkedin.com/in/thibaultbetremieux">
<img src="medias/footer/linkedin_logo_40px.png" alt="Thibault Bétrémieux Linkedin">
</a>
</div>
<div class="footerelement">
<a href="https://www.xing.com/profile/Thibault_Betremieux">
<img src="medias/footer/xing_logo_40px.png" alt="Thibault Bétrémieux Xing">
</a>
</div>
<div class="footerelement">
<a href="http://t.btmx.fr/category/tech">
<img src="medias/footer/wp_articles_40px.png" alt="Thibault Bétrémieux Wordpress articles">
</a>
</div>
</div>
</footer>
</div>
</div>
<!--BG1 -->
</div>
<!--BG2 -->
</body>
</html>
Notes:
Perhaps this can help (it's the structure of the website):
i.stack.imgur.com/BEHxr.png
(I can post only 2 links max please copy paste and sorry...)
What I've tried so far:
for the text: redifining all font-sizes with media-queries for screens smaller than 1000px. For some reason, I have to define font-size for subitems (Box-> Item -> Subitems) because changing h2 or p etc. doesn't affect them. I have to use crazy values like 1.7em for them to look alright on mobile. But then if I'm on desktop with a reduced window (at less than 1000px), 1.7em looks huge :( !!
for the images: setting the image as background of the parent's (if I'm not mistaken) box seemed like a promising solution, however when I did that, the image was overflowing the box on the mobile :( ! I've also tried putting width=100% on parent or child but it didn't work.
other things that didn't make any sense or things I can't remember :P
I managed to resolve all problems by using the following code which gives a scale to the page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Take care :)!
I am trying to create something similar to the attached image where the images show up all of the time and then on hover the content shows up with the color overlay.
Right now I have the images as a background to the div, but I'm not sure if that's the best way to go about this because I cannot find a way to make the image be the correct height in the div. The link is mtmdevbox.com
Thanks in advance!
HTML
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p>
</div>
</div>
CSS
.img-one {
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat;
width: 65%;
background-size: 100%;
float: right;
clear: both;}
screenshot of design
I think this is what you're after. Let me know if it helps!
<div class="article">
<div class="content">
<h1>
This is your title
</h1>
<p>
This is your content
</p>
</div>
</div>
CSS
.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; }
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; }
.content h1 { margin: 0; padding: 0; }
.article:hover .content { display: block; }
https://jsfiddle.net/2rb18h0r/
Rather than floating the elements, you can use positioning instead. Something like:
.img-one {
background-image: url("http://i.imgur.com/5BK0htU.png");
/*background-repeat: no-repeat;*/
width: 100%;
height: 300px;
position: relative;
background-size: 100%;
cursor: pointer;
}
.img-one .hidden-content {
position: absolute;
opacity: 0.2;
transition: all 0.4s;
left: calc(35% - 10px);
width: 65%;
height: 100%;
background: rgba(200, 200, 200, 0.4);
border-left: 10px solid white;
}
.img-one:hover .hidden-content {
opacity: 1;
}
.hidden-content h1 {
margin-left: 5%;
}
.hidden-content p {
width: 35%;
margin-left: 5%;
}
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam
reium harum sum</p>
</div>
</div>
In the above demo I have set the opacity to 0.2, however setting this to 0 will allow a complete 'hidden' state.
I have decided to use the opacity CSS instead of display:hidden|none as it will allow for transitions/smooth fade in effects. If you don't want that, you can set the initial state of display:hidden and then on the hover state use display:block|inline-block