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>
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
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;
}
I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
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.