how do i make each line under the "resume" responsive in a way that when the window gets smaller it stays within the line and doesn't go all the way to the left. i tried a few things but i can't seem to get it. go to resume and see lines for where the issue is. i hope the text itself makes it clear. thanks in advance!
ex. of what i want when window gets smaller:
title: "this is title"
"this is the
second line"
"this is the third
line"
* {
box-sizing: border-box;
}
body .container {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
overflow-x: hidden;
min-width:100%;
}
.scroll {
width: 100%;
height: 100vh;
scroll-snap-align: center;
position: relative;
}
/* NAVIGATION BAR */
#main {
width: 100%;
height: 100%;
/*background-image: url(x.jpg);*/
background-size: cover;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #fff;
line-height: 80px;
z-index: 99;
}
nav ul {
text-align: center;
}
nav ul li {
list-style-type: none;
display: inline-block;
transition: 0.8s all;
}
nav ul li a {
text-decoration: none;
color: gray;
padding: 30px;
}
nav ul li a:hover {
color: #000;
text-decoration: none;
}
/* HOME NAME */
.name {
font-family: sans-serif;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
/* SECTIONS */
.box {
width: 100%;
height: 100vh;
padding: 70px;
display: flex;
padding-top: 20%;
}
.box .imgPro {
width: 150px;
flex: 0 0 150px;
}
.box .imgPro img {
width: 100%;
padding: 10px;
border-radius: 50%;
}
.box .content {
padding-left: 20px;
}
.box .content h2 {
margin: 0;
padding-left: 0;
padding-bottom: 20px;
text-align: center;
}
/* RESUME/TIMELINE */
.box-tl {
width: 100%;
height: 0;
}
.content-tl {
width: 65%;
height: 40vh;
padding-top: 10%;
padding-left: 5%;
}
.box-tl .content-tl h2 {
margin: 0;
padding-bottom: 20px;
text-align: center;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
.tl-container {
width: 30%;
height: 100vh;
padding: 50px 0;
margin: 0;
overflow: hidden;
transform: translateX(230%) translateY(10%);
}
.tl-container:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #CCD1D9;
z-index: 1
}
.timeline-block {
width: -webkit-calc(10% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
}
.timeline-block-right {
float: right;
}
.timeline-block-left {
float: left;
direction: rtl
}
.marker {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #F5F7FA;
background: #4FC1E9;
margin-top: 10px;
z-index: 9999
}
.timeline-content {
height: 16vh;
width: 95%;
padding: 0 15px;
color: #666
}
.timeline-content h3 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 15px;
font-weight: 500
}
.timeline-content span {
font-size: 13px;
color: #a4a4a4;
}
.timeline-content p {
font-size: 12px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;
}
#media screen and (max-width: 768px) {
.tl-container:before {
left: 8px;
width: 2px;
}
.timeline-block {
width: 100%;
margin-bottom: 30px;
}
.timeline-block-right {
float: none;
}
.timeline-block-left {
float: none;
direction: ltr;
}
}
/* SPACING WITHIN PARAGRAPH */
tab1 {
padding-left: 5ch;
}
tab2 {
padding-left: 7ch;
}
p
{
margin:0;
padding:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<title> title </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<div class="container">
<div id="main" class="scroll">
<nav>
<!-- <img src="x.png" width="200" height="80"> for top-left logo -->
<ul>
<li>Home</li><!--
--><li>About</li><!--
--><li>Resume</li><!--
--><li>Portfolio</li><!--
--><li>Contact</li>
</ul>
</nav>
<h1 class="name">TITLE</a></h1>
</div>
<section id="resume" class="scroll">
<div class="box-tl">
<div class="content-tl">
<h2>Resume</h2>
<p><b>Lorem:</b> Lorem ipsum<tab1>jan 2020 - feb 2020</tab1></p><!---
--><p><tab2>THIS LINE HERE, DO NOT WANT IT TO GO ALL THE WAY LEFT WHEN REDUCING WINDOW SIZE. SEE DESIRED OUTPUT AT THE TOP.</tab2></p><!--
--><p><tab2>THIS LINE HERE, DO NOT WANT IT TO GO ALL THE WAY LEFT WHEN REDUCING WINDOW SIZE. SEE DESIRED OUTPUT AT THE TOP.</tab2></p>
</div>
</div>
<div class="tl-container">
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>First Year</h3>
<span>Some work experience</span>
<p>Lorem</p>
</div>
</div>
<div class="timeline-block timeline-block-left">
<div class="marker"></div>
<div class="timeline-content">
<h3>Seconed Year</h3>
<span>Some work experience</span>
<p>Lorem</p>
</div>
</div>
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>Third Year</h3>
<span>Some work experience</span>
<p>Lorem</p>
</div>
</div>
<div class="timeline-block timeline-block-left">
<div class="marker"></div>
<div class="timeline-content">
<h3>Fourth Year</h3>
<span>Some work experience</span>
<p>Lorem</p>
</div>
</div>
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>Fifth Year</h3>
<span>Some work experience</span>
<p>Lorem</p>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
If I understood correctly, this should solve it:
.box-tl .content-tl p,
.box-tl .content-tl span, {
text-align: center;
}
Related
This is challenging for me to position the share div like in the picture above. well, I tried the position absolute with bottom and left it's so frustrating adjusting the px but the output is always either stacked on top or bottom. how can I achieve that similar output in the picture?
:root {
--VeryDarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
body {
background-color: var(--GrayishBlue);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 2fr 3fr;
max-width: 1150px;
max-height: 390px;
margin: auto;
background-color: white;
overflow: hidden;
border-radius: 0.8em;
}
.img-box {}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-box {
padding: 8%;
}
.text {
padding-bottom: 30px;
}
.title {
color: var(--VeryDarkGrayishBlue);
padding-bottom: 10px;
}
.subtitle {
color: var(--GrayishBlue);
font-size: 1.1em;
}
.writer img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 12px;
}
.name h4 {
color: var(--VeryDarkGrayishBlue);
}
.name p {
color: var(--GrayishBlue);
}
.share {
margin-left: auto;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
bottom: ;
}
<main class="container">
<div class="img-box">
<img src="/images/drawers.jpg" alt="" />
</div>
<div class="text-box">
<div class="text">
<h1 class="title">
Shift the overall look and feel by adding these wonderful touches to furniture in your home
</h1>
<p class="subtitle">
Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
</p>
</div>
<div class="footer">
<div class="writer">
<img src="/images/avatar-michelle.jpg" alt="" />
</div>
<div class="name">
<h4>Michelle Appleton</h4>
<p>28 Jun 2020</p>
</div>
<div class="share">
<div class="share-icon">
<button><img src="/images/icon-share.svg" alt=""></button>
</div>
<div class="share-option hidden">
<span>Share</span>
<a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
</div>
</div>
</div>
</div>
</main>
I have made some changes in the code and made the popup visible with absolute.
:root {
--VeryDarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
body {
background-color: var(--GrayishBlue);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 2fr 3fr;
max-width: 1150px;
max-height: 390px;
margin: auto;
background-color: white;
border-radius: 0.8em;
}
.container:after {
display: block;
content: '';
clear: both;
}
.img-box {}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-box {
padding: 8%;
}
.text {
padding-bottom: 30px;
}
.title {
color: var(--VeryDarkGrayishBlue);
padding-bottom: 10px;
}
.subtitle {
color: var(--GrayishBlue);
font-size: 1.1em;
}
.writer img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 12px;
}
.name h4 {
color: var(--VeryDarkGrayishBlue);
}
.name p {
color: var(--GrayishBlue);
}
.share {
margin-left: auto;
position: relative;
padding: 20px 0 0;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
color: white;
position: absolute;
bottom: 100%;
right: 50%;
transform: translatex(50%);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.share-option:after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: var(--VeryDarkGrayishBlue);
border-width: 10px;
margin-left: -10px;
}
.share:hover .share-option {
visibility: visible;
opacity: 1;
}
<main class="container">
<div class="img-box">
<img src="/images/drawers.jpg" alt="" />
</div>
<div class="text-box">
<div class="text">
<h1 class="title">
Shift the overall look and feel by adding these wonderful touches to furniture in your home
</h1>
<p class="subtitle">
Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
</p>
</div>
<div class="footer">
<div class="writer">
<img src="/images/avatar-michelle.jpg" alt="" />
</div>
<div class="name">
<h4>Michelle Appleton</h4>
<p>28 Jun 2020</p>
</div>
<div class="share">
<div class="share-icon">
<button><img src="/images/icon-share.svg" alt=""></button>
</div>
<div class="share-option hidden">
<span>Share</span>
<a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
</div>
</div>
</div>
</div>
</main>
I think without javascript you won't be able to do it.
You could include your share-option (position absolute) inside share-icon (position relative). This way option would be positioned relative to the button.
<div class="share">
<div class="share-icon">
<button>
<img src="/images/icon-share.svg" alt="">
</button>
<div class="share-option hidden">
<span>Share</span>
<img src="/images/icon-facebook.svg" alt="">
<img src="/images/icon-pinterest.svg" alt="">
<img src="/images/icon-twitter.svg" alt="">
</div>
</div>
</div>
and css
.share-icon {
position: relative;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
top: -40px;
z-index: 100;
}
Now the problem is options are in the boundary of the relative, so it doesn't extend on the right!
I suppose this container is responsive, meaning size can change. So I think the only way would be to put the option in the body (display none), when a click (or hover) happens on the button, you take the position of the button and position options on top of it with display flex
I am trying to fix a few issues in my code, but somehow it seems to get worse.
It should look like the example. The four boxes need to sit next to each other. All six images have to be in in row of three. for that I used div class column. On these images the names of the animal should be written (transparent).
For this I used Pad. Now the names appear on the background image instead of the individual images under.
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("images/mandarinfish.jpg");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg"></div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>
</html>
1: https://i.stack.imgur.com/tFRuK.jpg The correct example
Current Code Output My code sorry I cant add my images so you won't see the result with the right images.
check this , remove some css code for better view , for text you can add text-shadow too
changes:
add display: flex; to bg class , and .topnav{align-self: flex-end;width:100%;background: rgb(255,255,255);background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);}
you should put topnav div inside bg div
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://natgeo.imgix.net/subjects/headers/Animal-Tigers.jpg?auto=compress,format&w=1920&h=960&fit=crop");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
z-index:100;
display: flex;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent;
}
.topnav{
align-self: flex-end;
width:100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
/* .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
<div class="bg-holder">
</div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>[enter image description here][1]
</html>
I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.
Can anyone help me figure out what i'm doing wrong?
I want to insert the text inside "servicesTitle"in the middle of the image.
I have tried position, top, vertical align..and can't figure out what i'm doing wrong
<div class="services">
<p id="titleServices">Our Services</p>
<div class="servicesImages">
<div class="servicesImagesLeft">
<div id="cultureNews">
<div class="servicesTitle">Culture News</div>
<img src="/www/assets/newImages/services/190x136/Culture News1.jpg">
</div>
<div id="meetingPoint">
<div class="servicesTitle">Meeting Point</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
<div class="servicesImagesCenter">
<div id="gallery">
<img src="/www/assets/newImages/services/460x330/Gallery.jpg">
<div class="servicesTitleActive">Gallery</div>
</div>
</div>
<div class="servicesImagesRight">
<div id="profile">
<div class="servicesTitle">Profile</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
<div id="invitation">
<div class="servicesTitle">Invitation
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#clear {
clear: both;
}
.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}
.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}
.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}
.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}
.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}
.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}
.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}
.servicesImagesRight #profile {
width: 100%;
height: 100%;
}
.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}
.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}
.servicesTitle {
color: #fff;
}
.services p#titleServices {
Needs to be:
.services .servicesTitle {
.servicesTitle {
color: #fff;
width: 100%;
height:100%;
position: absolute;
top:60%;
left:auto;
z-index:2;
}
http://jsfiddle.net/uHY7C/