I have this code, and I would like to have the aside with 100% height. I have already set the height of the aside, body and section to 100%, but it does not work. Do you know how to do it? Is there any other way to do it? Thanks
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body {
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page {
width: 100%;
margin: auto;
}
/* Header */
header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#titre {
display: flex;
flex-direction: row;
align-items: flex-end;
}
#titre div {
position: absolute;
right: 40px;
top: 25px;
}
/* Body */
aside {
width: 5%;
background: url(ban.jpg);
border-radius: 4px;
}
section {
display: flex;
}
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>
</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>
use this below css code with "max-height:100%;"
<style type="text/css">
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body
{
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page
{
width: 100%;
margin: auto;
}
/* Header */
header
{
display: flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
#titre
{
display:flex;
flex-direction:row;
align-items:flex-end;
}
#titre div
{
position:absolute;
right: 40px;
top: 25px;
}
/* Body */
aside
{
width: 5%;
max-height:100%;
background: url(ban.jpg);
border-radius: 4px;
word-wrap:break-word;
border:1px solid red;
}
section
{
display:flex;
}
</style>
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>this is testing</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>
Set the position of your aside tag to absolute, then change the height and the width to whatever you want or need. (note i made the background red to make it clear that the height changed)
jsfiddle,net/thpgq299
Related
I am working on a site for a school project where I have 2 media query breakpoints cascading down from desktop to tablet and finally to mobile. My tablet breakpoint at 991px is working fine, but my mobile breakpoint at 479px does not register any changes at all. And I really have no idea what is wrong.
I tried to make more than one breakpoint for my website using media query, expecting it to work right away. The result show that only the media query with the highest max-width value works.
Any help is much appreciated.
This is how I have been writing my media queries:
#media only screen and (max-width: 991px) {}
#media only screen and (max-width: 479px) {}
This is all the code that I have been writing for my media queries if needed
#media only screen and (max-width: 991px) {
body {
width: 96%;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 5.208vw, 100px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
.p2 {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(16px, 1.094vw, 21px);
color: #242325;
margin: 0;
}
.nav-front {
position: sticky;
right: auto;
top: auto;
bottom: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 100%;
border-left: none;
padding: clamp(20px, 2.083vw, 40px);
}
.top-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.nav-links {
display: flex;
flex-direction: row;
background-color: #242325;
border-radius: 50px;
}
.nav-logo {
height: 70px;
width: auto;
margin-bottom: 0;
}
.nav-top {
display: none;
margin-bottom: 40px;
}
a {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(18px, 1.302vw, 25px);
color: #FFF8F2;
margin-bottom: 0;
text-decoration: none;
background-color: #242325;
padding: 20px;
border-radius: 50px;
}
.contact-wrapper {
display: none;
}
header {
width: 100%;
height: 80vh;
}
.profile-img-wrapper {
width: 90%;
}
.about-wrapper {
width: 95%;
}
.scroll-button-wrapper {
display: flex;
justify-content: end;
width: 104%
}
main {
width: 100%;
}
.project-1 {
height: 455px;
}
.project-3 {
height: 455px;
}
.project-5 {
height: 455px;
}
.contact-div {
height: 435px;
}
.arrow-up-left {
margin-bottom: 17%;
}
}
#media (max-width: 479px) {
body {
background-color: aqua;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 13.021vw, 250px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
header {
display: flex;
flex-direction: column;
height: 100%
}
.header-left {
width: 100%;
height: 100vh;
}
}
<html lang="da" dir="ltr">
<head>
<meta charset="UTF-8">
<title>HTML CODE</title>
<link rel="stylesheet" href="projekt-3.css">
</head>
<body>
<nav class="nav-front">
<div class="top-wrapper">
<img class="nav-logo"
src="exports/logo.svg" alt="Staugaard Design Logo">
<div class="nav-links">
<div class="nav-top">
<p>navigation</p>
<img class="arrow-down" src="exports/arrow-down.svg">
</div>
om mig
projekter
kontakt
</div>
</div>
<div class="contact-wrapper">
<div class="margin-buttom">
instagram
</div>
<p>©2022</p>
<button>KONTAKT</button>
</div>
</nav>
<header>
<div class="header-left">
<div class="margin">
<h2>KREATIV DESIGNER & UDVIKLER</h2>
</div>
<div class="moving-text-wrapper">
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
</div>
<div class="profile-img-wrapper">
</div>
</div>
<div class="header-right">
<div class="about-wrapper">
<img class="black-star" src="exports/star-2.svg">
<p>hej! mit navn er kristoffer. jeg er en freelance web designer samt web udvikler som bor i odense. Jeg skaber smukke hjemmesider i samarbejde med virksomheder og selvstændige som gerne vil skille sig ud fra konkurrenterne.</p>
</div>
<div class="scroll-button-wrapper">
<div class="scroll-button">
<img class="orange-arrow" src="exports/orange-arrow.svg">
</div>
</div>
</div>
</header>
<div class="transition">
<h1>UDVALGTE<br>PROJEKTER</h1>
</div>
<main>
<div class="main">
<div class="project-1">
<div class="project-text1">
<div class="margin-buttom">
<h2>classic curry</h2>
</div>
<p class="p2">restauranten classic curry er en klassisk indisk restaurant som laver autentiske retter. projekt gik ud på at vi skulle vælge en hjemmeside som vi synes manglede en kærlig hånd.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/classic-img.png" alt="classic curry hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
<div class="project-2">
<div class="project-text2">
<div class="margin-buttom">
<h2>gluds</h2>
</div>
<p class="p2">gluds café manglede en hjemmeside som kunne fremvise alt hvad caféen har at byde på, i et elegant design.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/gluds-img.png" alt="gluds cafe hjemmeside">
</div>
</div>
</div>
<div class="main">
<div class="contact-div">
<img class="arrow-up-white" src="exports/arrow-up-white.svg">
<div class="contact-text">
<h3>kontakt<br>kontakt<br>kontakt</h3>
</div>
</div>
<div class="project-3">
<div class="project-text3">
<div class="margin-buttom">
<h2>justesen artpack</h2>
</div>
<p class="p2">virksomheden justesen artpack er et kunst transport- og vedligeholdelses firma. De havde brug for en mere advanceret hjemmeside og et mere moderne design, som de selv kunne opdatere med blog indlæg.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/justesen-img.png" alt="justesen artpacks hjemmeside">
</div>
<img class="arrow-up-left2" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
<div class="main">
<div class="project-4">
<div class="project-text4">
<div class="margin-buttom">
<h2>m/k aps</h2>
</div>
<p class="p2">m/k service aps er et rengørings firma som manglede et nyere og moderne design, med mere funktionalitet.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/mk-img.png" alt="mk serverice hjemmeside">
</div>
</div>
<div class="project-5">
<div class="project-text5">
<div class="margin-buttom">
<h2>by gitte lage</h2>
</div>
<p class="p2">wellness -by gitte lage er en virksomhed som tilbyder wellness behandlinger og massager. i et tæt samarbejde med ejeren hjalp jeg med at bygge virksomhedens online struktur fra bunden.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/wellness-img.png" alt="mk serverice hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
</main>
</body>
Please try to keep the mobile screen media query above the tablet media query code once
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>
I got a problem with my code:
So I wrote a simple html and css code Like a simple web page. Then the "Navigacio" is bugging or I dont know it's more in the bottom, but I want it to get this to the top next to "En egy 13 eves srac vagyok..." . So can you help me out?
Here's a picture (the bug is in my secondary display):
https://i.stack.imgur.com/ejlp5.png
The code:
body {
background-color: green;
font-family: Helvetica, Arial, san-serif;
}
a {
text-decoration: none;
color: red;
}
h1,
h2,
h3 {
margin: 0;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header {
background-color: #FF0000;
color: white;
text-align: center;
padding: 10px;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
margin-left: 10px;
margin-bottom: 500px;
}
#nav ul {
list-style-type: none;
padding: 0
}
#main {
width: 600;
float: right;
color: black;
}
#footer {
clear: both;
background-color: #999999;
color: white;
text-align: right
}
#nav .kivalasztott {
font-weight: bold;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stilusv2.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Rolam</h1>
</div>
<div id="content">
<div id="main">
<p> En egy 13 eves srac vagyok, most tanulok programozni HTML-t es CSS-t.
<p>
<p>Jelenleg csak nokedli szaggato szintu vagyok az egeszben, van alapveto batch programozasi tudasom, de nem eleg mindenhez, ismereteimet folyamatosan bovitem...</p>
<p> Az egyik celom egy sajat jatekot, vagy programot fejleszteni gepre/telefonra.</p>
</div>
<div id="nav">
<h3>Navigacio</h3>
<ul>
<li><a class="Kezdolap" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/Css.html">Kezdolap</li>
<li><a class="kivalasztott" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/rolam.html">Rolam</li>
<li>Elerhetoseg</li>
</ul>
</div>
<div id="footer">
Copyright © 2019 Szigeti Donat
</div>
</div>
</div>
</body>
</html>
I think I made a mistake in the CSS file.
Put the #nav div before the #main div like so :
<div id="content">
<div id="nav">
<h3>Navigacio</h3>
<ul>
<li><a class="Kezdolap" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/Css.html">Kezdolap</li>
<li><a class="kivalasztott" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/rolam.html">Rolam</li>
<li>Elerhetoseg</li>
</ul>
</div>
<div id="main">
<p> En egy 13 eves srac vagyok, most tanulok programozni HTML-t es CSS-t.<p>
<p>Jelenleg csak nokedli szaggato szintu vagyok az egeszben, van alapveto batch programozasi tudasom, de nem eleg mindenhez, ismereteimet folyamatosan bovitem...</p>
<p> Az egyik celom egy sajat jatekot, vagy programot fejleszteni gepre/telefonra.</p>
</div>
<div id="footer">
Hi everyone from StackOverflow !
How can I prevent divs from going underneath floated divs ?
body {
/* ======================== block ======================== */
margin: 0;
padding: 0;
margin-left: 19%;
margin-right: 19%;
/* ======================== colors ======================= */
background-color: rgb(249, 249, 249);
/* ======================================================= */
}
div {
/* ======================== block ======================== */
margin: 0.5%;
padding: 1%;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);
/* ======================== colors ======================= */
background-color: white;
color: black;
/* ======================================================= */
}
#menu {
/* ======================== block ======================== */
display: table;
float: left;
/* ======================================================= */
}
#menu a {
/* ======================== block ======================== */
display: block;
/* ======================================================= */
}
#footer {
/* ======================== block ======================== */
clear: both;
/* ======================================================= */
}
<html>
<head>
<title>Info-Bulle</title>
<link href='includes/css/index.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='header'>
<span id='logo'>Info-Bulle</span>
<span id='catch'>Club d'entraide informatique pour les séniors</span>
</div>
<div id='menu'>
<a href=''><img src='includes/img/house.png' /></a>
<a href=''><img src='includes/img/journal.png' /></a>
<a href=''><img src='includes/img/dictionary.png' /></a>
<a href=''><img src='includes/img/envelope.png' /></a>
<a href=''><img src='includes/img/question.png' /></a>
<a href=''><img src='includes/img/open-book.png' /></a>
</div>
<div class='p'>
Bienvenue(s) sur le club d'entraide informatique pour séniors appelé Info-Bulle !
</br>
Besoin d'aide ?
</br>
Envie d'apprendre l'informatique ? C'est à ca que sert Info-Bulle.
</br>
Si vous ne savez pas comment utiliser ce site, veuillez consulter le <a href=''>manuel d'utilisation</a>.
</div>
<div id='footer'>
Mis en place par le CCAS de Mâcon et dévellopé par Sanchez Tanguy.
</br>
Toutes les icônes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.
</div>
</body>
</html>
Screenshot
As shown in the image above, my divs are automatically going underneath the floated one. I tried to use margins on the floated div but it doesn't seem to be the best solution for later uses.
Do you have any other solution rather than using a "margin-right on the menu" ?
Maybe it's time to use a better way to handle your layout. Here is a solution with flexbox:
body {
margin: 0 19% 0;
padding: 0;
background-color: rgb(249, 249, 249);
display: flex;
flex-direction: column;
}
.content {
display: flex;
align-items: flex-start;
}
#menu {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
div {
margin: 1%;
padding: 1%;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);
background-color: white;
color: black;
box-sizing: border-box;
}
<div id='header'>
<span id='logo'>Info-Bulle</span>
<span id='catch'>Club d'entraide informatique pour les séniors</span>
</div>
<section class="content">
<div id='menu'>
<a href=''><img src='https://lorempixel.com/50/50/'></a>
<a href=''><img src='https://lorempixel.com/40/50/'></a>
<a href=''><img src='https://lorempixel.com/50/50/'></a>
<a href=''><img src='https://lorempixel.com/50/40/'></a>
<a href=''><img src='https://lorempixel.com/50/50/'></a>
<a href=''><img src='https://lorempixel.com/50/70/'></a>
</div>
<div class='p'>
Bienvenue(s) sur le club d'entraide informatique pour séniors appelé Info-Bulle !
<br> Besoin d'aide ?
<br> Envie d'apprendre l'informatique ? C'est à ca que sert Info-Bulle.
<br> Si vous ne savez pas comment utiliser ce site, veuillez consulter le <a href=''>manuel d'utilisation</a>.
</div>
</section>
<div id='footer'>
Mis en place par le CCAS de Mâcon et dévellopé par Sanchez Tanguy.
<br> Toutes les icônes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.
</div>
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 :)!